bump to v 1.5

..TODO/TODO.txt

@@ -1,49 +1,71 @@
-TOP PRIORITY:
 
-Add a shortcut to open tree tabs sidebar
 
 undo close to restore trees (will work ONLY in firefox)
-
-
-
-Loading data using message
-
 Close tab on Middle mouse click and not On Middle mouse down
-
 Split Pin size in theme
 
 
+add groups scrolling arrows
 add textbox for ungrouped name in options
-
-
-
-
-
-LOW PRIORITY:
-
 option for scrollbar on the left
-folders
-
 unread state?
 
-menu: collapse entire tree
-menu: expand tree
 menu: copy urls of the selected tabs
 menu: bookmark selected tabs/tree
 menu: select all
 menu: invert selection
 menu: close above/close below
-
-options: Customising the context menu
+menu: Customising the context menu
+menu: move to group
+menu: Unload other
 
 
 click on active to return to previous tab
-
 sort tabs/tree
-
 maybe filter tabs on search
 
-
 make tabs border width configurable, including size 0
+make tab spacing configurable, including 0 size
 
-make tab spacing confiogurable, including 0 size
+font size
+hibernate group
+
+double click on tab actions selection like double click to be able to expand child tab.
+ I want you to be able to display the tab number count on the right end
+customizable menu
+
+import session to unload tabs immediately
+bind groups to FF containers
+
+Unread Tabs Color/Style
+Give back group color (like it was before)
+
+
+- When a pinned tab refreshes, it constantly blinks red. Suggest changing that to match Firefox's solid little blue indicator. It's less eye-catching (annoying) and more consistent.
+
+folders collapsed by default or make this optional
+
+
+when actived tab located in folder, all tabs operation related with creating new tab (such as clone of tab in folder, new tab) must work only in current folder.
+
+New tab in selected folder!
+
+
+separate option for close folder (close or promote children)
+menu: unload tabs in folders
+
+menu: unload tabs must close real FF tabs, but your tabs must markeds like unloads and stay in list.
+
+Also all your tabs you can save in special folder of FF bookmarks and working from this place, where subdirs first level = groups for tab in left... Option for set base bookmark dir for addon can add to addon config.
+
+Whilst themes are apparently available, i couldn't just grab one via a drop-down which would make it easier.
+Accept BCH (BitcoinCash) donations as the FEES make it FAR more palatable to donate (a few cents vs a few dollars). I bet you're missing out on plenty of micro donations because Bitcoin fees are so high it's no longer micro, and ETH is too high too (though not as bad).
+
+- I also support the suggestion of integrating Tree Tabs with Firefox sync. I definitely would have a great use for this possibility.
+- Like many other commenters suggested, it would be wonderful to see some indication of the container a tab was opened in, if any. Getting an option to directly be able to chose to open a new tab in a container would also be very useful. 
+
+
+I don't understand those from comments
+- add possibility open all tabs in folder in new left tab group with deleting this folder;
+- for economy memory your tabs must to makings (html code) during activating left tab group or during unfold folders/trees;
+- real FF tabs must creating and linking only after activate your tabs;

..files_ForTesting/manifest.json

@@ -14,7 +14,7 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
 
 	"sidebar_action": {
 		"default_icon": {

..files_firefox/manifest.json

@@ -14,7 +14,7 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
 	"sidebar_action": {
 		"default_icon": {
 			"16": "icons/16.png",
@@ -44,5 +44,5 @@
 		"page": "options.html",
 		"open_in_tab": true
 	},
-	"version": "1.3"
+	"version": "1.5"
 }

..files_opera/manifest.json

@@ -15,7 +15,7 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
 	"sidebar_action": {
 		"default_icon": {
 			"19": "icons/16.png",

..files_vivaldi/manifest.json

@@ -14,7 +14,7 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
 	"options_ui": {
 		"page": "options.html",
 		"open_in_tab": false

..legacy when needed/legacy.js

@@ -0,0 +1,347 @@
+// 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 OldHashTab(tab){
+	if (tabs[tab.id] == undefined){
+		tabs[tab.id] = {ttid: "", hash: 0, h: 0, parent: tab.pinned ? "pin_list" : "tab_list", index: tab.index, expand: "n"};
+	}
+	var hash = 0;
+	if (tab.url.length === 0){
+		return 0;
+	}
+	for (var i = 0; i < tab.url.length; i++){
+		hash = (hash << 5)-hash;
+		hash = hash+tab.url.charCodeAt(i);
+		hash |= 0;
+	}
+	tabs[tab.id].h = hash;
+}
+
+
+function LoadV015(retry){
+	var	loaded_options = {};
+	for (var parameter in DefaultPreferences) {
+		opt[parameter] = DefaultPreferences[parameter];
+	}
+	// set loaded options
+	if (localStorage.getItem("current_options") !== null){
+		loaded_options = JSON.parse(localStorage["current_options"]);
+	}
+	for (var parameter in opt) {
+		if (loaded_options[parameter] != undefined && opt[parameter] != undefined){
+			opt[parameter] = loaded_options[parameter];
+		}
+	}
+	SavePreferences();
+	if (localStorage.getItem("current_options") !== null){
+		localStorage.removeItem("current_options");
+
+	}
+	
+	chrome.tabs.query({windowType: "normal"}, function(qtabs){
+		// create current tabs object
+		qtabs.forEach(function(Tab){
+			OldHashTab(Tab);
+		});
+
+		var reference_tabs = {};
+		var tabs_to_save = [];
+		var tabs_matched = 0;
+		
+		// compare saved tabs from storage to current session tabs, but can be skipped if set in options
+		qtabs.forEach(function(Tab){
+			for (var t = 0; t < 9999; t++){
+				if (localStorage.getItem("t"+t) !== null){
+					var LoadedTab = JSON.parse(localStorage["t"+t]);
+					if (LoadedTab[1] === tabs[Tab.id].h && reference_tabs[LoadedTab[0]] == undefined){
+						reference_tabs[LoadedTab[0]] = Tab.id;
+						tabs[Tab.id].parent = LoadedTab[2];
+						tabs[Tab.id].index = LoadedTab[3];
+						tabs[Tab.id].expand = LoadedTab[4];
+						tabs_matched++;
+						break;
+					}
+					
+				} else {
+					break;
+				}
+
+			}
+		});
+		
+		// replace parents tabIds to new ones, for that purpose reference_tabs was made before
+		for (var tabId in tabs){
+			if (reference_tabs[tabs[tabId].parent] != undefined){
+				tabs[tabId].parent = reference_tabs[tabs[tabId].parent];
+			}
+		}
+
+		if (browserId == "F") {
+			// append ids to firefox tabs
+			qtabs.forEach(function(Tab){
+				AppendTabTTId(Tab.id);
+			});
+			qtabs.forEach(function(Tab){
+				tabs_to_save.push({id: Tab.id, ttid: tabs[tabId].ttid, parent: tabs[Tab.id].parent, index: tabs[Tab.id].index, expand: tabs[Tab.id].expand});
+			});
+		} else {
+			// create new hashes
+			qtabs.forEach(function(Tab){
+				ChromeHashURL(Tab);
+			});
+			qtabs.forEach(function(Tab){
+				tabs_to_save.push({id: Tab.id, hash: tabs[Tab.id].hash, parent: tabs[Tab.id].parent, index: tabs[Tab.id].index, expand: tabs[Tab.id].expand});
+			});
+		}
+		localStorage["t_count"] = JSON.stringify(qtabs.length);
+		localStorage["tabs"] = JSON.stringify(tabs_to_save);
+		for (var t = 0; t < 9999; t++){
+			if (localStorage.getItem("t"+t) !== null){
+				localStorage.removeItem("t"+t);
+			}
+		}
+		window.location.reload();
+	});
+}
+
+function FirefoxLoadV100(retry) {
+	chrome.windows.getAll({windowTypes: ["normal"], populate: true}, function(w) {
+
+		var refTabs = {};
+		var tabs_matched = 0;
+		var tabs_count = 0;
+		for (var wIndex = 0; wIndex < w.length; wIndex++) {
+			tabs_count += w[wIndex].tabs.length;
+		}
+
+		// load tabs and windows from hdd
+		var LoadedWindows = LoadData("windows", []);
+		var LoadedTabs = LoadData("tabs", []);
+
+		// if loaded tabs mismatch by 50%, then try to load back
+		if (LoadedTabs.length < tabs_count*0.5 || retry > 0) {
+			LoadedTabs = LoadData("tabs_BAK"+retry, []);
+		}
+		// if loaded windows mismatch, then try to load back
+		if (LoadedWindows.length < w.length || retry > 0) {
+			LoadedWindows = LoadData("windows_BAK"+retry, []);
+		}
+		// CACHED COUNTS AND STUFF
+		var lastWinId = w[w.length-1].id;
+		var lastTabId = w[w.length-1].tabs[w[w.length-1].tabs.length-1].id;
+		var LoadedWinCount = LoadedWindows.length;
+		var LoadedTabsCount = LoadedTabs.length;
+		var WinCount = w.length;
+
+		for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+			let winIndex = wIndex;
+			let winId = w[winIndex].id;
+			let tabsCount = w[winIndex].tabs.length;
+
+			let win = Promise.resolve(browser.sessions.getWindowValue(winId, "TTId")).then(function(TTId) { // LOAD TTID FROM FIREFOX GET WINDOW VALUE
+				if (TTId != undefined) {
+					windows[winId] = {ttid: TTId, group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, activetab: 0, activetab_ttid: "", name: caption_ungrouped_group, font: ""}}, folders: {}};
+				} else {
+					windows[winId] = {ttid: "", group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, activetab: 0, activetab_ttid: "", name: caption_ungrouped_group, font: ""}}, folders: {}};
+				}
+				for (var tIndex = 0; tIndex < tabsCount; tIndex++) {
+
+					let tabIndex = tIndex;
+					let tabId = w[winIndex].tabs[tabIndex].id;
+					let tabPinned = w[winIndex].tabs[tabIndex].pinned;
+					
+					let tab = Promise.resolve(browser.sessions.getTabValue(tabId, "TTId")).then(function(TTId) { // LOAD TTID FROM FIREFOX GET TAB VALUE
+						if (TTId != undefined) {
+							tabs[tabId] = {ttid: TTId, parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: "n"};
+						} else {
+							tabs[tabId] = {ttid: "", parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: "n"};
+						}
+						// IF ON LAST TAB AND LAST WINDOW, START MATCHING LOADED DATA
+						if (tabId == lastTabId && winId == lastWinId) {
+							for (var ThisSessonWinId in windows) {
+								if (windows[ThisSessonWinId].ttid != ""){
+									for (var LwIndex = 0; LwIndex < LoadedWinCount; LwIndex++) {
+										if (LoadedWindows[LwIndex].ttid == windows[ThisSessonWinId].ttid) {
+											if (LoadedWindows[LwIndex].group_bar) { windows[ThisSessonWinId].group_bar = LoadedWindows[LwIndex].group_bar; }
+											if (LoadedWindows[LwIndex].search_filter) { windows[ThisSessonWinId].search_filter = LoadedWindows[LwIndex].search_filter; }
+											if (LoadedWindows[LwIndex].active_shelf) { windows[winId].active_shelf = LoadedWindows[LwIndex].active_shelf; }
+											if (LoadedWindows[LwIndex].active_group) { windows[ThisSessonWinId].active_group = LoadedWindows[LwIndex].active_group; }
+											if (Object.keys(LoadedWindows[LwIndex].groups).length > 0) { windows[ThisSessonWinId].groups = Object.assign({}, LoadedWindows[LwIndex].groups); }
+											if (Object.keys(LoadedWindows[LwIndex].folders).length > 0) { windows[ThisSessonWinId].folders = Object.assign({}, LoadedWindows[LwIndex].folders); }
+											LoadedWindows[LwIndex].ttid = "";
+											break;
+										}
+									}
+								} else {
+									AppendWinTTId(parseInt(ThisSessonWinId));
+								}
+							}
+							// OK, DONE WITH WINDOWS, START TABS LOOP
+							for (var ThisSessonTabId in tabs) {
+								if (tabs[ThisSessonTabId].ttid != ""){
+									for (var LtabIndex = 0; LtabIndex < LoadedTabsCount; LtabIndex++) {
+										if (LoadedTabs[LtabIndex].ttid == tabs[ThisSessonTabId].ttid) {
+											refTabs[LoadedTabs[LtabIndex].id] = ThisSessonTabId;
+											if (LoadedTabs[LtabIndex].parent) { tabs[ThisSessonTabId].parent = LoadedTabs[LtabIndex].parent; }
+											if (LoadedTabs[LtabIndex].index) { tabs[ThisSessonTabId].index = LoadedTabs[LtabIndex].index; }
+											if (LoadedTabs[LtabIndex].expand) { tabs[ThisSessonTabId].expand = LoadedTabs[LtabIndex].expand; }
+											LoadedTabs[LtabIndex].ttid = "";
+											tabs_matched++;
+											break;
+										}
+									}
+								} else {
+									AppendTabTTId(parseInt(ThisSessonTabId));
+								}
+							}
+							// OK, DONE, NOW REPLACE OLD PARENTS IDS WITH THIS SESSION IDS
+							for (var ThisSessonTabId in tabs) {
+								if (refTabs[tabs[ThisSessonTabId].parent] != undefined) {
+									tabs[ThisSessonTabId].parent = refTabs[tabs[ThisSessonTabId].parent];
+								}
+							}
+							// OK, SAME THING FOR ACTIVE TABS IN GROUPS
+									
+							for (var ThisSessonWinId in windows) {
+								for (var group in windows[ThisSessonWinId].groups) {
+									if (refTabs[windows[ThisSessonWinId].groups[group].activetab]) {
+										windows[ThisSessonWinId].groups[group].activetab = refTabs[windows[ThisSessonWinId].groups[group].activetab];
+									}
+								}
+							}
+
+								
+							if (localStorage.getItem("t_count") !== null){
+								localStorage.removeItem("t_count");
+							}
+							if (localStorage.getItem("tabs_BAK1") !== null){
+								localStorage.removeItem("tabs_BAK1");
+							}
+							if (localStorage.getItem("tabs_BAK2") !== null){
+								localStorage.removeItem("tabs_BAK2");
+							}
+							if (localStorage.getItem("tabs_BAK3") !== null){
+								localStorage.removeItem("tabs_BAK3");
+							}
+							if (localStorage.getItem("tabs") !== null){
+								localStorage.removeItem("tabs");
+							}
+							if (localStorage.getItem("windows") !== null){
+								localStorage.removeItem(windows);
+							}
+								
+
+							// will try to find tabs for 3 times
+							if (opt.skip_load == true || retry > 2 || (tabs_matched > tabs_count*0.5)) {
+								
+								running = true;
+								FirefoxAutoSaveData();
+								FirefoxListeners();
+							} else {
+								setTimeout(function() {FirefoxLoadTabs(retry+1);}, 2000);
+							}
+
+						}
+					});
+				}
+			});			
+		}
+	});
+}
+
+
+function ConvertLegacyStorage() {
+	if (localStorage.getItem("current_theme") != null || localStorage.getItem("preferences") != null || localStorage.getItem("tabs") != null || localStorage.getItem("windows") != null) {
+		let current_theme = "";
+		if (localStorage.getItem("current_theme") != null) {
+			current_theme = localStorage["current_theme"];
+		}
+		let LSthemes = [];
+		if (localStorage.getItem("themes") != null) {
+			LSthemes = LoadData("themes", []);
+		}
+		SLThemes = {};
+		LSthemes.forEach(function(themeName) {
+			let them = LoadData("theme"+themeName, {"TabsSizeSetNumber": 2, "ToolbarShow": true, "toolbar": DefaultToolbar});
+			SLThemes[themeName] = them;
+		});
+
+		let LSpreferences = Object.assign({}, DefaultPreferences);
+		if (localStorage.getItem("preferences") != null) {
+			LSpreferences = LoadData("preferences", {});
+		}
+
+		if (browserId != "F") {
+			let LStabs = {};
+			if (localStorage.getItem("tabs") != null) {
+				LStabs = LoadData("tabs", {});
+			}
+			let LSwindows = {};
+			if (localStorage.getItem("windows") != null) {
+				LSwindows = LoadData("windows", {});
+			}
+			let LStabs_BAK1 = {};
+			if (localStorage.getItem("tabs_BAK1") != null) {
+				LStabs_BAK1 = LoadData("tabs_BAK1", {});
+			}
+			let LStabs_BAK2 = {};
+			if (localStorage.getItem("tabs_BAK2") != null) {
+				LStabs_BAK2 = LoadData("tabs_BAK2", {});
+			}
+			let LStabs_BAK3 = {};
+			if (localStorage.getItem("tabs_BAK3") != null) {
+				LStabs_BAK3 = LoadData("tabs_BAK3", {});
+			}
+
+			let LSwindows_BAK1 = {};
+			if (localStorage.getItem("windows_BAK1") != null) {
+				LSwindows_BAK1 = LoadData("windows_BAK1", {});
+			}
+			let LSwindows_BAK2 = {};
+			if (localStorage.getItem("windows_BAK2") != null) {
+				LSwindows_BAK2 = LoadData("windows_BAK2", {});
+			}
+			let LSwindows_BAK3 = {};
+			if (localStorage.getItem("windows_BAK3") != null) {
+				LSwindows_BAK3 = LoadData("windows_BAK3", {});
+			}
+			
+			
+			let LSt_count = 0;
+			if (localStorage.getItem("t_count") != null) {
+				LSt_count = LoadData("t_count", {});
+			}
+			let LSw_count = 0;
+			if (localStorage.getItem("w_count") != null) {
+				LSw_count = LoadData("w_count", {});
+			}
+			chrome.storage.local.set({tabs: LStabs});
+			chrome.storage.local.set({windows: LSwindows});
+			chrome.storage.local.set({tabs_BAK1: LStabs_BAK1});
+			chrome.storage.local.set({tabs_BAK2: LStabs_BAK2});
+			chrome.storage.local.set({tabs_BAK3: LStabs_BAK3});
+
+			chrome.storage.local.set({windows_BAK1: LSwindows_BAK1});
+			chrome.storage.local.set({windows_BAK2: LSwindows_BAK2});
+			chrome.storage.local.set({windows_BAK3: LSwindows_BAK3});
+			chrome.storage.local.set({t_count: LSt_count});
+			chrome.storage.local.set({w_count: LSw_count});
+		}
+		chrome.storage.local.set({preferences: LSpreferences});
+		chrome.storage.local.set({current_theme: current_theme});
+		chrome.storage.local.set({themes: SLThemes});
+		localStorage.clear();
+		window.location.reload();
+	}
+}
+
+function LoadData(KeyName, ExpectReturnDefaultType) {
+	var data = ExpectReturnDefaultType;
+	try {
+		data = JSON.parse(localStorage[KeyName]);
+		return data;
+	} catch(e) {
+		return ExpectReturnDefaultType;
+	}
+}

_locales/en/messages.json

@@ -19,6 +19,9 @@
 	"button_undo": {
 		"message": "Reopen last closed"
 	},
+	"button_detach": {
+		"message": "Detach tab"
+	},
 	"button_move": {
 		"message": "Detach tab"
 	},
@@ -55,6 +58,9 @@
 	"button_extensions": {
 		"message": "Extensions"
 	},
+	"button_unload": {
+		"message": "Unload tabs"
+	},
 	"button_discard": {
 		"message": "Unload tabs"
 	},
@@ -128,83 +134,102 @@
 
 
 
-	"tabs_menu_expand_all": {
+	"menu_expand_all": {
 		"message": "Expand all trees"
 	},
-	"tabs_menu_collapse_all": {
+	"menu_collapse_all": {
 		"message": "Collapse all trees"
 	},
-	"tabs_menu_new": {
+	"menu_expand_tree": {
+		"message": "Expand tree"
+	},
+	"menu_collapse_tree": {
+		"message": "Collapse tree"
+	},
+	"menu_new_tab": {
 		"message": "New tab"
 	},
-	"tabs_menu_clone": {
+	"menu_new_pin": {
+		"message": "New pinned tab"
+	},
+	"menu_duplicate_tab": {
 		"message": "Duplicate"
 	},
-	"tabs_menu_move": {
+	"menu_detach_tab": {
 		"message": "Detach"
 	},
-	"tabs_menu_reload": {
+	"menu_reload_tab": {
 		"message": "Reload"
 	},
-	"tabs_menu_pin": {
+	"menu_pin_tab": {
 		"message": "Pin"
 	},
-	"tabs_menu_mute": {
+	"menu_mute_tab": {
 		"message": "Mute"
 	},
-	"tabs_menu_unmute": {
+	"menu_mute_tree": {
+		"message": "Mute tree"
+	},
+	"menu_unmute_tree": {
+		"message": "Unmute tree"
+	},
+	"menu_unmute_tab": {
 		"message": "Unmute"
 	},
-	"tabs_menu_mute_other": {
+	"menu_mute_other": {
 		"message": "Mute other"
 	},
-	"tabs_menu_unmute_other": {
+	"menu_unmute_other": {
 		"message": "Unmute other"
 	},
-	"tabs_menu_unpin": {
+	"menu_unpin_tab": {
 		"message": "Unpin"
 	},
-	"tabs_menu_close_tree": {
+	"menu_close_tree": {
 		"message": "Close tree"
 	},
-	"tabs_menu_close": {
+	"menu_close": {
 		"message": "Close"
 	},
-	"tabs_menu_close_other": {
+	"menu_close_other": {
 		"message": "Close other"
 	},
-	"tabs_menu_undo": {
+	"menu_undo_close_tab": {
 		"message": "Undo close"
 	},
-	"tabs_menu_settings": {
+	"menu_treetabs_settings": {
 		"message": "Settings"
 	},
-	"tabs_menu_discard": {
+	"menu_unload": {
 		"message": "Unload"
 	},
 
+	"menu_bookmark_tree": {
+		"message": "Bookmark tree"
+	},
 
 
-	"folders_menu_new_folder": {
+
+	"menu_new_folder": {
 		"message": "New folder"
 	},
-	"folders_menu_rename_folder": {
+	"menu_rename_folder": {
 		"message": "Rename folder"
 	},
-	"folders_menu_delete": {
+	"menu_delete_folder": {
 		"message": "Delete"
 	},
 
-	"groups_menu_new_group": {
+	"menu_new_group": {
 		"message": "New group"
 	},
-	"groups_menu_rename": {
+	"menu_rename_group": {
 		"message": "Rename group"
 	},
-	"groups_menu_delete": {
+	"menu_delete_group": {
 		"message": "Delete group"
 	},
-	"groups_menu_delete_tabs_close": {
+	"menu_delete_group_tabs_close": {
 		"message": "Delete group with tabs"
 	},
 
@@ -212,6 +237,10 @@
 		"message": "Unload group"
 	},
 
+	"menu_bookmark_group": {
+		"message": "Bookmark group"
+	},
+
 
 
 
@@ -238,38 +267,88 @@
 		"message": " Tabs "
 	},
 	"options_syncro_tabbar_tabs_order": {
-		"message": "Synchronize browser tabs order with Tree Tabs, tabs can be unresponsive for a second after drag&drop. This option is needed for correct ctrl+tab switching"
+		"message": "Synchronize browser tabs order with Tree Tabs, tabs can be unresponsive for a second after drag&drop. This option is needed for correct ctrl+tab switching. You can disable this option if you don't use keyboard shortcuts."
 	},
 	"options_switch_with_scroll": {
 		"message": "Switch tabs with mouse wheel"
 	},
-	"options_close_with_MMB": {
-		"message": "Close tabs with middle mouse button"
-	},
+
 	"options_always_show_close": {
-		"message": "Show close button on all tabs"
+		"message": "Show close button on all tabs and folders"
 	},
 	"options_never_show_close": {
-	 "message": "Don't show close button (option above will be ignored)"
+	 "message": "Never show close button (option above will be ignored)"
 	},
-	"options_close_other_trees": {
+	"options_collapse_other_trees": {
 		"message": "Automatically collapse other trees on expand"
 	},
 	"options_open_tree_on_hover": {
 		"message": "Auto expand collapsed trees when dragging and holding for a second over them"
 	},
 	"options_promote_children": {
-		"message": "Promote children tabs on close, if disabled, when closing the parent of a tree structure, all tabs will be closed (be careful, because undo close tab will not recover the trees structure)"
+		"message": "Promote children on close, if disabled, when closing the parent of a tree structure, all tabs and folders will be closed (be careful, because undo close tab will not recover the trees structure)"
 	},
 
 	"options_promote_children_in_first_child": {
-		"message": "Promote first child tab as a parent"
+		"message": "Promote first child as a parent"
 	},
 
 	"options_skip_load": {
 		"message": "Discard tree structure after browser's restart, this option is for those who don't use browser's session. Basically it disables loading database at startup."
 	},
 
+
+	"options_midclick_tab": {
+		"message": "Action for middle mouse click on tab"
+	},
+	"options_dbclick_tab": {
+		"message": "Action for double click on tab"
+	},
+
+	"options_action_tab_none": {
+		"message": "nothing"
+	},
+	"options_action_tab_new": {
+		"message": "open new tab"
+	},
+	"options_action_tab_expand_collapse": {
+		"message": "expand/collapse tree"
+	},
+	"options_action_tab_close": {
+		"message": "close tab"
+	},
+	"options_action_tab_reload": {
+		"message": "reload tab"
+	},
+	"options_action_tab_unload": {
+		"message": "unload tab"
+	},
+	"options_action_tab_activate_previous_active": {
+		"message": "go back to previous active tab (works only on unpinned tabs)"
+	},
+
+
+
+
+	"options_midclick_group": {
+		"message": "Action for middle click on empty space on the left side or below the tabs"
+	},
+	"options_dbclick_group": {
+		"message": "Action for double click on empty space on the left side or below the tabs"
+	},
+	"options_action__group_none": {
+		"message": "nothing"
+	},
+	"options_action__group_new": {
+		"message": "open new tab"
+	},
+	"options_action__group_activate_previous_active": {
+		"message": "go back to previous active tab (works only on unpinned tabs)"
+	},
+
+	
+	
+	
 	"options_append_child_tab": {
 		"message": "Append children tabs at the"
 	},
@@ -330,19 +409,22 @@
 	"options_append_child_tab_after_limit_bottom": {
 		"message": "at the bottom"
 	},
-	"options_max_tree_drag_drop": {
-		"message": "Limit Drag&Drop to tree's maximum depth as well"
-	},
 	"options_show_counter_tabs": {
-		"message": "Show children tabs count on tab's title"
+		"message": "Show children tabs count on tabs and folders titles"
 	},
 	"options_show_counter_tabs_hints": {
-		"message": "Show children tabs count in tab's hint"
+		"message": "Show children tabs count in tabs and folders hints"
 	},
 
 	"options_max_tree_depth": {
 		"message": "Maximum tree depth: set it to -1 for unlimited branches, 0 for flat tabs placement (no trees), any number above 0 will be its maximum"
 	},
+	"options_max_tree_drag_drop": {
+		"message": "Limit Drag&Drop to tree's maximum depth, so you can't drop tabs beyond maximum depth"
+	},
+	"options_max_tree_drag_drop_folders": {
+		"message": "Limit Drag&Drop to tree's maximum depth, so you can't drop folders beyond maximum depth"
+	},
 
 
 
@@ -358,7 +440,44 @@
 		"message": "Show groups toolbar in new windows"
 	},
 	"options_syncro_tabbar_groups_tabs_order": {
-		"message": "Synchronize browser tabs order after drag&drop of the group tabs. Tabs will sort for a long time, if browser has a lot of tabs open. This option is needed for correct ctrl+tab switching"
+		"message": "Synchronize browser tabs order after drag&drop of the group tabs. Tabs will sort for a long time, if browser has a lot of tabs open. This option is needed for correct ctrl+tab switching. You can disable this option if you don't use keyboard shortcuts."
+	},
+
+
+
+
+	"options_folders": {
+		"message": "Folders"
+	},
+
+
+	"options_midclick_folder": {
+		"message": "Action for middle mouse click on folder"
+	},
+	"options_dbclick_folder": {
+		"message": "Action for double click on folder"
+	},
+
+	"options_action_folder_none": {
+		"message": "nothing"
+	},
+	"options_action_folder_rename": {
+		"message": "rename folder"
+	},
+	"options_action_folder_new_folder": {
+		"message": "open new folder"
+	},
+	"options_action_folder_new_tab": {
+		"message": "open new tab"
+	},
+	"options_action_folder_expand_collapse": {
+		"message": "expand/collapse tree"
+	},
+	"options_action_folder_close": {
+		"message": "close folder"
+	},
+	"options_action_folder_unload": {
+		"message": "unload tabs in folder"
 	},
 
 	
@@ -370,6 +489,11 @@
 
 
 
+	"options_global": {
+		"message": "Global"
+	},
+
+
 
 	"options_theme": {
 		"message": "Theme"
@@ -424,6 +548,16 @@
 
 
 
+	"options_tabs_margin_overlap": {
+		"message": "Tabs spacing:\nOverlap 1px, best for themes with borders"
+	},
+	"options_tabs_margin_0": {
+		"message": "Tabs spacing:\nNo spacing, best for flat look"
+	},
+	"options_tabs_margin_1": {
+		"message": "Tabs spacing:\nDefault, 1px between tabs"
+	},
+
 
 
 
@@ -532,19 +666,82 @@
 
 
 
-	"options_color_pick_filter_clear_icon": {
-	 "message": "Clear search result x button color"
-	},
 
 	"close_x": {
 	 "message": "x inside the close button"
 	},
 	"close_hover_x": {
-	 "message": "x inside the close button on hover"
+	 "message": "x inside the close button, on mouse hover"
 	},
+
+
+	"button_background": {
+	 "message": "Toolbar buttons background"
+	},
+	"button_hover_background": {
+	 "message": "Toolbar buttons background, on mouse hover"
+	},
+	
+	
+	"button_icons": {
+	 "message": "Toolbar buttons icon color"
+	},
+	"button_icons_hover": {
+	 "message": "Toolbar buttons icon color, on mouse hover"
+	},
+	"button_border": {
+	 "message": "Toolbar buttons border color"
+	},
+	"button_hover_border": {
+	 "message": "Toolbar buttons border color, on mouse hover"
+	},
+	
+
+	"filter_box_font": {
+	 "message": "Search box, font color"
+	},
+	"filter_box_background": {
+	 "message": "Search box, font background color"
+	},
+	"filter_box_border": {
+	 "message": "Search box, border color"
+	},
+	"filter_clear_icon": {
+	 "message": "Clear search result x button color"
+	},
+	
+
+	"toolbar_background": {
+	 "message": "Toolbar background color"
+	},
+	"toolbar_border_bottom": {
+	 "message": "Toolbar borders color"
+	},
+	
+
+
+	"attention_background": {
+	 "message": "Tabs blinking for attention, background color"
+	},
+	"attention_border": {
+	 "message": "Tabs blinking for attention, border color"
+	},
+	
+
+	"pin_list_border_bottom": {
+	 "message": "Pinned tabs list, border at the bottom color"
+	},
+	"pin_list_background": {
+	 "message": "Pinned tabs list, background color"
+	},
+	
+
 	"options_color_pick_hover": {
 	 "message": "On hover"
 	},
+	
+	
+	
 	"options_color_pick_border": {
 	 "message": "Border color"
 	},

_locales/ru/messages.json

@@ -2,6 +2,9 @@
    "button_bookmarks": {
       "message": "Закладки"
    },
+   "button_unload": {
+      "message": "Выгрузить все вкладки"
+   },
    "button_discard": {
       "message": "Выгрузить все вкладки"
    },
@@ -20,6 +23,9 @@
    "button_move": {
       "message": "Отсоединить текущую вкладку"
    },
+   "button_detach": {
+      "message": "Отсоединить текущую вкладку"
+   },
    "button_new": {
       "message": "ЛКМ -  открыть новую вкладку \nСКМ -  дублировать активную вкладку \nПКМ - прокрутка списка к активной вкладке"
    },
@@ -119,12 +125,10 @@
    "options_append_orphan_tab_top": {
       "message": "в начале списка"
    },
-   "options_close_other_trees": {
+   "options_collapse_other_trees": {
       "message": "автоматически сворачивать другие деревья при раскрывании дерева"
    },
-   "options_close_with_MMB": {
-      "message": "закрывать вкладки средней кнопкой мыши"
-   },
+
    "options_color_button_background": {
       "message": " фон кнопки"
    },
@@ -374,55 +378,55 @@
    "opt_url_for_web_panel": {
       "message": "Вставить этот URL в веб-панель"
    },
-   "tabs_menu_clone": {
+   "menu_duplicate_tab": {
       "message": "Дублировать вкладку"
    },
-   "tabs_menu_close": {
+   "menu_close": {
       "message": "Закрыть вкладку"
    },
-   "tabs_menu_close_other": {
+   "menu_close_other": {
       "message": "Закрыть другие вкладки"
    },
-   "tabs_menu_collapse_all": {
+   "menu_collapse_all": {
       "message": "Свернуть все деревья"
    },
-   "tabs_menu_discard": {
+   "menu_unload": {
       "message": "Выгрузить вкладку"
    },
-   "tabs_menu_expand_all": {
+   "menu_expand_all": {
       "message": "Раскрыть все деревья"
    },
-   "tabs_menu_move": {
+   "menu_detach_tab": {
       "message": "Отсоединить вкладку"
    },
-   "tabs_menu_mute": {
+   "menu_mute_tab": {
       "message": "Выключить звук на вкладке"
    },
-   "tabs_menu_mute_other": {
+   "menu_mute_other": {
       "message": "Выключить звук (на других)"
    },
-   "tabs_menu_new": {
+   "menu_new_tab": {
       "message": "Новая вкладка"
    },
-   "tabs_menu_pin": {
+   "menu_pin_tab": {
       "message": "Закрепить вкладку"
    },
-   "tabs_menu_reload": {
+   "menu_reload_tab": {
       "message": "Обновить вкладку"
    },
-   "tabs_menu_settings": {
+   "menu_treetabs_settings": {
       "message": "Настройки Tree Tabs"
    },
-   "tabs_menu_undo": {
+   "menu_undo_close_tab": {
       "message": "Отменить закрытие"
    },
-   "tabs_menu_unmute": {
+   "menu_unmute_tab": {
       "message": "Включить звук на вкладке"
    },
-   "tabs_menu_unmute_other": {
+   "menu_unmute_other": {
       "message": "Включить звук (на других)"
    },
-   "tabs_menu_unpin": {
+   "menu_unpin_tab": {
       "message": "Открепить вкладку"
    },
    "options_active_tab_font_bold": {
@@ -434,7 +438,7 @@
    "options_never_show_close": {
       "message": "не показывать кнопку закрытия (опция выше будет проигнорирована)"
    },
-   "tabs_menu_close_tree": {
+   "menu_close_tree": {
       "message": "Закрыть дерево"
    }
 }

background.html

@@ -3,6 +3,5 @@
 	<head><meta charset="utf-8"/></head>
 	<body></body>
 	<script type="text/javascript" src="../scripts/global.js"></script>
-	<script type="text/javascript" src="../legacy.js"></script>
-	<script type="text/javascript" src="../bg_ch.js"></script>
+	<script type="text/javascript" src="../bg_ff.js"></script>
 </html>

bg_ch.js

@@ -3,18 +3,31 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 if (browserId != "F") {
-	ConvertLegacyStorage();
-	LoadPreferences();
-	GetCurrentTheme();
+	// ConvertLegacyStorage();
 	ChromeLoadTabs(0);
 	ChromeMessageListeners();
 }
 function ChromeLoadTabs(retry) {
 	chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
 		chrome.storage.local.get(null, function(storage) {
+			// LOAD PREFERENCES
+			opt = Object.assign({}, DefaultPreferences);
+			if (storage["preferences"]) {
+				for (var parameter in storage["preferences"]) {
+					if (opt[parameter] != undefined) {
+						opt[parameter] = storage["preferences"][parameter];
+					}
+				}
+			}
+			// LOAD THEME
+			if (storage["current_theme"] && storage["themes"] && storage["themes"][storage["current_theme"]]) {
+				theme = storage["themes"][storage["current_theme"]];
+			} else {
+				theme = Object.assign({}, DefaultTheme);
+			}
+			// load tabs and windows from storage
 			var refTabs = {};
 			var tabs_matched = 0;
-			// load tabs and windows from storage.local
 			var w_count = storage.w_count ? storage.w_count : 0;
 			var t_count = storage.t_count ? storage.t_count : 0;
 			var LoadedWindows = storage.windows ? storage.windows : [];
@@ -36,7 +49,7 @@ function ChromeLoadTabs(retry) {
 					let winId = w[wIndex].id;
 					let url1 = w[wIndex].tabs[0].url;
 					let url2 = w[wIndex].tabs[w[wIndex].tabs.length-1].url;
-					windows[winId] = {group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, name: caption_ungrouped_group, font: ""}}, folders: {}};
+					windows[winId] = {group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, prev_active_tab: 0, name: caption_ungrouped_group, font: ""}}, folders: {}};
 					for (var LwIndex = 0; LwIndex < LoadedWinCount; LwIndex++) {
 						if (LoadedWindows[LwIndex].url1 == url1 || LoadedWindows[LwIndex].url2 == url2) {
 							if (LoadedWindows[LwIndex].group_bar) { windows[winId].group_bar = LoadedWindows[LwIndex].group_bar; }
@@ -89,6 +102,9 @@ function ChromeLoadTabs(retry) {
 					if (refTabs[windows[windowId].groups[group].active_tab]) {
 						windows[windowId].groups[group].active_tab = refTabs[windows[windowId].groups[group].active_tab];
 					}
+					if (refTabs[windows[windowId].groups[group].prev_active_tab]) {
+						windows[windowId].groups[group].prev_active_tab = refTabs[windows[windowId].groups[group].prev_active_tab];
+					}
 				}
 			}
 			// will try to find tabs for 3 times
@@ -170,7 +186,7 @@ async function ChromeAutoSaveData(BAK, LoopTimer) {
 }
 function ChromeHashURL(tab) {
 	if (tabs[tab.id] == undefined) {
-		tabs[tab.id] = {hash: 0, parent: tab.pinned ? "pin_list" : "tab_list", index: tab.index, expand: "n"};
+		tabs[tab.id] = {hash: 0, parent: tab.pinned ? "pin_list" : (windows[tab.windowId] ? windows[tab.windowId].active_group : "tab_list"), index: tab.index, expand: "n"};
 	}
 	var hash = 0;
 	for (var charIndex = 0; charIndex < tab.url.length; charIndex++) {
@@ -246,7 +262,7 @@ function ChromeListeners() { // start all listeners
 		chrome.runtime.sendMessage({command: "tab_activated", windowId: activeInfo.windowId, tabId: activeInfo.tabId});
 	});
 	chrome.windows.onCreated.addListener(function(window) {
-		windows[window.id] = {group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, name: caption_ungrouped_group, font: ""}}, folders: {}};
+		windows[window.id] = {group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, prev_active_tab: 0, name: caption_ungrouped_group, font: ""}}, folders: {}};
 		schedule_save++;
 	});
 	chrome.windows.onRemoved.addListener(function(windowId) {
@@ -259,99 +275,151 @@ function ChromeListeners() { // start all listeners
 }	
 function ChromeMessageListeners() {
 	chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
-		log("message to background: ");
-		log(message);
-		switch(message.command) {
-			case "reload":
-				window.location.reload();
-			break;
-			case "get_preferences":
-				sendResponse(opt);
-			break;
-			case "save_preferences":
-				opt = Object.assign({}, message.opt);
-				chrome.storage.local.set({preferences: message.opt});
-			break;
-			case "get_windows":
-				sendResponse(windows);
-			break;
-			case "get_folders":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].folders);
-				}
-			break;
-			case "save_folders":
+		if (opt.debug) console.log("message to background:");
+		if (opt.debug) console.log(message);
+		if (message.command == "reload") {
+			window.location.reload();
+			return;
+		}
+		if (message.command == "get_preferences") {
+			sendResponse(opt);
+			return;
+		}
+		if (message.command == "save_preferences") {
+			opt = Object.assign({}, message.opt);
+			chrome.storage.local.set({preferences: message.opt});
+			return;
+		}
+		if (message.command == "get_windows") {
+			sendResponse(windows);
+			return;
+		}
+		if (message.command == "get_folders") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].folders);
+			}
+			return;
+		}
+		if (message.command == "save_folders") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].folders = Object.assign({}, message.folders);
 				schedule_save++;
-			break;
-			case "get_groups":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].groups);
-				}
-			break;
-			case "save_groups":
+			}
+			return;
+		}
+		if (message.command == "get_groups") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].groups);
+			}
+			return;
+		}
+		if (message.command == "save_groups") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].groups = Object.assign({}, message.groups);
 				schedule_save++;
-			break;
-			case "set_active_group":
+			}
+			return;
+		}
+		if (message.command == "set_active_group") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].active_group = message.active_group;
 				schedule_save++;
-			break;
-			case "get_active_group":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].active_group);
-				}
-			break;
-			case "set_search_filter":
+			}
+			return;
+		}
+		if (message.command == "get_active_group") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].active_group);
+			}
+			return;
+		}
+		if (message.command == "set_search_filter") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].search_filter = message.search_filter;
 				schedule_save++;
-			break;
-			case "get_search_filter":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].search_filter);
-				}
-			break;			
-			case "set_active_shelf":
+			}
+			return;
+		}
+		if (message.command == "get_search_filter") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].search_filter);
+			}
+			return;
+		}			
+		if (message.command == "set_active_shelf") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].active_shelf = message.active_shelf;
 				schedule_save++;
-			break;
-			case "get_active_shelf":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].active_shelf);
-				}
-			break;
-			case "set_group_bar":
+			}
+			return;
+		}
+		if (message.command == "get_active_shelf") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].active_shelf);
+			}
+			return;
+		}
+		if (message.command == "set_group_bar") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].group_bar = message.group_bar;
 				schedule_save++;
-			break;
-			case "get_group_bar":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].group_bar);
+			}
+			return;
+		}
+		if (message.command == "get_group_bar") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].group_bar);
+			}
+			return;
+		}
+		if (message.command == "get_browser_tabs") {
+			sendResponse(tabs);
+			return;
+		}
+		if (message.command == "is_bg_ready") {
+			sendResponse(running);
+			return;
+		}
+		if (message.command == "update_tab") {
+			if (tabs[message.tabId]) {
+				if (message.tab.index) {
+					tabs[message.tabId].index = message.tab.index;
 				}
-			break;
-			// case "console_log":
-				// console.log(message.m);
-			// break;
-			case "get_browser_tabs":
-				sendResponse(tabs);
-			break;
-			case "is_bg_ready":
-				sendResponse(running);
-			break;
-			case "update_tab":
-				if (tabs[message.tabId]) {
-					for (var parameter in message.tab) {
-						tabs[message.tabId][parameter] = message.tab[parameter];
-					}
-					schedule_save++;
+				if (message.tab.expand) {
+					tabs[message.tabId].expand = message.tab.expand;
 				}
-			break;
-			case "get_theme":
-				sendResponse(theme);
-			break;
-			case "reload_theme":
-				GetCurrentTheme();
-			break;
+				if (message.tab.parent) {
+					tabs[message.tabId].parent = message.tab.parent;
+				}
+				schedule_save++;
+			}
+			return;
+		}
+		if (message.command == "update_all_tabs") {
+			for (let i = 0; i < message.pins.length; i++) {
+				if (tabs[message.pins[i].id]) {
+					tabs[message.pins[i].id].parent = "pin_list";
+					tabs[message.pins[i].id].expand = "";
+					tabs[message.pins[i].id].index = message.pins[i].index;
+				}
+			}
+			for (let j = 0; j < message.tabs.length; j++) {
+				if (tabs[message.tabs[j].id]) {
+					tabs[message.tabs[j].id].parent = message.tabs[j].parent;
+					tabs[message.tabs[j].id].expand = message.tabs[j].expand;
+					tabs[message.tabs[j].id].index = message.tabs[j].index;
+				}
+			}
+			schedule_save++;
+			return;
+		}
+		if (message.command == "get_theme") {
+			sendResponse(theme);
+			return;
+		}
+		if (message.command == "reload_theme") {
+			GetCurrentTheme();
+			return;
 		}
 	});
 }

bg_ff.js

@@ -3,10 +3,7 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 if (browserId == "F") {
-	ConvertLegacyStorage();
 	FirefoxStart(0);
-	LoadPreferences();
-	GetCurrentTheme();
 	FirefoxMessageListeners();
 }
 function FirefoxStart(retry) {
@@ -28,85 +25,105 @@ function FirefoxStart(retry) {
 }
 function FirefoxLoadTabs(retry) {
 	chrome.windows.getAll({windowTypes: ["normal"], populate: true}, function(w) {
-		var tt_ids = {};
-		var tabs_matched = 0;
-		var tabs_count = 0;
-		for (var wIndex = 0; wIndex < w.length; wIndex++) {
-			tabs_count += w[wIndex].tabs.length;
-		}
-		// CACHED COUNTS AND STUFF
-		var lastWinId = w[w.length-1].id;
-		var lastTabId = w[w.length-1].tabs[w[w.length-1].tabs.length-1].id;
-		var WinCount = w.length;
-		for (var wIndex = 0; wIndex < WinCount; wIndex++) {
-			let winIndex = wIndex;
-			let winId = w[winIndex].id;
-			let tabsCount = w[winIndex].tabs.length;
-
-			// LOAD TTID FROM FIREFOX GET WINDOW VALUE
-			let win = Promise.resolve(browser.sessions.getWindowValue(winId, "TTdata")).then(function(WindowData) {
-				if (opt.skip_load == false && WindowData != undefined) {
-					windows[winId] = Object.assign({}, WindowData);
-				} else {
-					windows[winId] = {ttid: "", group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, active_tab_ttid: "", name: caption_ungrouped_group, font: ""}}, folders: {}};
+		chrome.storage.local.get(null, function(storage) {
+			// LOAD PREFERENCES
+			opt = Object.assign({}, DefaultPreferences);
+			if (storage["preferences"]) {
+				for (var parameter in storage["preferences"]) {
+					if (opt[parameter] != undefined) {
+						opt[parameter] = storage["preferences"][parameter];
+					}
 				}
-				for (var tIndex = 0; tIndex < tabsCount; tIndex++) {
-					let tabIndex = tIndex;
-					let tabId = w[winIndex].tabs[tabIndex].id;
-					let tabPinned = w[winIndex].tabs[tabIndex].pinned;
-					// LOAD TTID FROM FIREFOX GET TAB VALUE
-					let tab = Promise.resolve(browser.sessions.getTabValue(tabId, "TTdata")).then(function(TabData) {
-						if (opt.skip_load == false && TabData != undefined) {
-							tabs[tabId] = Object.assign({}, TabData);
-							tt_ids[tabs[tabId].ttid] = tabId;
-							tabs_matched++;
-						} else {
-							tabs[tabId] = {ttid: "", parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: "n"};
-						}
-						// IF ON LAST TAB AND LAST WINDOW, START MATCHING LOADED DATA
-						if (tabId == lastTabId && winId == lastWinId) {
-							for (var ThisSessonWinId in windows) {
-								if (windows[ThisSessonWinId].ttid == "") {
-									AppendWinTTId(parseInt(ThisSessonWinId));
-								}
+			}
+			// LOAD THEME
+			if (storage["current_theme"] && storage["themes"] && storage["themes"][storage["current_theme"]]) {
+				theme = storage["themes"][storage["current_theme"]];
+			} else {
+				theme = Object.assign({}, DefaultTheme);
+			}
+			// CACHED COUNTS AND STUFF
+			// var tt_ids = {};
+			var tabs_matched = 0;
+			var tabs_count = 0;
+			for (var wIndex = 0; wIndex < w.length; wIndex++) {
+				tabs_count += w[wIndex].tabs.length;
+			}
+			var lastWinId = w[w.length-1].id;
+			var lastTabId = w[w.length-1].tabs[w[w.length-1].tabs.length-1].id;
+			var WinCount = w.length;
+			for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+				let winIndex = wIndex;
+				let winId = w[winIndex].id;
+				let tabsCount = w[winIndex].tabs.length;
+
+				// LOAD TTID FROM FIREFOX GET WINDOW VALUE
+				let win = Promise.resolve(browser.sessions.getWindowValue(winId, "TTdata")).then(function(WindowData) {
+					if (opt.skip_load == false && WindowData != undefined) {
+						windows[winId] = Object.assign({}, WindowData);
+					} else {
+						windows[winId] = {ttid: "", group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, active_tab_ttid: "", prev_active_tab: 0, prev_active_tab_ttid: "", name: caption_ungrouped_group, font: ""}}, folders: {}};
+					}
+					for (var tIndex = 0; tIndex < tabsCount; tIndex++) {
+						let tabIndex = tIndex;
+						let tabId = w[winIndex].tabs[tabIndex].id;
+						let tabPinned = w[winIndex].tabs[tabIndex].pinned;
+						// LOAD TTID FROM FIREFOX GET TAB VALUE
+						let tab = Promise.resolve(browser.sessions.getTabValue(tabId, "TTdata")).then(function(TabData) {
+							if (opt.skip_load == false && TabData != undefined) {
+								tabs[tabId] = Object.assign({}, TabData);
+								tt_ids[tabs[tabId].ttid] = tabId;
+								tabs_matched++;
+							} else {
+								tabs[tabId] = {ttid: "", parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: ""};
 							}
-							// OK, DONE WITH WINDOWS, START TABS LOOP
-							for (var ThisSessonTabId in tabs) {
-								if (tabs[ThisSessonTabId].ttid == "") {
-									AppendTabTTId(parseInt(ThisSessonTabId));
-								}
-							}
-							// OK, DONE, NOW REPLACE OLD PARENTS IDS WITH THIS SESSION IDS
-							for (var ThisSessonTabId in tabs) {
-								if (tt_ids[tabs[ThisSessonTabId].parent_ttid] != undefined) {
-									tabs[ThisSessonTabId].parent = tt_ids[tabs[ThisSessonTabId].parent_ttid];
-								}
-							}
-							// OK, SAME THING FOR ACTIVE TABS IN GROUPS
-							for (var ThisSessonWinId in windows) {
-								for (var group in windows[ThisSessonWinId].groups) {
-									if (tt_ids[windows[ThisSessonWinId].groups[group].active_tab_ttid] != undefined) {
-										windows[ThisSessonWinId].groups[group].active_tab = tt_ids[windows[ThisSessonWinId].groups[group].active_tab_ttid];
+							// IF ON LAST TAB AND LAST WINDOW, START MATCHING LOADED DATA
+							if (tabId == lastTabId && winId == lastWinId) {
+								for (var ThisSessonWinId in windows) {
+									if (windows[ThisSessonWinId].ttid == "") {
+										AppendWinTTId(parseInt(ThisSessonWinId));
 									}
 								}
+								// OK, DONE WITH WINDOWS, START TABS LOOP
+								for (var ThisSessonTabId in tabs) {
+									if (tabs[ThisSessonTabId].ttid == "") {
+										AppendTabTTId(parseInt(ThisSessonTabId));
+									}
+								}
+								// OK, DONE, NOW REPLACE OLD PARENTS IDS WITH THIS SESSION IDS
+								for (var ThisSessonTabId in tabs) {
+									if (tt_ids[tabs[ThisSessonTabId].parent_ttid] != undefined) {
+										tabs[ThisSessonTabId].parent = tt_ids[tabs[ThisSessonTabId].parent_ttid];
+									}
+								}
+								// OK, SAME THING FOR ACTIVE TABS IN GROUPS
+								for (var ThisSessonWinId in windows) {
+									for (var group in windows[ThisSessonWinId].groups) {
+										if (tt_ids[windows[ThisSessonWinId].groups[group].active_tab_ttid] != undefined) {
+											windows[ThisSessonWinId].groups[group].active_tab = tt_ids[windows[ThisSessonWinId].groups[group].active_tab_ttid];
+										}
+										if (tt_ids[windows[ThisSessonWinId].groups[group].prev_active_tab_ttid] != undefined) {
+											windows[ThisSessonWinId].groups[group].prev_active_tab = tt_ids[windows[ThisSessonWinId].groups[group].prev_active_tab_ttid];
+										}
+									}
+								}
+								// will try to find tabs for 3 times
+								if (opt.skip_load == true || retry > 2 || (tabs_matched > tabs_count*0.5)) {
+									running = true;
+									// setInterval(function() {
+									FirefoxAutoSaveData();
+									// }, 10000);
+									FirefoxListeners();
+								} else {
+									setTimeout(function() {
+										FirefoxLoadTabs(retry+1);
+									}, 2000);
+								}
 							}
-							// will try to find tabs for 3 times
-							if (opt.skip_load == true || retry > 2 || (tabs_matched > tabs_count*0.5)) {
-								running = true;
-								// setInterval(function() {
-								FirefoxAutoSaveData();
-								// }, 10000);
-								FirefoxListeners();
-							} else {
-								setTimeout(function() {
-									FirefoxLoadTabs(retry+1);
-								}, 2000);
-							}
-						}
-					});
-				}
-			});			
-		}
+						});
+					}
+				});			
+			}
+		});
 	});
 }
 // save every second if there is anything to save obviously
@@ -153,10 +170,13 @@ function GenerateNewWindowID() {
 function GenerateNewTabID() {
 	var newID = "t_"+GenerateRandomID();
 	var newIdAvailable = true;
-	for (var tabId in tabs) {
-		if (tabs[tabId].ttid == newID) {
-			newIdAvailable = false;
-		}
+	// for (var tabId in tabs) {
+		// if (tabs[tabId].ttid == newID) {
+			// newIdAvailable = false;
+		// }
+	// }
+	if (tt_ids[newID] != undefined) {
+		newIdAvailable = false;
 	}
 	if (newIdAvailable) {
 		return newID;
@@ -169,8 +189,10 @@ function AppendTabTTId(tabId) {
 	if (tabs[tabId] != undefined) {
 		tabs[tabId].ttid = NewTTTabId;
 	} else {
-		tabs[tabId] = {ttid: NewTTTabId, parent: "tab_list", parent_ttid: "", index: 0, expand: "n"};
+		tabs[tabId] = {ttid: NewTTTabId, parent: "tab_list", parent_ttid: "", index: 0, expand: ""};
 	}
+	tt_ids[NewTTTabId] = tabId;
+	return NewTTTabId;
 	// if (schedule_save > 0) browser.sessions.setTabValue( tabId, "TTdata", tabs[tabId] );
 }
 
@@ -179,7 +201,7 @@ function AppendWinTTId(windowId) {
 	if (windows[windowId] != undefined) {
 		windows[windowId].ttid = NewTTWindowId;
 	} else {
-		windows[windowId] = {ttid: NewTTWindowId, group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, active_tab_ttid: "", name: caption_ungrouped_group, font: ""}}, folders: {}};
+		windows[windowId] = {ttid: NewTTWindowId, group_bar: opt.groups_toolbar_default, search_filter: "url", active_shelf: "", active_group: "tab_list", groups: {tab_list: {id: "tab_list", index: 0, active_tab: 0, active_tab_ttid: "", prev_active_tab: 0, prev_active_tab_ttid: "", name: caption_ungrouped_group, font: ""}}, folders: {}};
 	}
 	// if (schedule_save > 0) browser.sessions.setWindowValue( windowId, "TTdata", windows[windowId] );
 }
@@ -190,7 +212,7 @@ function ReplaceParents(oldTabId, newTabId) {
 		}
 	}
 }
-var DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA = {};
+var DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA = {};					// MOZILLA BUG 1398272
 // start all listeners
 function FirefoxListeners() {
 	browser.browserAction.onClicked.addListener(function() {
@@ -198,25 +220,29 @@ function FirefoxListeners() {
 		browser.sidebarAction.open();
 	});
 	chrome.tabs.onCreated.addListener(function(tab) {
-		let t = Promise.resolve(browser.sessions.getTabValue(tab.id, "TTdata")).then(function(TabData) {
-			if (TabData != undefined) {
-				tabs[tab.id] = Object.assign({}, TabData);
-			} else {
-				AppendTabTTId(tab.id);
-			}
-			schedule_save++;
+		chrome.tabs.get(tab.id, function(NewTab) { // for some reason firefox sends tab with "active == false" even if tab is active (THIS IS POSSIBLY A NEW BUG IN FF 60.01!)
+			let t = Promise.resolve(browser.sessions.getTabValue(NewTab.id, "TTdata")).then(function(TabData) {
+				if (TabData != undefined) {
+					tabs[NewTab.id] = Object.assign({}, TabData);
+					let originalParent = TabData.parent_ttid == "" ? undefined : (tt_ids[TabData.parent_ttid] ? tt_ids[TabData.parent_ttid] : TabData.parent_ttid);
+					chrome.runtime.sendMessage({command: "tab_created", windowId: NewTab.windowId, tab: NewTab, tabId: NewTab.id, parentTabId: originalParent, index: TabData.index});
+				} else {
+					AppendTabTTId(NewTab.id);
+					chrome.runtime.sendMessage({command: "tab_created", windowId: NewTab.windowId, tab: NewTab, tabId: NewTab.id});
+				}
+				schedule_save++;
+			});
 		});
-		chrome.runtime.sendMessage({command: "tab_created", windowId: tab.windowId, tab: tab, tabId: tab.id});
-		schedule_save++;
 	});
 	chrome.tabs.onAttached.addListener(function(tabId, attachInfo) {
 		let oldId = tabId;
 		chrome.tabs.get(oldId, function(tab) {
 			ReplaceParents(oldId, tab.id);
-			tabs[tab.id] = tabs[oldId];
-			DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[oldId] = tab.id;
-			DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tab.id] = oldId;
-			browser.sessions.setTabValue( tab.id, "TTdata", tabs[oldId] );
+			tt_ids[tabs[oldId].ttid] = tab.id;																// MOZILLA BUG 1398272
+			tabs[tab.id] = tabs[oldId];																		// MOZILLA BUG 1398272
+			DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[oldId] = tab.id;				// MOZILLA BUG 1398272
+			DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tab.id] = oldId;				// MOZILLA BUG 1398272
+			browser.sessions.setTabValue( tab.id, "TTdata", tabs[oldId] );							// MOZILLA BUG 1398272
 			chrome.runtime.sendMessage({command: "tab_attached", windowId: attachInfo.newWindowId, tab: tab, tabId: tab.id, ParentId: tabs[tab.id].parent});
 			schedule_save++;
 		});
@@ -225,17 +251,17 @@ function FirefoxListeners() {
 	chrome.tabs.onDetached.addListener(function(tabId, detachInfo) {
 		chrome.runtime.sendMessage({command: "tab_detached", windowId: detachInfo.oldWindowId, tabId: tabId});
 		let detachTabId = tabId;
-		if (DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId] != undefined) {
-			detachTabId = DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId];
-			chrome.runtime.sendMessage({command: "tab_detached", windowId: detachInfo.oldWindowId, tabId: DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId]});
-		}
+		if (DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId] != undefined) {																												// MOZILLA BUG 1398272
+			detachTabId = DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId];																													// MOZILLA BUG 1398272
+			chrome.runtime.sendMessage({command: "tab_detached", windowId: detachInfo.oldWindowId, tabId: DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId]});		// MOZILLA BUG 1398272
+		}																																																							// MOZILLA BUG 1398272
 	});
 	
 	chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
 		setTimeout(function() {
-			if (DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId] != undefined) {
-				chrome.runtime.sendMessage({command: "tab_removed", windowId: removeInfo.windowId, tabId: DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId]});
-			}
+			if (DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId] != undefined) {																											// MOZILLA BUG 1398272
+				chrome.runtime.sendMessage({command: "tab_removed", windowId: removeInfo.windowId, tabId: DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA[tabId]});		// MOZILLA BUG 1398272
+			}																																																						// MOZILLA BUG 1398272
 			chrome.runtime.sendMessage({command: "tab_removed", windowId: removeInfo.windowId, tabId: tabId});
 		}, 5);
 		// setTimeout(function() {
@@ -244,10 +270,12 @@ function FirefoxListeners() {
 		schedule_save++;
 	});
 	chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
-		if (changeInfo.pinned == true) {
+		if (changeInfo.pinned == true && tabs[tabId]) {
 			tabs[tabId].parent = "pin_list";
 			tabs[tabId].parent_ttid = "";
 			schedule_save++;
+		} else {
+			AppendTabTTId(tabId);
 		}
 		if (changeInfo.title != undefined && !tab.active) {
 			chrome.runtime.sendMessage({command: "tab_attention", windowId: tab.windowId, tabId: tabId});
@@ -265,6 +293,7 @@ function FirefoxListeners() {
 				ReplaceParents(tabId, tab.id);
 				chrome.runtime.sendMessage({command: "tab_removed", windowId: tab.windowId, tabId: removedTabId});
 				chrome.runtime.sendMessage({command: "tab_attached", windowId: tab.windowId, tab: tab, tabId: addedTabId, ParentId: tabs[addedTabId].parent});
+				// delete ttid[tabs[removedTabId].ttid];
 				// delete tabs[removedTabId];
 			}
 			setTimeout(function() {
@@ -280,7 +309,7 @@ function FirefoxListeners() {
 	chrome.windows.onCreated.addListener(function(window) {
 		let win = Promise.resolve(browser.sessions.getWindowValue(window.id, "TTdata")).then(function(WindowData) {
 			if (WindowData != undefined) {
-				windows[winId] = Object.assign({}, WindowData);
+				windows[window.id] = Object.assign({}, WindowData);
 			} else {
 				AppendWinTTId(window.id);
 			}
@@ -294,115 +323,170 @@ function FirefoxListeners() {
 }
 function FirefoxMessageListeners() {
 	chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
-		log("message to background: ");
-		log(message);
-		switch(message.command) {
-			case "reload":
-				window.location.reload();
-			break;
-			case "get_preferences":
-				sendResponse(opt);
-			break;
-			case "save_preferences":
-				opt = Object.assign({}, message.opt);
-				chrome.storage.local.set({preferences: message.opt});
-			break;
-			case "get_windows":
-				sendResponse(windows);
-			break;
-			case "get_folders":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].folders);
-				}
-			break;
-			case "save_folders":
+		if (opt.debug) console.log("message to background:");
+		if (opt.debug) console.log(message);
+		if (message.command == "reload") {
+			window.location.reload();
+			return;
+		}
+		if (message.command == "get_preferences") {
+			sendResponse(opt);
+			return;
+		}
+		if (message.command == "save_preferences") {
+			opt = Object.assign({}, message.opt);
+			chrome.storage.local.set({preferences: message.opt});
+			return;
+		}
+		if (message.command == "get_windows") {
+			sendResponse(windows);
+			return;
+		}
+		if (message.command == "get_folders") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].folders);
+			}
+			return;
+		}
+		if (message.command == "save_folders") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].folders = Object.assign({}, message.folders);
 				schedule_save++;
-			break;
-			case "get_groups":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].groups);
-				}
-			break;
-			case "save_groups":
+			}
+			return;
+		}
+		if (message.command == "get_groups") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].groups);
+			}
+			return;
+		}
+		if (message.command == "save_groups") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].groups = Object.assign({}, message.groups);
 				for (var group in windows[message.windowId].groups) {
 					if (tabs[windows[message.windowId].groups[group].active_tab]) {
 						windows[message.windowId].groups[group].active_tab_ttid = tabs[windows[message.windowId].groups[group].active_tab].ttid;
 					}
+					if (tabs[windows[message.windowId].groups[group].prev_active_tab]) {
+						windows[message.windowId].groups[group].prev_active_tab_ttid = tabs[windows[message.windowId].groups[group].prev_active_tab].ttid;
+					}
 				}				
 				schedule_save++;
-			break;
-			case "set_active_group":
+			}
+			return;
+		}
+		if (message.command == "set_active_group") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].active_group = message.active_group;
 				schedule_save++;
-			break;
-			case "get_active_group":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].active_group);
-				}
-			break;
-			case "set_search_filter":
+			}
+			return;
+		}
+		if (message.command == "get_active_group") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].active_group);
+			}
+			return;
+		}
+		if (message.command == "set_search_filter") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].search_filter = message.search_filter;
 				schedule_save++;
-			break;
-			case "get_search_filter":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].search_filter);
-				}
-			break;			
-			case "set_active_shelf":
+			}
+			return;
+		}
+		if (message.command == "get_search_filter") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].search_filter);
+			}
+			return;
+		}
+		if (message.command == "set_active_shelf") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].active_shelf = message.active_shelf;
 				schedule_save++;
-			break;
-			case "get_active_shelf":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].active_shelf);
-				}
-			break;
-			case "set_group_bar":
+			}
+			return;
+		}
+		if (message.command == "get_active_shelf") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].active_shelf);
+			}
+			return;
+		}
+		if (message.command == "set_group_bar") {
+			if (windows[message.windowId]) {
 				windows[message.windowId].group_bar = message.group_bar;
 				schedule_save++;
-			break;
-			case "get_group_bar":
-				if (windows[message.windowId]) {
-					sendResponse(windows[message.windowId].group_bar);
+			}
+			return;
+		}
+		if (message.command == "get_group_bar") {
+			if (windows[message.windowId]) {
+				sendResponse(windows[message.windowId].group_bar);
+			}
+			return;
+		}
+		if (message.command == "get_browser_tabs") {
+			sendResponse(tabs);
+			return;
+		}
+		if (message.command == "is_bg_ready") {
+			sendResponse(running);
+			return;
+		}
+		if (message.command == "update_tab") {
+			if (tabs[message.tabId]) {
+				if (message.tab.index) {
+					tabs[message.tabId].index = message.tab.index;
 				}
-			break;
-			// case "console_log":
-				// console.log(message.m);
-			// break;
-			case "get_browser_tabs":
-				sendResponse(tabs);
-			break;
-			case "is_bg_ready":
-				sendResponse(running);
-			break;
-			case "update_tab":
-				if (tabs[message.tabId]) {
-					if (message.tab.index) {
-						tabs[message.tabId].index = message.tab.index;
-					}
-					if (message.tab.expand) {
-						tabs[message.tabId].expand = message.tab.expand;
-					}
-					if (message.tab.parent) {
-						tabs[message.tabId].parent = message.tab.parent;
-						if (tabs[message.tab.parent]) {
-							tabs[message.tabId].parent_ttid = tabs[message.tab.parent].ttid;
-						} else {
-							tabs[message.tabId].parent_ttid = "";
-						}
-					}
-					schedule_save++;
+				if (message.tab.expand) {
+					tabs[message.tabId].expand = message.tab.expand;
 				}
-			break;
-			case "get_theme":
-				sendResponse(theme);
-			break;
-			case "reload_theme":
-				GetCurrentTheme();
-			break;
+				if (message.tab.parent) {
+					tabs[message.tabId].parent = message.tab.parent;
+					if (tabs[message.tab.parent]) {
+						tabs[message.tabId].parent_ttid = tabs[message.tab.parent].ttid;
+					} else {
+						tabs[message.tabId].parent_ttid = "";
+					}
+				}
+				schedule_save++;
+			}
+			return;
+		}
+		if (message.command == "update_all_tabs") {
+			for (let i = 0; i < message.pins.length; i++) {
+				if (tabs[message.pins[i].id]) {
+					tabs[message.pins[i].id].parent = "pin_list";
+					tabs[message.pins[i].id].parent_ttid = "";
+					tabs[message.pins[i].id].expand = "";
+					tabs[message.pins[i].id].index = message.pins[i].index;
+				}
+			}
+			for (let j = 0; j < message.tabs.length; j++) {
+				if (tabs[message.tabs[j].id]) {
+					tabs[message.tabs[j].id].parent = message.tabs[j].parent;
+					tabs[message.tabs[j].id].expand = message.tabs[j].expand;
+					tabs[message.tabs[j].id].index = message.tabs[j].index;
+					if (tabs[message.tabs[j].parent]) {
+						tabs[message.tabs[j].id].parent_ttid = tabs[message.tabs[j].parent].ttid;
+					} else {
+						tabs[message.tabs[j].id].parent_ttid = AppendTabTTId(message.tabs[j].parent);
+					}
+				}
+			}
+			schedule_save++;
+			return;
+		}
+		if (message.command == "get_theme") {
+			sendResponse(theme);
+			return;
+		}
+		if (message.command == "reload_theme") {
+			GetCurrentTheme();
+			return;
 		}
 	});
 }

download.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8"/>
+	</head>
+	<body id="body">
+		<script type="text/javascript" src="download.js"></script>
+	</body>
+</html>

download.js

@@ -0,0 +1,18 @@
+chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+	if (message.command == "show_save_file_dialog") {
+		let file = new File([JSON.stringify(message.data)], message.filename, {type: "text/csv;charset=utf-8"} );
+		let body = document.getElementById("body");
+		let savelink = document.createElement("a");
+		savelink.target = "_blank";
+		savelink.style.display = "none";
+		savelink.type = "file";
+		savelink.download = message.filename;
+		savelink.href = URL.createObjectURL(file);
+		body.appendChild(savelink);		
+		savelink.click();
+		setTimeout(function() {
+			chrome.tabs.update(message.currentTabId, { active: true });
+			chrome.tabs.remove(message.selfTabId, null);
+		}, 50);
+	}
+});

legacy.js

@@ -4,7 +4,7 @@
 
 function OldHashTab(tab){
 	if (tabs[tab.id] == undefined){
-		tabs[tab.id] = {ttid: "", hash: 0, h: 0, parent: tab.pinned ? "pin_list" : "tab_list", index: tab.index, expand: "n"};
+		tabs[tab.id] = {ttid: "", hash: 0, h: 0, parent: tab.pinned ? "pin_list" : "tab_list", index: tab.index, expand: ""};
 	}
 	var hash = 0;
 	if (tab.url.length === 0){
@@ -153,9 +153,9 @@ function FirefoxLoadV100(retry) {
 					
 					let tab = Promise.resolve(browser.sessions.getTabValue(tabId, "TTId")).then(function(TTId) { // LOAD TTID FROM FIREFOX GET TAB VALUE
 						if (TTId != undefined) {
-							tabs[tabId] = {ttid: TTId, parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: "n"};
+							tabs[tabId] = {ttid: TTId, parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: ""};
 						} else {
-							tabs[tabId] = {ttid: "", parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: "n"};
+							tabs[tabId] = {ttid: "", parent_ttid: "", parent: tabPinned ? "pin_list" : "tab_list", index: tabIndex, expand: ""};
 						}
 						// IF ON LAST TAB AND LAST WINDOW, START MATCHING LOADED DATA
 						if (tabId == lastTabId && winId == lastWinId) {

manifest.json

@@ -14,10 +14,35 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
+	"sidebar_action": {
+		"default_icon": {
+			"16": "icons/16.png",
+			"19": "icons/16.png",
+			"38": "icons/38.png"
+		},
+		"default_panel": "sidebar.html",
+		"default_title": "Tree Tabs",
+		"browser_style": false
+	},
+	"browser_action": {
+		"default_icon": "icons/24.png"
+	},
+	"commands": {
+		"_execute_browser_action": {
+			"suggested_key": { "default": "F2" },
+			"description": "toggle Tree Tabs"
+		}
+	},
+	"applications": {
+		"gecko": {
+			"id": "TreeTabs@jagiello.it",
+			"strict_min_version": "57.0"
+		}
+	},
 	"options_ui": {
 		"page": "options.html",
-		"open_in_tab": false
+		"open_in_tab": true
 	},
-	"version": "1.0"
+	"version": "1.5"
 }

options.html

@@ -3,30 +3,30 @@
 	<head>
 		<meta charset="utf-8"/>
 		<title></title>
-		<link type="text/css" rel="stylesheet" media="all" href="../options/options.css" id="main_body_css" />
-		
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_0.css" id="sizes_preset_0" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_1.css" id="sizes_preset_1" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_2.css" id="sizes_preset_2" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_3.css" id="sizes_preset_3" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_4.css" id="sizes_preset_4" />
 		
+		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_tabs_margin_0.css" id="tabs_margin_0" />
+		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_tabs_margin_1.css" id="tabs_margin_1" />
+		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_tabs_margin_2.css" id="tabs_margin_2" />
+
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_colors.css" id="theme_colors" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme.css" id="theme" />
 
-		<link type="text/css" rel="stylesheet" media="all" href="../options/theme_size_settings_0.css" id="size_settings_0" />
-		<link type="text/css" rel="stylesheet" media="all" href="../options/theme_size_settings_1.css" id="size_settings_1" />
-		<link type="text/css" rel="stylesheet" media="all" href="../options/theme_size_settings_2.css" id="size_settings_2" />
-		<link type="text/css" rel="stylesheet" media="all" href="../options/theme_size_settings_3.css" id="size_settings_3" />
-		<link type="text/css" rel="stylesheet" media="all" href="../options/theme_size_settings_4.css" id="size_settings_4" />
+		<link type="text/css" rel="stylesheet" media="all" href="../options/options.css" id="main_body_css" />
+
 		<style rel="stylesheet">	#red_higlights_go_here { background-color: transparent; } </style>
-		<script type="text/javascript" src="../lib_jquery/jquery-3.2.1.min.js"></script>
 	</head>
 	<body id="body">
 	
 		<div style="width:850px; align:left;"><span style="width:100%; font-size:20px; display:inline-block; text-align:center; ">Tree Tabs</span></div>
 		<br>
 
+
+
 		<fieldset class="field" id="field_vivaldi">
 			<legend class="label" id="options_vivaldi"></legend>
 			<table>
@@ -38,6 +38,8 @@
 			</table>
 		</fieldset>
 
+
+
 		<fieldset class="field" id="field_pins">
 			<legend class="label" id="options_pinned" ></legend>
 			<table style="display:inline-block;">
@@ -54,6 +56,8 @@
 			</table>
 		</fieldset>
 		
+
+
 		<fieldset class="field" id="field_groups">
 			<legend class="label" id="options_groups"></legend>
 			<table style="display:vinline-block;">
@@ -73,10 +77,94 @@
 					<td class="label" id="options_syncro_tabbar_groups_tabs_order"></td>
 				</tr>
 			</table>
+			<ul>
+				<li>
+					<label class="label" id="options_midclick_group"></label>
+					<select id="midclick_group">
+						<option class="bg_opt_drop_down_menu" id="options_action__group_none" value="nothing"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action__group_new" value="new_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action__group_activate_previous_active" value="activate_previous_active"></option>
+					</select>
+				</li>
+				<li>
+					<label class="label" id="options_dbclick_group"></label>
+					<select id="dbclick_group">
+						<option class="bg_opt_drop_down_menu" id="options_action__group_none" value="nothing"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action__group_new" value="new_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action__group_activate_previous_active" value="activate_previous_active"></option>
+					</select>
+				</li>
+			</ul>
 		</fieldset>
 
+
+
+		<fieldset class="field" id="field_folders">
+			<legend class="label" id="options_folders"></legend>
+			<ul>
+				<li>
+					<label class="label" id="options_midclick_folder"></label>
+					<select id="midclick_folder">
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_none" value="nothing"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_rename" value="rename_folder"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_new_folder" value="new_folder"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_new_tab" value="new_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_expand_collapse" value="expand_collapse"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_close" value="close_folder"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_unload" value="unload_folder"></option>
+					</select>
+				</li>
+				<li>
+					<label class="label" id="options_dbclick_folder"></label>
+					<select id="dbclick_folder">
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_none" value="nothing"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_rename" value="rename_folder"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_new_folder" value="new_folder"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_new_tab" value="new_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_expand_collapse" value="expand_collapse"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_close" value="close_folder"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_folder_unload" value="unload_folder"></option>
+					</select>
+				</li>
+			</ul>
+			<table style="display:vinline-block;">
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="max_tree_drag_drop_folders"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_max_tree_drag_drop_folders"></td>
+				</tr>
+			</table>
+		</fieldset>
+
+
+
 		<fieldset class="field" id="field_tabs">
 			<legend class="label" id="options_tabs"></legend>
+			<ul>
+				<li>
+					<label class="label" id="options_midclick_tab"></label>
+					<select id="midclick_tab">
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_none" value="nothing"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_new" value="new_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_expand_collapse" value="expand_collapse"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_close" value="close_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_reload" value="reload_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_unload" value="unload_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_activate_previous_active" value="activate_previous_active"></option>
+					</select>
+				</li>
+				<li>
+					<label class="label" id="options_dbclick_tab"></label>
+					<select id="dbclick_tab">
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_none" value="nothing"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_new" value="new_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_expand_collapse" value="expand_collapse"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_close" value="close_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_reload" value="reload_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_tab_activate_previous_active" value="activate_previous_active"></option>
+					</select>
+				</li>
+			</ul>			
 			<table style="display:vinline-block;">
 				<tr>
 					<td><input type="checkbox" class="opt_checkbox bg_opt" id="syncro_tabbar_tabs_order"></input></td>
@@ -88,68 +176,7 @@
 					<td style="position:relative;left:2px;width:3px;">-</td>
 					<td class="label" id="options_switch_with_scroll"></td>
 				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="close_with_MMB"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_close_with_MMB"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="always_show_close"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_always_show_close"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="never_show_close"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_never_show_close"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="close_other_trees"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_close_other_trees"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="open_tree_on_hover"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_open_tree_on_hover"></td>
-				</tr>
-				<tr>
-					<td style="position:relative;top:-5px;"><input type="checkbox" class="opt_checkbox bg_opt" id="promote_children"></input></td>
-					<td style="position:relative;top:-5px;left:2px;width:3px;">-</td>
-					<td class="label" id="options_promote_children"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="promote_children_in_first_child"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_promote_children_in_first_child"></td>
-				</tr>
-				<tr>
-					<td style="position:relative;top:-1px;"><input type="checkbox" class="opt_checkbox bg_opt" id="skip_load"></input></td>
-					<td style="position:relative;top:-1px;left:2px;width:3px;">-</td>
-					<td class="label" id="options_skip_load"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="max_tree_drag_drop"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_max_tree_drag_drop"></td>
-				</tr>
-
-
-
-
-
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="show_counter_tabs"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_show_counter_tabs"></td>
-				</tr>
-				<tr>
-					<td><input type="checkbox" class="opt_checkbox bg_opt" id="show_counter_tabs_hints"></input></td>
-					<td style="position:relative;left:2px;width:3px;">-</td>
-					<td class="label" id="options_show_counter_tabs_hints"></td>
-				</tr>
 			</table>
-			
 			<ul>
 				<li>
 					<label class="label" id="options_append_child_tab"></label>
@@ -196,21 +223,86 @@
 					<td class="label" id="options_max_tree_depth"></td>
 				</tr>
 			</table>
+			<table style="display:vinline-block;">
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="max_tree_drag_drop"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_max_tree_drag_drop"></td>
+				</tr>
+			</table>
 			
 		</fieldset>
 		
 
+
+
+
+		<fieldset class="field" id="field_global">
+			<legend class="label" id="options_global"></legend>
+			<table style="display:vinline-block;">
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="always_show_close"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_always_show_close"></td>
+				</tr>
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="never_show_close"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_never_show_close"></td>
+				</tr>
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="collapse_other_trees"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_collapse_other_trees"></td>
+				</tr>
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="open_tree_on_hover"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_open_tree_on_hover"></td>
+				</tr>
+				<tr>
+					<td style="position:relative;top:-5px;"><input type="checkbox" class="opt_checkbox bg_opt" id="promote_children"></input></td>
+					<td style="position:relative;top:-5px;left:2px;width:3px;">-</td>
+					<td class="label" id="options_promote_children"></td>
+				</tr>
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="promote_children_in_first_child"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_promote_children_in_first_child"></td>
+				</tr>
+				<tr>
+					<td style="position:relative;top:-1px;"><input type="checkbox" class="opt_checkbox bg_opt" id="skip_load"></input></td>
+					<td style="position:relative;top:-1px;left:2px;width:3px;">-</td>
+					<td class="label" id="options_skip_load"></td>
+				</tr>
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="show_counter_tabs"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_show_counter_tabs"></td>
+				</tr>
+				<tr>
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="show_counter_tabs_hints"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_show_counter_tabs_hints"></td>
+				</tr>
+			</table>
+		</fieldset>		
+
+
+
+
+
 		<fieldset class="field" id="field_theme" style="width:850px;">
 			<legend class="label" id="options_theme"></legend>
 		
 			<select id="theme_list" style="padding-right:6px;"></select>
 			<input type="text" id="new_theme_name" name="untitled" value="untitled"></input>
-			<button class="set_button" type="button" id="options_rename_theme_button" style="margin:6px;">Rename</button>
-			<button class="set_button" type="button" id="options_add_theme_button" style="margin:6px;">Add new</button>
-			<button class="set_button" type="button" id="options_remove_theme_button" style="margin:6px;">Remove</button>
-			<button class="set_button" type="button" id="options_import_theme_button" style="margin:6px;">Import</button>
-			<button class="set_button" type="button" id="options_export_theme_button" style="margin:6px;">Export</button>
-			<button class="set_button" type="button" id="options_share_theme_link" style="margin:6px;">Export</button>
+			<button class="set_button theme_buttons" type="button" id="options_rename_theme_button" style="margin:6px;">Rename</button>
+			<button class="set_button theme_buttons" type="button" id="options_add_theme_button" style="margin:6px;">Add new</button>
+			<button class="set_button theme_buttons" type="button" id="options_remove_theme_button" style="margin:6px;">Remove</button>
+			<button class="set_button theme_buttons" type="button" id="options_import_theme_button" style="margin:6px;">Import</button>
+			<button class="set_button theme_buttons" type="button" id="options_export_theme_button" style="margin:6px;">Export</button>
+			<button class="set_button theme_buttons" type="button" id="options_share_theme_link" style="margin:6px;">Export</button>
 			<br>
 			<br>
 			<fieldset class="field" id="field_show_toolbar" style="position: relative; width:816px;">
@@ -240,11 +332,13 @@
 					<div class="toolbar" id="toolbar" style="position: relative; top: 5px;  height: 26px; width: 350px; overflow:hidden;"></div>	
 				</div>
 
-				<button class="set_button" type="button" id="options_reset_toolbar_button" style="margin:10px;">Reset</button>
+				<button class="set_button" type="button" id="options_reset_toolbar_button" style="margin:10px; margin-top:20px;">Reset</button>
 
 			</fieldset>
 
 
+
+
 			<fieldset class="field" id="Tabs" style="position: relative; top: 6px; width:816px; height: 860px;">
 				<legend class="label" id="options_theme_tabs"></legend>
 				
@@ -295,9 +389,11 @@
 				<div class="pick_col color_bucket" id="scrollbar_track"></div>
 
 				<div class="pin_list" id="pin_list"></div>
-				<div class="group" id="tab_list">
-					<div class="children_folders" id="cftab_list"></div>
-					<div class="children_tabs" id="chtab_list"></div>
+				<div id="groups">
+					<div class="group" id="tab_list">
+						<div class="children_folders" id="cftab_list"></div>
+						<div class="children_tabs" id="cttab_list"></div>
+					</div>
 				</div>
 				<div id="pin_list_scrollbar"><div id="pin_list_scrollbar_thumb"></div></div>
 				<div id="group_scrollbar"><div id="group_scrollbar_thumb"></div></div>
@@ -315,6 +411,14 @@
 					<div class="scroll_group" id="scroll_group_down"></div>
 				</div>
 		
+				<div id="options_tabs_margins_indicator">
+					<form action="" id="tabs_margin_spacing" style="position:absolute; left:4px; top:12px;">
+					  <input type="radio" class="tabs_margin_spacing" id="options_tabs_margin_overlap" name="tabs_margin_spacing" value="overlap"></input>
+					  <input type="radio" class="tabs_margin_spacing" id="options_tabs_margin_0" name="tabs_margin_spacing" value="no_space"></input>
+					  <input type="radio" class="tabs_margin_spacing" id="options_tabs_margin_1" name="tabs_margin_spacing" value="1px_space"></input>
+					</form>
+				</div>
+				
 				<div id="options_tabs_indentation_indicator">
 					<div class="options_button_minus" id="options_tabs_indentation_down"></div>
 					<div class="options_button_plus" id="options_tabs_indentation_up"></div>
@@ -383,7 +487,7 @@
 		
 		<button class="set_button" type="button" id="options_clear_data" style="margin:10px;"></button>
 		
-		<input type="color" id="color_picker" style="position:absolute; left:-500px; top:-500px; overflow:hidden; user-select: none; -moz-user-select: none;">
+		<input type="color" id="color_picker" style="position:absolute; left:-1000px; top:-1000px; width:1px; height:1px; overflow:hidden;">
 		<div id="DragImage" style="display: none; width:0px; height:0px;"></div>
 
 		<script type="text/javascript" src="../scripts/global.js"></script>
@@ -398,6 +502,7 @@
 
 		<div id="donate"></div>
 		<div id="donate_paypal" class="donation_button"></div>
+		<div id="donate_litecoin" class="donation_button"></div>
 		<div id="donate_bitcoin" class="donation_button"></div>
 		<div id="donate_ethereum" class="donation_button"></div>
 

options/options.css

@@ -8,22 +8,37 @@
 #donate {
 	position:absolute;
 	top:17px;
-	left:700px;
+	left:640px;
 	width: 100px;
 	height: 20px;
 	background-image: url(../options/donate_title.svg);
 }
 
+/* buttons are 35px apart */
 #donate_paypal {
 	position:absolute;
 	top:14px;
-	left:790px;
+	left:755px;
 	width: 32px;
 	height: 32px;
 	background-image: url(../options/donate_paypal.png);
 	background-size: 30px 30px;
 }
 #donate_paypal:hover {
+	top: 13px;
+	left:754px;
+	background-size: 32px 32px;
+}
+#donate_litecoin {
+	position:absolute;
+	top:14px;
+	left:790px;
+	width: 32px;
+	height: 32px;
+	background-image: url(../options/donate_ltc.png);
+	background-size: 30px 30px;
+}
+#donate_litecoin:hover {
 	top: 13px;
 	left:789px;
 	background-size: 32px 32px;
@@ -99,3 +114,559 @@ ul:not(.menu) li {
 	padding-left: 6px;
 	padding-right: 6px;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*           THEME DEPARTMENT            */
+
+
+
+/* OPTIONS IMAGES */
+.font_color,
+.font_weight_normal,
+.font_weight_bold,
+.font_style_normal,
+.font_style_italic,
+.color_toolbar_icon,
+.color_bucket,
+.color_brush,
+.color_border,
+.color_x,
+.options_button_minus,
+.options_button_plus {
+	z-index: 9000;
+	position: absolute;
+	display: float;
+	height: 20px;
+	width: 20px;
+	background-size: 20px 20px;
+}	
+	
+.font_color {
+	background-image: url(../options/options_font_color.svg);
+}
+.font_color:hover {
+	background-image: url(../options/options_font_color_hover.svg);
+}
+.font_weight_normal {
+	background-image: url(../options/options_font_style_normal.svg);
+}
+.font_weight_normal:hover {
+	background-image: url(../options/options_font_style_normal_hover.svg);
+}
+.font_weight_bold {
+	background-image: url(../options/options_font_weight_bold.svg);
+}
+.font_weight_bold:hover {
+	background-image: url(../options/options_font_weight_bold_hover.svg);
+}
+.font_style_normal {
+	background-image: url(../options/options_font_style_normal.svg);
+}
+.font_style_normal:hover {
+	background-image: url(../options/options_font_style_normal_hover.svg);
+}
+.font_style_italic {
+	background-image: url(../options/options_font_style_italic.svg);
+}
+.font_style_italic:hover {
+	background-image: url(../options/options_font_style_italic_hover.svg);
+}
+.color_toolbar_icon {
+	background-image: url(../options/options_color_toolbar_icon.svg);
+}
+.color_toolbar_icon:hover {
+	background-image: url(../options/options_color_toolbar_icon_hover.svg);
+}
+.color_bucket {
+	background-image: url(../options/options_color_bucket.svg);
+}
+.color_bucket:hover {
+	background-image: url(../options/options_color_bucket_hover.svg);
+}
+.color_brush {
+	background-image: url(../options/options_color_brush.svg);
+}
+.color_brush:hover {
+	background-image: url(../options/options_color_brush_hover.svg);
+}
+.color_border {
+	background-image: url(../options/options_color_border.svg);
+}
+.color_border:hover {
+	background-image: url(../options/options_color_border_hover.svg);
+}
+.color_x {
+	background-image: url(../options/options_color_x.svg);
+}
+.color_x:hover {
+	background-image: url(../options/options_color_x_hover.svg);
+}
+.options_button_minus {
+	top: 5px;
+	left: 6px;
+	background-image: url(../options/options_scale_minus.svg);
+}
+.options_button_minus:hover {
+	background-image: url(../options/options_scale_minus_hover.svg);
+}
+.options_button_plus {
+	top: 5px;
+	left: 54px;
+	background-image: url(../options/options_scale_plus.svg);
+}
+.options_button_plus:hover {
+	background-image: url(../options/options_scale_plus_hover.svg);
+}
+
+@keyframes hover_blinking {
+	0%  {background-color: transparent;}
+	100% {background-color: blue;}
+}
+.hover_blinking {
+	animation: hover_blinking 1s infinite;
+}
+
+@keyframes hover_border_blinking {
+	0%  {border: 1px solid transparent;}
+	100% {border: 1px solid blue;}
+}
+.hover_border_blinking {
+	animation: hover_border_blinking 1s infinite;
+}
+
+/* MAIN TOOLBAR */
+#toolbar_background {
+	top: 0px;
+	left: 307px;
+}
+#toolbar_border_bottom {
+	top: 0px;
+	left: 328px;
+}
+
+#button_icons {
+	top: 0px;
+	left: 59px;
+}
+#button_icons_hover {
+	top: 0px;
+	left: 80px;
+}
+
+#button_background {
+	top: 0px;
+	left: 4px;
+}
+#button_hover_background {
+	top: 0px;
+	left: 25px;
+}
+
+#button_border {
+	top: 0px;
+	left: 115px;
+}
+#button_hover_border {
+	top: 0px; left: 136px;
+}
+
+#filter_box_font {
+	top: 0px;
+	left: 175px;
+}
+#filter_clear_icon {
+	top: 0px;
+	left: 238px;
+}
+#filter_box_background {
+	top: 0px;
+	left: 196px;
+}
+#filter_box_border {
+	top: 0px;
+	left: 217px;
+}
+
+
+/* BIG OPTIONS BUTTONS */
+#options_tabs_margins_indicator {
+	z-index: 3000;
+	display: float;
+	position: absolute;
+	top: 25px;
+	left: 460px;
+	height: 30px;
+	width: 80px;
+	background-size: 80px 30px;
+	background-image: url(../options/options_tabs_margin_indicator.svg);
+}
+#options_tabs_indentation_indicator {
+	z-index: 3000;
+	display: float;
+	position: absolute;
+	top: 25px;
+	left: 550px;
+	height: 30px;
+	width: 80px;
+	background-size: 80px 30px;
+	background-image: url(../options/options_tabs_indentation_indicator.svg);
+}
+#options_tabs_roundness_indicator {
+	z-index: 3000;
+	display: float;
+	position: absolute;
+	top: 25px;
+	left: 640px;
+	height: 30px;
+	width: 80px;
+	background-size: 80px 30px;
+	background-image: url(../options/options_tabs_roundness_indicator.svg);
+}
+#options_tabs_size_indicator {
+	z-index: 3000;
+	display: float;
+	position: absolute;
+	top: 25px; left: 730px;
+	height: 30px;
+	width: 80px;
+	background-size: 80px 30px;
+	background-image: url(../options/options_tabs_size_indicator.svg);
+}
+
+/* SCROLLBAR RESIZE */
+#scrollbar_size_indicator {
+	z-index: 3000;
+	display: float;
+	position: absolute;
+	top: 20px;
+	left: 335px;
+	height: 80px;
+	width: 80px;
+	background-size: 80px 80px;
+	background-image: url(../options/options_scrollbar_size_indicator.svg);
+}
+#options_tab_list_scrollbar_width_down {
+	left: 3px;
+	top: 30px;
+}
+#options_tab_list_scrollbar_width_up {
+	left: 57px;
+	top: 30px;
+}
+#options_tab_list_scrollbar_height_up {
+	left: 30px;
+	top: 3px;
+}
+#options_tab_list_scrollbar_height_down {
+	left: 30px;
+	top: 57px;
+}
+
+
+/* PIN LIST AND SCROLLBAR */
+#pin_list {
+	position: absolute;
+	height: calc(var(--scrollbar_height) + var(--pin_height) + 2px - var(--pin_list_padding_top) - var(--pin_list_padding_bottom));
+	width: 788px;
+	top: 30px;
+	left: 20px;
+	padding: none;
+}
+
+#pin_list_scrollbar {
+	position: absolute;
+	height: var(--scrollbar_height);
+	width: 790px;
+	top: calc(var(--pin_height) + 32px );
+	left: 20px; z-index: 1000;
+	background-color: var(--scrollbar_track);
+}
+#pin_list_scrollbar_thumb {
+	position: relative;
+	height: 100%;
+	width: 100px;
+	top: 0px;
+	left: 0px;
+	z-index: 1200;
+	background-color: var(--scrollbar_thumb);
+}
+#pin_list_scrollbar_thumb:hover {
+	background-color: var(--scrollbar_thumb_hover);
+}
+
+
+
+/* PINS */
+#pin_list_options_block {
+	z-index: 2000;
+	position:absolute;
+	width: 500px;
+	height: var(--pin_height);
+	top: 30px;
+	left: 20px;
+	margin: 0;
+	/* background:rgba(0,0,255,0.1); */
+}
+#pin_list_background {
+	top: 1px;
+	left: 187px;
+}
+#pin_list_border_bottom {
+	top: 1px;
+	left: 164px;
+}
+
+
+/* ATTENTION PIN */
+#attention_background {
+	top: 1px;
+	left: 72px;
+}
+#attention_border {
+	top: 1px;
+	left: 93px;
+}
+
+
+
+/* TAB LIST AND SCROLLBAR */
+#groups {
+	position: absolute;
+	height: 800px;
+	width: calc(771px - var(--scrollbar_width));
+	top: calc(var(--scrollbar_height) + var(--pin_height) + 33px);
+	left: 40px;
+	z-index: 1000
+}
+
+#group_scrollbar {
+	position: absolute;
+	height: 800px;
+	width: var(--scrollbar_width);
+	top: calc(var(--scrollbar_height) + var(--pin_height) + 33px);
+	left: calc(810px - var(--scrollbar_width));
+	z-index: 1000;
+	background-color: var(--scrollbar_track);
+}
+#group_scrollbar_thumb {
+	position: relative;
+	height: 200px;
+	width: 100%;
+	top: 140px;
+	left: 0px;
+	z-index: 1000;
+	background-color: var(--scrollbar_thumb);
+}
+#group_scrollbar_thumb:hover {
+	background-color: var(--scrollbar_thumb_hover);
+}
+#scrollbar_thumb {
+	position: absolute;
+	top: 370px;
+	left: 790px;
+}
+#scrollbar_thumb_hover {
+	position: absolute;
+	top: 390px;
+	left: 790px;
+}
+#scrollbar_track {
+	position: absolute;
+	top: 410px;
+	left: 790px;
+}
+
+/* TABS */
+#tabs_options_block {
+	z-index: 2000;
+	position:absolute;
+	width: 740px;
+	height: auto;
+	top: calc(var(--scrollbar_height) + var(--pin_height) + 35px);
+	left: 50px;
+	margin: 0;
+	/* background:rgba(0,255,0,0.5); */
+}
+
+.tab_color_options_row {
+	z-index: 2000;
+	position:relative;
+	margin-top: var(--margin_top_tab);
+	width: 740px;
+	height: calc(var(--tab_height) + 2px);
+	/* background:rgba(255,0,0,0.1); */ 
+}
+.tab_color_options_row .color_x,
+.tab_color_options_row .color_border,
+.tab_color_options_row .color_border,
+.tab_color_options_row .color_bucket,
+.tab_color_options_row .font_color,
+.tab_color_options_row .font_weight_normal,
+.tab_color_options_row .font_weight_bold,
+.tab_color_options_row .font_style_normal,
+.tab_color_options_row .font_style_italic {
+	top: 0px;
+	height: var(--tab_height);
+	width: var(--tab_height);
+	background-size: var(--tab_height) var(--tab_height);
+}
+
+.tab_color_options_row>.color_border {
+	left: 659px;
+}
+.tab_color_options_row>.color_bucket {
+	left: 680px;
+}
+.tab_color_options_row>.font_color {
+	left: 509px;
+}
+.tab_color_options_row>.font_weight_normal {
+	left: 538px;
+}
+.tab_color_options_row>.font_weight_bold {
+	left: 559px;
+}
+.tab_color_options_row>.font_style_normal {
+	left: 588px;
+}
+.tab_color_options_row>.font_style_italic {
+	left: 609px;
+}
+
+
+/* DRAG AND DROP INDICATOR */
+#dd19 {
+	display: inline-block;
+	border-bottom: 2px solid var(--drag_indicator);
+}
+#drag_indicator {
+	top: calc(var(--tab_height) / 2);
+	left: 350px;
+}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#close_x {
+	top: 0px;
+	left: calc(753px - var(--scrollbar_width));
+}
+#close_hover_x {
+	top: calc(-1* var(--tab_height));
+	left: calc(753px - var(--scrollbar_width));
+}
+#close_hover_border {
+	top: 0px;
+	left: calc(753px - var(--scrollbar_width));
+}
+#close_hover_background {
+	top: var(--tab_height);
+	left: calc(753px - var(--scrollbar_width));
+}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#expand_hover_background {
+	top: 0px;
+	left: calc(var(--children_padding_left) - 18px);
+}
+#expand_closed_background {
+	top: 0px;
+	left: calc(var(--children_padding_left) - 18px);
+}
+#expand_open_background {
+	top: 0px; left: -12px;
+}
+
+
+#tab_list_background {
+	top: 835px;
+	left: 50px;
+}
+
+
+
+#toolbar_groups_block {
+	position: absolute;
+	left: 20px;
+	top: calc(var(--scrollbar_height) + var(--pin_height) + 33px);
+	width: 19px;
+	height: 800px;
+	background-color: var(--group_list_background);
+	border-right: 1px solid var(--group_list_borders);
+	overflow: visible;
+}
+#_gtetab_list {
+	width: 200px;
+	height: 20px;
+}
+#_gtetab_list2 {
+	width: 200px;
+	height: 20px;
+}
+#_tab_list2:hover {
+	background-color: var(--group_list_button_hover_background);
+}
+
+#group_list_background {
+	top: 835px;
+	left: 20px;
+}
+#group_list_borders {
+	top: 631px;
+	left: 20px;
+}
+#group_list_default_font_color {
+	top: 652px;
+	left: 20px;
+}
+#group_list_button_hover_background {
+	top: 610px;
+	left: 20px;
+}
+
+
+/* MENU */
+#tabs_menu_border {
+	top: 59px;
+	left: 80px;
+}
+#tabs_menu_background {
+	top: 59px;
+	left: 102px;
+}
+#tabs_menu_font {
+	top: 36px;
+	left: 102px;
+}
+#tabs_menu_hover_border {
+	top: 14px;
+	left: 80px;
+}
+#tabs_menu_hover_background {
+	top: 14px;
+	left: 102px;
+}
+#tabs_menu_separator {
+	top: 36px;
+	left: 80px;
+}
+
+

options/options.js

@@ -10,6 +10,9 @@ var SelectedTheme = Object.assign({}, DefaultTheme);
 var dragged_button;
 active_group = "tab_list";
 
+// options for all drop down menus
+let DropDownList = ["dbclick_folder", "midclick_folder", "midclick_tab", "dbclick_group", "midclick_group", "dbclick_tab", "append_child_tab", "append_child_tab_after_limit", "append_orphan_tab", "after_closing_active_tab"];
+
 document.addEventListener("DOMContentLoaded", function() {
 	document.title = "Tree Tabs";
 	chrome.runtime.sendMessage({command: "get_preferences"}, function(response) {
@@ -27,9 +30,8 @@ document.addEventListener("DOMContentLoaded", function() {
 			GetOptions();
 			RefreshFields();
 			SetEvents();
-			SetToolbarShelfToggle("click");
-			AppendGroupToList("tab_list", caption_ungrouped_group, "");
-			AppendGroupToList("tab_list2", caption_noname_group, "");
+			AppendGroupToList("tab_list", caption_ungrouped_group, "", false);
+			AppendGroupToList("tab_list2", caption_noname_group, "", false);
 			AppendSampleTabs();
 		});
 	});
@@ -38,567 +40,626 @@ document.addEventListener("DOMContentLoaded", function() {
 // document events
 function GetOptions() {
 	// get language labels
-	$(".label").each(function() {
-		$(this).text(chrome.i18n.getMessage(this.id));
-	});
-	// get language for color pick labels
-	$(".cpl").each(function() {
-		$(this).text(chrome.i18n.getMessage(this.id));
+	document.querySelectorAll(".label, .set_button, .bg_opt_drop_down_menu").forEach(function(s){
+		s.textContent = chrome.i18n.getMessage(s.id);
 	});	
+
 	// get language for menu labels
-	$(".menu_item").each(function() {
-		$(this).text(chrome.i18n.getMessage("options_example_menu_item"));
+	document.querySelectorAll(".menu_item").forEach(function(s){
+		s.textContent = chrome.i18n.getMessage("options_example_menu_item");
 	});	
 	
 	// get checkboxes from saved states
-	$(".opt_checkbox").each(function() {
-		$(this)[0].checked = opt[this.id];
-	});
-	$(".set_button").each(function() {
-		$(this)[0].textContent = chrome.i18n.getMessage(this.id);
-	});
-	
-	// get language dropdown menus
-	$(".bg_opt_drop_down_menu").each(function() {
-		$(this)[0].textContent = chrome.i18n.getMessage(this.id);
-	});
-
-	// get language for color pick labels
-	$("#close_x, #close_hover_x").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage(this.id));
-	});
-	$(".color_border").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage("options_color_pick_border"));
-	});
-	$(".color_bucket").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage("options_color_pick_background"));
-	});
-	$(".pick_col_hover").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage("options_color_pick_hover"));
-	});
-	$(".font_color").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage("options_color_pick_font"));
-	});
-
-	$(".options_button_minus, .options_button_plus").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage(this.id));
-	});
-	$("#filter_clear_icon").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage("options_color_pick_filter_clear_icon"));
-	});
-	
-	// get options for append child tab
-	for (var i = 0; i < $("#append_child_tab")[0].options.length; i++) {
-		if ($("#append_child_tab")[0].options[i].value === opt.append_child_tab) {
-			$("#append_child_tab")[0].selectedIndex = i;
-			break;
+	document.querySelectorAll(".opt_checkbox").forEach(function(s){
+		s.checked = opt[s.id];
+		if (s.checked) {
+			if (s.id == "never_show_close") {
+				document.getElementById("always_show_close").disabled = true;
+			}
+		} else {
+			if (s.id == "promote_children") {
+				document.getElementById("promote_children_in_first_child").disabled = true;
+			}
 		}
-	}
+	});	
 	
-	// get options for append child tab after limit
-	for (var i = 0; i < $("#append_child_tab_after_limit")[0].options.length; i++) {
-		if ($("#append_child_tab_after_limit")[0].options[i].value === opt.append_child_tab_after_limit) {
-			$("#append_child_tab_after_limit")[0].selectedIndex = i;
-			break;
-		}
-	}
+	// get language labels
+	document.querySelectorAll(".pick_col, #close_x, #close_hover_x, .options_button_minus, .options_button_plus, .tabs_margin_spacing").forEach(function(s){
+		s.title = chrome.i18n.getMessage(s.id);
+	});
 	
-	// get options for append orphan tab
-	for (var i = 0; i < $("#append_orphan_tab")[0].options.length; i++) {
-		if ($("#append_orphan_tab")[0].options[i].value === opt.append_orphan_tab) {
-			$("#append_orphan_tab")[0].selectedIndex = i;
-			break;
-		}
-	}
 
-	// get options for action after closing active tab
-	for (var i = 0; i < $("#after_closing_active_tab")[0].options.length; i++) {
-		if ($("#after_closing_active_tab")[0].options[i].value === opt.after_closing_active_tab) {
-			$("#after_closing_active_tab")[0].selectedIndex = i;
-			break;
+
+
+
+	// get options for all drop down menus (loop through all drop down items that are in DropDownList array)
+	for (let i = 0; i < DropDownList.length; i++) {
+		let DropDownOption = document.getElementById(DropDownList[i]);
+		for (let j = 0; j < DropDownOption.options.length; j++) {
+			if (DropDownOption.options[j].value == opt[DropDownList[i]]) {
+				DropDownOption.selectedIndex = j;
+				break;
+			}
 		}
 	}
 
 	// get options for tabs tree depth option
-	$("#max_tree_depth")[0].value = opt.max_tree_depth;
+	document.getElementById("max_tree_depth").value = opt.max_tree_depth;
+
 
 	// append themes to dropdown menu
+	let ThemeList = document.getElementById("theme_list");
 	for (var i = 0; i < themes.length; i++) {
-		var t_list = document.getElementById("theme_list");
-		var	theme_name = document.createElement("option");
-			theme_name.value = themes[i];
-			theme_name.text = themes[i];
-		t_list.add(theme_name);
+		let theme_name = document.createElement("option");
+		theme_name.value = themes[i];
+		theme_name.text = themes[i];
+		ThemeList.add(theme_name);
 	}
-	
 	// select current theme in dropdown list
-	for (var i = 0; i < $("#theme_list")[0].options.length; i++) {
-		if ($("#theme_list")[0].options[i].value == current_theme) {
-			$("#theme_list")[0].selectedIndex = i;
+	for (var i = 0; i < ThemeList.options.length; i++) {
+		if (ThemeList.options[i].value == current_theme) {
+			ThemeList.selectedIndex = i;
 			break;
 		}
 	}
 }
 
-function RemoveRedPreview() {
+function RemovePreview() {
 	if (document.styleSheets[document.styleSheets.length-1].cssRules.length) {
 		document.styleSheets[document.styleSheets.length-1].deleteRule(document.styleSheets[document.styleSheets.length-1].cssRules.length-1);
 	}
+	document.querySelectorAll(".hover_blinking").forEach(function(s){s.classList.remove("hover_blinking");});
+	document.querySelectorAll(".hover_border_blinking").forEach(function(s){s.classList.remove("hover_border_blinking");});
 }
 
 
 // document events
 function SetEvents() {
-// --------------------------------DONATIONS------------------------------------------------------------------------------
+// --------------------------------DONATIONS-----------------------------------------------------------------------------
 	
-	// Donate
-	$(document).on("click", "#options_share_theme_link", function(event) {
-		chrome.tabs.create({url: "https://drive.google.com/drive/folders/0B3jXQpRtOfvSelFrTEVHZEx3Nms?usp=sharing"});
-	});
-	
-	$(document).on("click", "#donate_paypal", function(event) {
+	document.getElementById("donate_paypal").onclick = function(event) {if (event.which == 1) {
 		chrome.tabs.create({url: "https://www.paypal.me/KarolJagiello/1"});
-	});
-	
-	$(document).on("click", "#donate_bitcoin", function(event) {
+	}}
+	document.getElementById("donate_litecoin").onclick = function(event) {if (event.which == 1) {
+		copyStringToClipboard("LdQ1ZH1CgSneBbmmVBFrg5BFDFHZMa6h76");
+		alert(chrome.i18n.getMessage("options_copied_wallet_address"));
+	}}
+	document.getElementById("donate_bitcoin").onclick = function(event) {if (event.which == 1) {
 		copyStringToClipboard("19Z8w1RJEcBQpKSdiWa3UTBuKRJUkr96nJ");
 		alert(chrome.i18n.getMessage("options_copied_wallet_address"));
-	});
-	
-	$(document).on("click", "#donate_ethereum", function(event) {
+	}}
+	document.getElementById("donate_ethereum").onclick = function(event) {if (event.which == 1) {
 		copyStringToClipboard("0x70B05eAD03bF08220d5aF4E1E868C351bfe145D6");
 		alert(chrome.i18n.getMessage("options_copied_wallet_address"));
-	});
-	
+	}}
 	
 // --------------------------------COPY VIVALDI LINK----------------------------------------------------------------------	
 	
-	$(document).on("click", "#copy_vivaldi_url_for_web_panel", function(event) {
-		copyStringToClipboard(chrome.runtime.getURL("sidebar.html"));
-		alert(chrome.i18n.getMessage("options_vivaldi_copied_url"));
-	});
+	document.getElementById("copy_vivaldi_url_for_web_panel").onclick = function(event) {if (event.which == 1) {
+			copyStringToClipboard(chrome.runtime.getURL("sidebar.html"));
+			alert(chrome.i18n.getMessage("options_vivaldi_copied_url"));
+	}}
 
-// --------------------------------ADD RED PREVIEW------------------------------------------------------------------------	
-
-	$(document).on("mouseenter", ".pick_col, #filter_box_font", function(event) {
+// --------------------------------ADD RED AND BLUE PREVIEWS---------------------------------------------------------------
+	// document.body.onmousedown = function(event) {
+		// if (event.which == 1 && (event.target.id || event.target.classList)) {
+			// console.log(event.target);
+		// }
+	// }
+	document.querySelectorAll(".pick_col, #filter_box_font").forEach(function(s){s.onmouseenter = function(event) {
 		document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": red; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-	});
-	$(document).on("mouseenter", ".font_weight_normal", function(event) {
+	}});
+	document.querySelectorAll(".font_weight_normal").forEach(function(s){s.onmouseenter = function(event) {
 		document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": normal; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-	});
-	$(document).on("mouseenter", ".font_weight_bold", function(event) {
+	}});
+	document.querySelectorAll(".font_weight_bold").forEach(function(s){s.onmouseenter = function(event) {
 		document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": bold; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-	});
-	
-	$(document).on("mouseenter", ".font_style_normal", function(event) {
+	}});
+	document.querySelectorAll(".font_style_normal").forEach(function(s){s.onmouseenter = function(event) {
 		document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": normal; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-	});
-	$(document).on("mouseenter", ".font_style_italic", function(event) {
+	}});
+	document.querySelectorAll(".font_style_italic").forEach(function(s){s.onmouseenter = function(event) {
 		document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": italic; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-	});
+	}});
+	document.querySelectorAll(".pick_col, .font_weight_normal, .font_weight_bold, .font_style_normal, .font_style_italic, #filter_box_font").forEach(function(s){s.onmouseleave = function(event) {
+		RemovePreview();
+	}});
 	
-	$(document).on("mouseleave", ".pick_col, .font_weight_normal, .font_weight_bold, .font_style_normal, .font_style_italic, #filter_box_font", function(event) {
-		RemoveRedPreview();
-	});
 
-	$(document).on("mouseenter", "#scrollbar_thumb_hover", function(event) {
-		$("#group_scrollbar_thumb, #pin_list_scrollbar_thumb").addClass("hover_blinking");
-	});
+	document.getElementById("group_list_default_font_color").onmouseenter = function(event) {
+		document.getElementById("_gtetab_list").style.color = "red";
+		document.getElementById("_gtetab_list2").style.color = "red";
 		
-	$(document).on("mouseleave", "#scrollbar_thumb_hover", function(event) {
-		$("#group_scrollbar_thumb, #pin_list_scrollbar_thumb").removeClass("hover_blinking");
-	});
+	}
+	document.getElementById("group_list_default_font_color").onmouseleave = function(event) {
+		document.getElementById("_gtetab_list").style.color = "";
+		document.getElementById("_gtetab_list2").style.color = "";
+	}
 
-	$(document).on("mouseenter", "#group_list_button_hover_background", function(event) {
-		$("#_tab_list2").addClass("hover_blinking");
-	});
 	
-	$(document).on("mouseleave", "#group_list_button_hover_background", function(event) {
-		$("#_tab_list2").removeClass("hover_blinking");
-	});
+	document.getElementById("scrollbar_thumb_hover").onmouseenter = function(event) {
+		RemovePreview();
+		document.getElementById("group_scrollbar_thumb").classList.add("hover_blinking");
+		document.getElementById("pin_list_scrollbar_thumb").classList.add("hover_blinking");
+	}
+	document.getElementById("scrollbar_thumb_hover").onmouseleave = function(event) {
+		RemovePreview();
+	}
 	
-	$(document).on("mouseenter", "#button_hover_background", function(event) {
-		$(".button").addClass("hover_blinking");
-	});
-	$(document).on("mouseleave", "#button_hover_background", function(event) {
-		$(".button").removeClass("hover_blinking");
-	});
 
-	$(document).on("mouseenter", "#button_icons_hover", function(event) {
-		$(".button_img").addClass("hover_blinking");
-	});
-	$(document).on("mouseleave", "#button_icons_hover", function(event) {
-		$(".button_img").removeClass("hover_blinking");
-	});
+	document.getElementById("group_list_button_hover_background").onmouseenter = function(event) {
+		RemovePreview();
+		document.getElementById("_tab_list2").classList.add("hover_blinking");
+	}
+	document.getElementById("group_list_button_hover_background").onmouseleave = function(event) {
+		RemovePreview();
+	}
 
-	$(document).on("mouseenter", "#button_hover_border", function(event) {
-		$(".button").addClass("hover_border_blinking");
-	});
-	$(document).on("mouseleave", "#button_hover_border", function(event) {
-		$(".button").removeClass("hover_border_blinking");
-	});
+	document.getElementById("button_hover_background").onmouseenter = function(event) {
+		RemovePreview();
+		document.querySelectorAll(".button").forEach(function(s){s.classList.add("hover_blinking");});
+	}
+	document.getElementById("button_hover_background").onmouseleave = function(event) {
+		RemovePreview();
+	}
 	
 
 
-	// filter_box_font 
+	document.getElementById("button_icons_hover").onmouseenter = function(event) {
+		RemovePreview();
+		document.querySelectorAll(".button_img").forEach(function(s){s.classList.remove("hover_blinking");});
+	}
+	document.getElementById("button_icons_hover").onmouseleave = function(event) {
+		RemovePreview();
+	}
 
-	$(document).on("mouseenter", "#options_tab_list_scrollbar_width_up, #options_tab_list_scrollbar_width_down", function(event) {
-		$("#group_scrollbar, #group_scrollbar_thumb").css({ "background-color": "red" });
-	});
-	$(document).on("mouseleave", "#options_tab_list_scrollbar_width_up, #options_tab_list_scrollbar_width_down", function(event) {
-		$("#group_scrollbar, #group_scrollbar_thumb").css({ "background-color": "" });
-	});
+	document.getElementById("button_hover_border").onmouseenter = function(event) {
+		RemovePreview();
+		document.querySelectorAll(".button").forEach(function(s){s.classList.add("hover_border_blinking");});
+	}
+	document.getElementById("button_hover_border").onmouseleave = function(event) {
+		RemovePreview();
+	}
 	
-	$(document).on("mouseenter", "#options_tab_list_scrollbar_height_up, #options_tab_list_scrollbar_height_down", function(event) {
-		$("#pin_list_scrollbar, #pin_list_scrollbar_thumb").css({ "background-color": "red" });
-	});
-	$(document).on("mouseleave", "#options_tab_list_scrollbar_height_up, #options_tab_list_scrollbar_height_down", function(event) {
-		$("#pin_list_scrollbar, #pin_list_scrollbar_thumb").css({ "background-color": "" });
-	});
+	document.getElementById("options_tab_list_scrollbar_width_up").onmouseenter = function(event) {
+		document.getElementById("group_scrollbar").style.backgroundColor = "red";
+		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "red";
+	}
+	document.getElementById("options_tab_list_scrollbar_width_down").onmouseenter = function(event) {
+		document.getElementById("group_scrollbar").style.backgroundColor = "red";
+		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "red";
+	}
 	
+	document.getElementById("options_tab_list_scrollbar_width_up").onmouseleave = function(event) {
+		document.getElementById("group_scrollbar").style.backgroundColor = "";
+		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "";
+	}
+	document.getElementById("options_tab_list_scrollbar_width_down").onmouseleave = function(event) {
+		document.getElementById("group_scrollbar").style.backgroundColor = "";
+		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "";
+	}
+	
+
+	
+	document.getElementById("options_tab_list_scrollbar_height_up").onmouseenter = function(event) {
+		document.getElementById("pin_list_scrollbar").style.backgroundColor = "red";
+		document.getElementById("pin_list_scrollbar_thumb").style.backgroundColor = "red";
+	}
+	document.getElementById("options_tab_list_scrollbar_height_down").onmouseenter = function(event) {
+		document.getElementById("pin_list_scrollbar").style.backgroundColor = "red";
+		document.getElementById("pin_list_scrollbar_thumb").style.backgroundColor = "red";
+	}
+	
+	document.getElementById("options_tab_list_scrollbar_height_up").onmouseleave = function(event) {
+		document.getElementById("pin_list_scrollbar").style.backgroundColor = "";
+		document.getElementById("pin_list_scrollbar_thumb").style.backgroundColor = "";
+	}
+	document.getElementById("options_tab_list_scrollbar_height_down").onmouseleave = function(event) {
+		document.getElementById("pin_list_scrollbar").style.backgroundColor = "";
+		document.getElementById("pin_list_scrollbar_thumb").style.backgroundColor = "";
+	}
 
 
 // --------------------------------------COLOR PICKER---------------------------------------------------------------------	
 	
-	// change fonts weight
-	$(document).on("mousedown", ".font_weight_normal, .font_weight_bold", function(event) {
+	// change fonts weight && style
+	document.querySelectorAll(".font_weight_normal, .font_weight_bold, .font_style_normal, .font_style_italic").forEach(function(s){s.onmousedown = function(event) {
 		event.stopPropagation();
-		SelectedTheme["ColorsSet"][this.id] = $(this).is(".font_weight_normal") ? "normal" : "bold";
+		// if this.classList.contains("font_weight_normal") || this.classList.contains("font_style_normal")
+		let FontStyle = "normal";
+		if (this.classList.contains("font_weight_bold")) {
+			FontStyle = "bold";
+		}
+		if (this.classList.contains("font_style_italic")) {
+			FontStyle = "italic";
+		}
+		SelectedTheme["ColorsSet"][this.id] = FontStyle;
 		ApplyColorsSet(SelectedTheme["ColorsSet"]);
-		SaveTheme($("#theme_list").val());
-	});
-	
-	// change fonts style
-	$(document).on("mousedown", ".font_style_normal, .font_style_italic", function(event) {
-		event.stopPropagation();
-		SelectedTheme["ColorsSet"][this.id] = $(this).is(".font_style_normal") ? "normal" : "italic";
-		ApplyColorsSet(SelectedTheme["ColorsSet"]);
-		SaveTheme($("#theme_list").val());
-	});
-	
+		SaveTheme(document.getElementById("theme_list").value);
+	}});
 
 	// show color picker
-	$(document).on("click", ".pick_col", function(event) {
-		RemoveRedPreview();
+	document.querySelectorAll(".pick_col").forEach(function(s){s.onclick = function(event) {if (event.which == 1) {
+		RemovePreview();
 		event.stopPropagation();
-		PickColor = this.id;
 		let bod = document.getElementById("body");
 		let color = window.getComputedStyle(bod, null).getPropertyValue("--"+this.id);
-		$("#color_picker")[0].value = color.replace(" ", "");
-		$("#color_picker").click();
-	});
-	$(document).on("input", "#color_picker", function(event) {
-		event.stopPropagation();
-		SelectedTheme["ColorsSet"][PickColor] = $("#color_picker")[0].value;
+		let ColorPicker = document.getElementById("color_picker");
+		ColorPicker.setAttribute("PickColor", this.id);
+		ColorPicker.value = color.replace(" ", "");
+		ColorPicker.click();
+	}}});
+
+	document.getElementById("color_picker").oninput = function(event) {
+		let ColorPicker = document.getElementById("color_picker");
+		SelectedTheme["ColorsSet"][this.getAttribute("PickColor")] = ColorPicker.value;
 		ApplyColorsSet(SelectedTheme["ColorsSet"]);
-		SaveTheme($("#theme_list").val());
-	});	
+		// SaveTheme(document.getElementById("theme_list").value);
+	}
+	document.getElementById("color_picker").onchange = function(event) {
+		SaveTheme(document.getElementById("theme_list").value);
+	}
 
 
 // ----------------------------------EVENTS FOR CHECKBOXES AND DROPDOWN MENUS---------------------------------------------	
+
 	// set checkbox options on/off and save
-	$(document).on("click", ".bg_opt", function(event) {
-		opt[this.id] = $(this)[0].checked ? true : false;
+	document.querySelectorAll(".bg_opt").forEach(function(s){s.onclick = function(event) {if (event.which == 1) {
+		opt[this.id] = this.checked ? true : false;
+		if (this.checked) {
+			if (this.id == "never_show_close") {
+				document.getElementById("always_show_close").disabled = true;
+			}
+			if (this.id == "promote_children") {
+				document.getElementById("promote_children_in_first_child").disabled = false;
+			}
+		} else {
+			if (this.id == "never_show_close") {
+				document.getElementById("always_show_close").disabled = false;
+			}
+			if (this.id == "promote_children") {
+				document.getElementById("promote_children_in_first_child").disabled = true;
+			}
+		}
 		SavePreferences();
-	});
+	}}});
+
 
 	// options that need reload
-	$(document).on("click", "#syncro_tabbar_tabs_order, #allow_pin_close, #switch_with_scroll, #always_show_close, #never_show_close, #close_other_trees, #show_counter_tabs, #show_counter_tabs_hints, #syncro_tabbar_tabs_order, #syncro_tabbar_groups_tabs_order", function(event) {
-		chrome.runtime.sendMessage({command: "reload_sidebar"});
-	});
-	
-	// options that need a total reload
-	$(document).on("click", "#groups_toolbar_default", function(event) {
-		chrome.runtime.sendMessage({command: "reload"});
-		chrome.runtime.sendMessage({command: "reload_sidebar"});
-		location.reload();
-	});
+	document.onclick = function(event) {if (event.which == 1) {
+		if (event.target.id == "show_toolbar" || event.target.id == "syncro_tabbar_tabs_order" || event.target.id == "allow_pin_close" || event.target.id == "switch_with_scroll" || event.target.id == "always_show_close" || event.target.id == "never_show_close" || 
+			event.target.id == "collapse_other_trees" || event.target.id == "show_counter_tabs" || event.target.id == "show_counter_tabs_hints" || event.target.id == "syncro_tabbar_tabs_order" || event.target.id == "syncro_tabbar_groups_tabs_order" || event.target.id == "groups_toolbar_default") {
+			chrome.runtime.sendMessage({command: "reload_sidebar"});
+		}
+		if (event.target.id == "groups_toolbar_default") {
+			chrome.runtime.sendMessage({command: "reload"});
+			setTimeout(function() {
+				location.reload();
+			}, 300);
+		}
+	}}
 
 	// set dropdown menu options
-	$("#append_child_tab, #append_child_tab_after_limit, #after_closing_active_tab, #append_orphan_tab").change(function() {
-		opt[this.id] = $(this).val();
-		SavePreferences();
-	});
-
+	for (let i = 0; i < DropDownList.length; i++) {
+		document.getElementById(DropDownList[i]).onchange = function(event) {
+console.log(opt[this.id]);
+console.log(this.value);
+			opt[this.id] = this.value;
+			SavePreferences();
+			chrome.runtime.sendMessage({command: "reload_sidebar"});
+		}
+	}
 
 	// set tabs tree depth option
-	$(document).on("input", "#max_tree_depth", function(event) {
-		opt.max_tree_depth = $(this)[0].value;
+	document.getElementById("max_tree_depth").oninput = function(event) {
+		opt.max_tree_depth = parseInt(this.value);
 		SavePreferences();
-	});
-
+		chrome.runtime.sendMessage({command: "reload_sidebar"});
+	}
 	
 	// set toolbar on/off and show/hide all toolbar options
-	$(document).on("click", "#show_toolbar", function(event) {
-		SelectedTheme.ToolbarShow = $("#show_toolbar")[0].checked ? true : false;
-		SaveTheme($("#theme_list").val());
-		LoadTheme($("#theme_list").val());
-	});
+	document.getElementById("show_toolbar").onclick = function(event) {if (event.which == 1) {
+		SelectedTheme.ToolbarShow = this.checked ? true : false;
+		RefreshFields();
+		SaveTheme(document.getElementById("theme_list").value);
+	}}
 
 	
 // ------------------------------OTHER------------------------------------------------------------------------------------	
 
 	// block system dragging
-	$(document).bind("drop dragover", function(event) {
+	document.ondrop = function(event) {
 		event.preventDefault();
-	});
+	}
+	document.ondragover = function(event) {
+		event.preventDefault();
+	}
 
-// ----------------------------TOOLBAR CUSTOMIZATION----------------------------------------------------------------------	
+// ----------------------------RESET TOOLBAR BUTTON-----------------------------------------------------------------------	
 	
-
-	$(document).on("mousedown", ".button", function(event) {
-		$("#button_filter_clear").css({"opacity": "1", "position": "absolute"});
-		if ($(this).is("#button_filter_type, #filter_search_go_prev, #filter_search_go_next")) {
-			return;
-		}
-		$(this).attr("draggable", "true");
-		dragged_button = this;
-	});
-	
-	// set dragged button node
-	$(document).on("dragstart", ".button", function(event) {
-		event.originalEvent.dataTransfer.setData(" "," ");
-		event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
-	});
-	
-	// remove draggable attribute to clean html which will be saved in the toolbar
-	$(document).on("mouseleave", ".button", function(event) {
-		$(".button").removeAttr("draggable");
-	});
-	
-	
-	
-	// drag&drop buttons to lists
-	$(document).on("dragenter", "#toolbar_main, .toolbar_shelf, #toolbar_unused_buttons", function(event) {
-		if ($(dragged_button).is("#button_tools, #button_search, #button_groups, #button_backup, #button_folders") && $(this).is(".toolbar_shelf")) {
-			return;
-		}
-		if (dragged_button.parentNode.id != this.id) {
-			// if ($(dragged_button).is("#button_tools, #button_search, #button_groups, #button_backup, #button_folders") && $(this).is("#toolbar_unused_buttons")) {
-				// $(".on").removeClass("on");
-			// }
-			$("#"+dragged_button.id).appendTo($(this));
-		}
-	});
-
-	// move (flip) buttons
-	$(document).on("dragenter", ".button", function(event) {
-		if ($(dragged_button).is("#button_tools, #button_search, #button_groups, #button_backup, #button_folders") && $(this).parent().is(".toolbar_shelf")) {
-			return;
-		}
-		if ($(this).parent().is("#toolbar_search, #toolbar_search_buttons")) {
-			return;
-		}
-		if ( $(this).index() <= $("#"+dragged_button.id).index()) {
-			$("#"+dragged_button.id).insertBefore($(this));
-		} else {
-			$("#"+dragged_button.id).insertAfter($(this));
-		}
-	});
-
-	// save toolbar
-	$(document).on("dragend", ".button", function(event) {
-		$("#button_filter_clear").css({"opacity": "0"});
-
-		SelectedTheme.toolbar = $("#toolbar").html();
-		SelectedTheme.unused_buttons = $("#toolbar_unused_buttons").html();
-		SaveTheme($("#theme_list").val());
-		$("#button_filter_clear").css({"opacity": "1"});
-	});
-	
-	// reset toolbar
-	$(document).on("click", "#options_reset_toolbar_button", function(event) {
+	document.getElementById("options_reset_toolbar_button").onclick = function(event) {if (event.which == 1) {
+		SetToolbarEvents(true, false, false, "");
+		RemoveToolbarEditEvents();
 		SelectedTheme["toolbar"] = DefaultToolbar;
 		SelectedTheme["unused_buttons"] = "";
-		$("#toolbar").html(DefaultToolbar);
-		$("#toolbar_unused_buttons").html("");
-		SaveTheme($("#theme_list").val());
-		$(".on").removeClass("on");
+		document.getElementById("toolbar").innerHTML = DefaultToolbar;
+		document.getElementById("toolbar_unused_buttons").innerHTML = "";
+		SaveTheme(document.getElementById("theme_list").value);
+		document.querySelectorAll(".on").forEach(function(s){s.classList.remove("on");});
 		RefreshGUI();
-	});
+		SetToolbarEvents(false, false, true, "click");
+		AddEditToolbarEditEvents();
+	}}
 
 
 // --------------------------------------THEME BUTTONS--------------------------------------------------------------------	
 
 
 	// add new theme preset button
-	$(document).on("click", "#options_add_theme_button", function(event) {
+	document.getElementById("options_add_theme_button").onclick = function(event) {if (event.which == 1) {
 		AddNewTheme();
-	});
+	}}
 
 	// remove theme preset button
-	$(document).on("click", "#options_remove_theme_button", function(event) {
+	document.getElementById("options_remove_theme_button").onclick = function(event) {if (event.which == 1) {
 		DeleteSelectedTheme();
-	});
+	}}
 	
 	// select theme from list
-	$("#theme_list").change(function() {
-		LoadTheme($(this).val());
-		chrome.storage.local.set({current_theme: $(this).val()});
-	});
+	document.getElementById("theme_list").onchange = function(event) {
+		LoadTheme(this.value, true);
+		chrome.storage.local.set({current_theme: this.value});
+	}
 
 	// import theme preset button
-	$(document).on("click", "#options_import_theme_button", function(event) {
-		ShowOpenFileDialog("import_theme", ".tt_theme");
-	});
-	$(document).on("change", "#import_theme", function(event) {
-		ImportTheme();
-	});
+	document.getElementById("options_import_theme_button").onclick = function(event) {if (event.which == 1) {
+		let inputFile = ShowOpenFileDialog("import_theme", ".tt_theme");
+		inputFile.onchange = function(event) {
+			ImportTheme();
+		}						
+	}}
 
 	// export theme preset button
-	$(document).on("click", "#options_export_theme_button", function(event) {
-		if ($("#theme_list")[0].options.length == 0) {
+	document.getElementById("options_export_theme_button").onclick = function(event) {if (event.which == 1) {
+		if (document.getElementById("theme_list").options.length == 0) {
 			alert(chrome.i18n.getMessage("options_no_theme_to_export"));
 		} else {
-			SaveFile($("#theme_list").val() + ".tt_theme", SelectedTheme);
+			SaveFile(document.getElementById("theme_list").value + ".tt_theme", SelectedTheme);
 		}
-	});
+	}}
 
 	// rename theme preset button
-	$(document).on("click", "#options_rename_theme_button", function(event) {
+	document.getElementById("options_rename_theme_button").onclick = function(event) {if (event.which == 1) {
 		RenameSelectedTheme();
-	});
+	}}
+	// get themes
+	document.getElementById("options_share_theme_link").onclick = function(event) {if (event.which == 1) {
+		chrome.tabs.create({url: "https://drive.google.com/drive/folders/0B3jXQpRtOfvSelFrTEVHZEx3Nms?usp=sharing"});
+	}}
 
 
 // -------------------------------INDENTATION ADJUSTMENT------------------------------------------------------------------	
 
 	// change tabs size preset(down)
-	$(document).on("click", "#options_tabs_indentation_down", function(event) {
+	document.getElementById("options_tabs_indentation_down").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var indentation = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--children_padding_left")).replace("p","").replace("x",""));
 		if (indentation > 0) {
 			indentation--;
 			SelectedTheme["ColorsSet"]["children_padding_left"] = indentation+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 	// change tabs size preset(up)
-	$(document).on("click", "#options_tabs_indentation_up", function(event) {
+	document.getElementById("options_tabs_indentation_up").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var indentation = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--children_padding_left")).replace("p","").replace("x",""));
 		if (indentation < 50) {
 			indentation++;
 			SelectedTheme["ColorsSet"]["children_padding_left"] = indentation+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 	
 	
 // --------------------------TABS ROUNDNESS ADJUSTMENT--------------------------------------------------------------------	
 
 	// change tabs roundness preset(down)
-	$(document).on("click", "#options_tabs_roundness_down", function(event) {
+	document.getElementById("options_tabs_roundness_down").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--tab_header_border_radius").replace("p","").replace("x","")));
 		if (border_radius > 0) {
 			border_radius--;
 			SelectedTheme["ColorsSet"]["tab_header_border_radius"] = border_radius+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 	// change tabs roundness preset(up)
-	$(document).on("click", "#options_tabs_roundness_up", function(event) {
+	document.getElementById("options_tabs_roundness_up").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--tab_header_border_radius")).replace("p","").replace("x",""));
 		if (border_radius < 25) {
 			border_radius++;
 			SelectedTheme["ColorsSet"]["tab_header_border_radius"] = border_radius+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 // -------------------------------SIZE ADJUSTMENT-------------------------------------------------------------------------	
 
+	// set tabs margins
+	document.getElementById("tabs_margin_spacing").onchange = function(event) {
+		let size = "0";
+		if (this[1].checked) {
+			size = "1";
+		} else {
+			if (this[2].checked) {
+				size = "2";
+			}
+		}
+		SelectedTheme["TabsMargins"] = size;
+		ApplyTabsMargins(size);
+		SaveTheme(document.getElementById("theme_list").value);
+	}
+
+
 	// change tabs size preset(down)
-	$(document).on("click", "#options_tabs_size_down", function(event) {
+	document.getElementById("options_tabs_size_down").onmousedown = function(event) {
 		if (SelectedTheme["TabsSizeSetNumber"] > 0) {
 			SelectedTheme["TabsSizeSetNumber"]--;
 			ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
-			ApplySizeOptionsSet(SelectedTheme["TabsSizeSetNumber"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 	// change tabs size preset(up)
-	$(document).on("click", "#options_tabs_size_up", function(event) {
+	document.getElementById("options_tabs_size_up").onmousedown = function(event) {
 		if (SelectedTheme["TabsSizeSetNumber"] < 4) {
 			SelectedTheme["TabsSizeSetNumber"]++;
 			ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
-			ApplySizeOptionsSet(SelectedTheme["TabsSizeSetNumber"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 
 // -------------------------------TABS SCROLLBAR SIZE ADJUSTMENT----------------------------------------------------------	
 
 	// change tab list scrollbar preset(down)
-	$(document).on("mousedown", "#options_tab_list_scrollbar_width_down", function(event) {
+	document.getElementById("options_tab_list_scrollbar_width_down").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_width").replace("p","").replace("x","")));
 		if (border_radius > 0) {
 			border_radius--;
 			SelectedTheme["ColorsSet"]["scrollbar_width"] = border_radius+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 	// change tab list scrollbar preset(up)
-	$(document).on("mousedown", "#options_tab_list_scrollbar_width_up", function(event) {
+	document.getElementById("options_tab_list_scrollbar_width_up").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_width")).replace("p","").replace("x",""));
 		if (border_radius < 20) {
 			border_radius++;
 			SelectedTheme["ColorsSet"]["scrollbar_width"] = border_radius+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 	// change pin list scrollbar preset(down)
-	$(document).on("mousedown", "#options_tab_list_scrollbar_height_down", function(event) {
+	document.getElementById("options_tab_list_scrollbar_height_down").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_height").replace("p","").replace("x","")));
 		if (border_radius > 0) {
 			border_radius--;
 			SelectedTheme["ColorsSet"]["scrollbar_height"] = border_radius+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 	// change pin list scrollbar preset(up)
-	$(document).on("mousedown", "#options_tab_list_scrollbar_height_up", function(event) {
+	document.getElementById("options_tab_list_scrollbar_height_up").onmousedown = function(event) {
 		let bod = document.getElementById("body");
 		var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_height")).replace("p","").replace("x",""));
 		if (border_radius < 20) {
 			border_radius++;
 			SelectedTheme["ColorsSet"]["scrollbar_height"] = border_radius+"px";
 			ApplyColorsSet(SelectedTheme["ColorsSet"]);
-			SaveTheme($("#theme_list").val());
+			SaveTheme(document.getElementById("theme_list").value);
 		}
-	});
+	}
 
 
 
 // ----------------------CLEAR DATA BUTTON--------------------------------------------------------------------------------	
 
 	// clear data
-	$(document).on("click", "#options_clear_data", function(event) {
+	document.getElementById("options_clear_data").onclick = function(event) {if (event.which == 1) {
 		chrome.storage.local.clear();
 		chrome.runtime.sendMessage({command: "reload"});
 		chrome.runtime.sendMessage({command: "reload_sidebar"});
-		location.reload();
+		setTimeout(function() {
+			location.reload();
+		}, 300);
+	}}
+}
+
+function RemoveToolbarEditEvents() {
+	document.querySelectorAll("#button_filter_clear").forEach(function(s){
+		s.style.opacity = "0";
+	});
+	document.querySelectorAll(".button").forEach(function(s){
+		s.removeAttribute("draggable");
 	});
 }
 
+function AddEditToolbarEditEvents() {
+	document.querySelectorAll("#button_filter_clear").forEach(function(s){
+		s.style.opacity = "1";
+	});
+	document.querySelectorAll(".button_img").forEach(function(s){
+		if (s.parentNode.id != "button_filter_type" || s.parentNode.id != "filter_search_go_prev" || s.parentNode.id != "filter_search_go_next") {
+			s.setAttribute("draggable", true);
+			s.onmousedown = function(event) {
+				if (event.which == 1) {
+					dragged_button = document.getElementById(this.parentNode.id);
+				}
+			}
+			s.ondragstart = function(event) {
+				event.dataTransfer.setData(" "," ");
+				event.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+			}
+			// move (flip) buttons
+			s.ondragenter = function(event) {
+				if ((dragged_button.id == "button_tools" || dragged_button.id == "button_search" || dragged_button.id == "button_groups" || dragged_button.id == "button_backup" || dragged_button.id == "button_folders") && this.parentNode.parentNode.classList.contains("toolbar_shelf")) {
+					return;
+				}
+				let dragged_buttonIndex = Array.from(dragged_button.parentNode.children).indexOf(dragged_button);
+				let Index = Array.from(this.parentNode.parentNode.children).indexOf(this.parentNode);
+				
+				if (Index <= dragged_buttonIndex) {
+					this.parentNode.parentNode.insertBefore(dragged_button, this.parentNode);
+				} else {
+					if (this.parentNode.nextSibling != null) {
+						this.parentNode.parentNode.insertBefore(dragged_button, this.parentNode.nextSibling);
+					} else {
+						this.parentNode.parentNode.appendChild(dragged_button);
+					}				
+				}
+			}
+			// save toolbar
+			s.ondragend = function(event) {
+				RemoveToolbarEditEvents();
+
+				SelectedTheme.toolbar = document.getElementById("toolbar").innerHTML;
+				SelectedTheme.unused_buttons = document.getElementById("toolbar_unused_buttons").innerHTML;
+				SaveTheme(document.getElementById("theme_list").value);
+				
+				AddEditToolbarEditEvents();
+			}
+		}
+	});
+	
+	
+	document.querySelectorAll("#toolbar_main, .toolbar_shelf:not(#toolbar_search), #toolbar_unused_buttons").forEach(function(s){s.ondragenter = function(event) {
+		if ((dragged_button.id == "button_tools" || dragged_button.id == "button_search" || dragged_button.id == "button_groups" || dragged_button.id == "button_backup" || dragged_button.id == "button_folders") && this.classList.contains("toolbar_shelf")) {
+			return;
+		}
+		if (dragged_button.parentNode.id != this.id) {
+			this.appendChild(dragged_button);
+		}
+
+	}});
+}
 
 function copyStringToClipboard(string) {
 	function handler (event){

options/options_color_border_hover - Copy.svg

@@ -1,64 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg2985"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   width="32"
-   height="32"
-   sodipodi:docname="options_color_border_hover.svg">
-  <metadata
-     id="metadata2991">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs2989" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1028"
-     id="namedview2987"
-     showgrid="false"
-     inkscape:zoom="11.313708"
-     inkscape:cx="9.1746459"
-     inkscape:cy="11.986143"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2985" />
-  <path
-     style="fill:#e5f3fb;fill-opacity:1;stroke:#70c0e7;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 31.028589,15.999999 c 0,8.280961 -6.728528,14.994006 -15.028591,14.994006 -8.3000599,0 -15.02858523,-6.713045 -15.02858523,-14.994006 0,-8.2809587 6.72852533,-14.9940026 15.02858523,-14.9940026 8.300063,0 15.028591,6.7130439 15.028591,14.9940026 z"
-     id="path3769"
-     inkscape:connector-curvature="0" />
-  <rect
-     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#0064c6;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     id="rect4139"
-     width="15"
-     height="15"
-     x="8.5"
-     y="8.5" />
-</svg>

options/options_tabs_margin_indicator.svg

@@ -0,0 +1,129 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2985"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="80"
+   height="30"
+   sodipodi:docname="options_tabs_margin_indicator.svg">
+  <metadata
+     id="metadata2991">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs2989">
+    <marker
+       inkscape:stockid="Arrow2Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lend"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4173"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+    <marker
+       inkscape:stockid="Arrow2Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lstart"
+       style="overflow:visible"
+       inkscape:isstock="true">
+      <path
+         id="path4170"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
+         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+         transform="matrix(1.1,0,0,1.1,1.1,0)"
+         inkscape:connector-curvature="0" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1028"
+     id="namedview2987"
+     showgrid="false"
+     inkscape:zoom="7.9999996"
+     inkscape:cx="60.779833"
+     inkscape:cy="2.0761301"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2985"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-smooth-nodes="true" />
+  <rect
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#f1f1f1;fill-opacity:1;fill-rule:evenodd;stroke:#878787;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="rect4144"
+     width="79"
+     height="29"
+     x="0.5"
+     y="0.50000006" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#878787;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 54.5,9.4817861 0,5.0182139 23,0 0,-5 z"
+     id="path4262"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#878787;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 54.5,7.5 0,-5 23,0 0,5 z"
+     id="path4260"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#878787;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 2.5,2.5 0,10 23,0 0,-10 z"
+     id="path4258"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     style="fill:none;fill-rule:evenodd;stroke:#878787;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 2.5,7.5 23,0"
+     id="path4164-8-8-6-5-7"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cc" />
+  <path
+     id="path4260-2"
+     style="fill:none;fill-rule:evenodd;stroke:#878787;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="m 28.5,7.5 0,-5 23,0 0,5 z m 0,1 0,5 23,0 0,-5 z"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccccc" />
+</svg>

options/refresh.js

@@ -4,28 +4,46 @@
 
 // shrink or expand theme field
 function RefreshFields() {
-	if ($("#theme_list")[0].options.length == 0) {
-		$("#field_theme").css({"height": "45px"});
+	if (document.getElementById("theme_list").options.length == 0) {
+		document.getElementById("field_theme").style.height = "45px";
 	} else {
-		$("#field_theme").css({"height": ""});
+		document.getElementById("field_theme").style.height = "";
 	}
 	if (browserId == "F") {
-		$("#scrollbar_size_indicator, #scrollbar_thumb, #scrollbar_thumb_hover, #scrollbar_track").hide();
+		document.querySelectorAll("#scrollbar_size_indicator, #scrollbar_thumb, #scrollbar_thumb_hover, #scrollbar_track").forEach(function(s){
+			s.style.display = "none";
+		});
 	}
 	if (browserId == "V") {
-		$("#url_for_web_panel").val(chrome.runtime.getURL("sidebar.html"));
-		$("#url_for_web_panel").prop("readonly", true);
+		let WebPanelUrlBox = document.getElementById("url_for_web_panel");
+		WebPanelUrlBox.value = (chrome.runtime.getURL("sidebar.html"));
+		WebPanelUrlBox.setAttribute("readonly", true);
 	} else{
-		$("#field_vivaldi").hide();
+		document.getElementById("field_vivaldi").style.display = "none";
+	}
+	if (document.getElementById("show_toolbar").checked) {
+		document.querySelectorAll("#options_available_buttons, #sample_toolbar_block, #options_reset_toolbar_button").forEach(function(s){
+			s.style.display = "";
+		});
+		document.getElementById("field_show_toolbar").style.height = "";
+	} else{
+		document.querySelectorAll("#options_available_buttons, #sample_toolbar_block, #options_reset_toolbar_button").forEach(function(s){
+			s.style.display = "none";
+		});
+		document.getElementById("field_show_toolbar").style.height = "6";
 	}
 }
 
 function RefreshGUI() {
-	$("#button_filter_type").addClass("url").removeClass("title");
-	if ($(".button").is(".on")) {
-		$("#toolbar").css({ "height": 53 });
+	let button_filter_type = document.getElementById("button_filter_type");
+	if (button_filter_type != null) {
+		button_filter_type.classList.add("url");
+		button_filter_type.classList.remove("title");
+	}
+	if (document.querySelector(".on") != null) {
+		document.getElementById("toolbar").style.height = "53px";
 	} else {
-		$("#toolbar").css({ "height": 26 });
+		document.getElementById("toolbar").style.height = "26px";
 	}
 }
 

options/sample_tabs.js

@@ -4,122 +4,123 @@
 
 function AppendSampleTabs() {
 	// pins
-	AppendTab({tab: {id: 0, pinned: true}, Append: true});
-	AppendTab({tab: {id: 1, pinned: true, active: false}, Append: true});
-	
-	AppendTab({tab: {id: 10, pinned: true, active: false}, Append: true});
-	$(".pin#10").addClass("attention");
+	AppendTab({id: 0, pinned: true}, false, false, false, true, false, false, false, true, false, false);
+	AppendTab({id: 1, pinned: true, active: false}, false, false, false, true, false, false, false, true, false, false);
 	
+	AppendTab({id: 10, pinned: true, active: false}, false, false, false, true, false, false, false, true, false, false);
+	document.getElementById("10").classList.add("attention");
 
 	// regular tabs
-	AppendTab({tab: {id: 2, pinned: false}, Append: true});
-	$("#tab_title2")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal");
+	AppendTab({id: 2, pinned: false}, false, false, false, true, false, false, false, true, false, true);
+	document.getElementById("tab_title2").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal");
 	
-	AppendTab({tab: {id: 11, pinned: false}, Append: true, ParentId: "2"});
-	$("#tab_title11")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_hover");
-	$("#tab_header11").addClass("tab_header_hover").addClass("close_show");
+	AppendTab({id: 11, pinned: false}, "2", false, false, true, false, false, false, false, false, false);
+	document.getElementById("tab_title11").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_hover");
+	document.getElementById("tab_header11").classList.add("tab_header_hover");
+	document.getElementById("tab_header11").classList.add("close_show");
 
-	AppendTab({tab: {id: 12, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "selected_tab"});
-	$("#tab_title12")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_selected");
+	AppendTab({id: 12, pinned: false}, "2", false, false, true, false, false, "selected_tab", false, false, false);
+	document.getElementById("tab_title12").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_selected");
 	
-	AppendTab({tab: {id: 13, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "selected_tab"});
-	$("#tab_title13")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_selected_hover");
-	$("#tab_header13").addClass("tab_header_hover").addClass("close_show");
-	$("#close13").addClass("close_hover");
+	AppendTab({id: 13, pinned: false}, "2", false, false, true, false, false, "selected_tab", false, false, false);
+	document.getElementById("tab_title13").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_selected_hover");
+	document.getElementById("tab_header13").classList.add("tab_header_hover")
+	document.getElementById("tab_header13").classList.add("close_show");
+	document.getElementById("close13").classList.add("close_hover");
 
 	// regular active tabs
-	AppendTab({tab: {id: 3, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "active_tab"});
-	$("#tab_title3")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active");
+	AppendTab({id: 3, pinned: false}, "2", false, false, true, false, false, "active_tab", false, false, false);
+	document.getElementById("tab_title3").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active");
 	
-	AppendTab({tab: {id: 15, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "active_tab"});
-	$("#tab_title15")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_hover");
-	$("#tab_header15").addClass("tab_header_hover");
+	AppendTab({id: 15, pinned: false}, "2", false, false, true, false, false, "active_tab", false, false, false);
+	document.getElementById("tab_title15").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_hover");
+	document.getElementById("tab_header15").classList.add("tab_header_hover");
 	
-	AppendTab({tab: {id: 14, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "c selected_tab active_tab"});
-	$("#tab_title14")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected");
+	AppendTab({id: 14, pinned: false}, "2", false, false, true, false, false, "c selected_tab active_tab", false, false, false);
+	document.getElementById("tab_title14").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected");
 	
-	AppendTab({tab: {id: 16, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "c selected_tab active_tab"});
-	$("#tab_title16")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected_hover");
-	$("#tab_header16").addClass("tab_header_hover");
-	$("#exp16").addClass("hover");
+	AppendTab({id: 16, pinned: false}, "2", false, false, true, false, false, "c selected_tab active_tab", false, false, false);
+	document.getElementById("tab_title16").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected_hover");
+	document.getElementById("tab_header16").classList.add("tab_header_hover");
+	document.getElementById("exp16").classList.add("hover");
 
 	// discarded tabs
-	AppendTab({tab: {id: 5, pinned: false, discarded: true}, Append: true});
-	$("#tab_title5")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded");
+	AppendTab({id: 5, pinned: false, discarded: true}, false, false, false, true, false, false, false, false, false, false);
+	document.getElementById("tab_title5").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded");
 	
-	AppendTab({tab: {id: 17, pinned: false, discarded: true}, Append: true, ParentId: "5"});
-	$("#tab_title17")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_hover");
-	$("#tab_header17").addClass("tab_header_hover");
+	AppendTab({id: 17, pinned: false, discarded: true}, "5", false, false, true, false, false, false, false, false, false);
+	document.getElementById("tab_title17").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_hover");
+	document.getElementById("tab_header17").classList.add("tab_header_hover");
 
-	AppendTab({tab: {id: 19, pinned: false, discarded: true}, Append: true, ParentId: "5", AdditionalClass: "selected_tab"});
-	$("#tab_title19")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected");
+	AppendTab({id: 19, pinned: false, discarded: true}, "5", false, false, true, false, false, "selected_tab", false, false, false);
+	document.getElementById("tab_title19").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected");
 	
-	AppendTab({tab: {id: 20, pinned: false, discarded: true}, Append: true, ParentId: "5", AdditionalClass: "selected_tab"});
-	$("#tab_title20")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected_hover");
-	$("#tab_header20").addClass("tab_header_hover");
+	AppendTab({id: 20, pinned: false, discarded: true}, "5", false, false, true, false, false, "selected_tab", false, false, false);
+	document.getElementById("tab_title20").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected_hover");
+	document.getElementById("tab_header20").classList.add("tab_header_hover");
 
 	// search result
-	AppendTab({tab: {id: 6, pinned: false}, Append: true, AdditionalClass: "filtered"});
-	$("#tab_title6")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result");
+	AppendTab({id: 6, pinned: false}, false, false, false, true, false, false, "filtered", false, false, false);
+	document.getElementById("tab_title6").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result");
 	
-	AppendTab({tab: {id: 21, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "filtered"});
-	$("#tab_title21")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_hover");
-	$("#tab_header21").addClass("tab_header_hover");
+	AppendTab({id: 21, pinned: false}, "6", false, false, true, false, false, "filtered", false, false, false);
+	document.getElementById("tab_title21").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_hover");
+	document.getElementById("tab_header21").classList.add("tab_header_hover");
 
-	AppendTab({tab: {id: 22, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "filtered active_tab"});
-	$("#tab_title22")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_active");
+	AppendTab({id: 22, pinned: false}, "6", false, false, true, false, false, "filtered active_tab", false, false, false);
+	document.getElementById("tab_title22").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_active");
 	
-	AppendTab({tab: {id: 23, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "filtered active_tab"});
-	$("#tab_title23")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_active_hover");
-	$("#tab_header23").addClass("tab_header_hover");
+	AppendTab({id: 23, pinned: false}, "6", false, false, true, false, false, "filtered active_tab", false, false, false);
+	document.getElementById("tab_title23").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_active_hover");
+	document.getElementById("tab_header23").classList.add("tab_header_hover");
 
 
 	// search result selected
-	AppendTab({tab: {id: 8, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected_tab filtered"});
-	$("#tab_title8")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected");
+	AppendTab({id: 8, pinned: false}, "6", false, false, true, false, false, "selected_tab filtered", false, false, false);
+	document.getElementById("tab_title8").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected");
 
-	AppendTab({tab: {id: 18, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected_tab filtered"});
-	$("#tab_title18")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_hover");
-	$("#tab_header18").addClass("tab_header_hover");
+	AppendTab({id: 18, pinned: false}, "6", false, false, true, false, false, "selected_tab filtered", false, false, false);
+	document.getElementById("tab_title18").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_hover");
+	document.getElementById("tab_header18").classList.add("tab_header_hover");
 
-	AppendTab({tab: {id: 25, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected_tab filtered active_tab"});
-	$("#tab_title25")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active");
+	AppendTab({id: 25, pinned: false}, "6", false, false, true, false, false, "selected_tab filtered active_tab", false, false, false);
+	document.getElementById("tab_title25").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active");
 
 
-	AppendTab({tab: {id: 26, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected_tab filtered active_tab"});
-	$("#tab_title26")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active_hover");
-	$("#tab_header26").addClass("tab_header_hover");
+	AppendTab({id: 26, pinned: false}, "6", false, false, true, false, false, "selected_tab filtered active_tab", false, false, false);
+	document.getElementById("tab_title26").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active_hover");
+	document.getElementById("tab_header26").classList.add("tab_header_hover");
 
 	// search result highlighted
-	AppendTab({tab: {id: 30, pinned: false}, Append: true, AdditionalClass: "filtered highlighted_search"});
-	$("#tab_title30")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted");
+	AppendTab({id: 30, pinned: false}, false, false, false, true, false, false, "filtered highlighted_search", false, false, false);
+	document.getElementById("tab_title30").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted");
 	
-	AppendTab({tab: {id: 31, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "filtered highlighted_search"});
-	$("#tab_title31")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_hover");
-	$("#tab_header31").addClass("tab_header_hover");
+	AppendTab({id: 31, pinned: false}, "30", false, false, true, false, false, "filtered highlighted_search", false, false, false);
+	document.getElementById("tab_title31").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_hover");
+	document.getElementById("tab_header31").classList.add("tab_header_hover");
 
-	AppendTab({tab: {id: 32, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "filtered highlighted_search active_tab"});
-	$("#tab_title32")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_active");
+	AppendTab({id: 32, pinned: false}, "30", false, false, true, false, false, "filtered highlighted_search active_tab", false, false, false);
+	document.getElementById("tab_title32").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_active");
 	
-	AppendTab({tab: {id: 33, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "filtered highlighted_search active_tab"});
-	$("#tab_title33")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_active_hover");
-	$("#tab_header33").addClass("tab_header_hover");
+	AppendTab({id: 33, pinned: false}, "30", false, false, true, false, false, "filtered highlighted_search active_tab", false, false, false);
+	document.getElementById("tab_title33").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_active_hover");
+	document.getElementById("tab_header33").classList.add("tab_header_hover");
 
-	AppendTab({tab: {id: 34, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected_tab filtered highlighted_search"});
-	$("#tab_title34")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected");
+	AppendTab({id: 34, pinned: false}, "30", false, false, true, false, false, "selected_tab filtered highlighted_search", false, false, false);
+	document.getElementById("tab_title34").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected");
 	
-	AppendTab({tab: {id: 35, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected_tab filtered highlighted_search"});
-	$("#tab_title35")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_hover");
-	$("#tab_header35").addClass("tab_header_hover");
+	AppendTab({id: 35, pinned: false}, "30", false, false, true, false, false, "selected_tab filtered highlighted_search", false, false, false);
+	document.getElementById("tab_title35").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_hover");
+	document.getElementById("tab_header35").classList.add("tab_header_hover");
 
-	AppendTab({tab: {id: 36, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected_tab filtered highlighted_search active_tab"});
-	$("#tab_title36")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_active");
+	AppendTab({id: 36, pinned: false}, "30", false, false, true, false, false, "selected_tab filtered highlighted_search active_tab", false, false, false);
+	document.getElementById("tab_title36").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_active");
 
 
-	AppendTab({tab: {id: 37, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected_tab filtered highlighted_search active_tab"});
-	$("#tab_title37")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_active_hover");
-	$("#tab_header37").addClass("tab_header_hover");
+	AppendTab({id: 37, pinned: false}, "30", false, false, true, false, false, "selected_tab filtered highlighted_search active_tab", false, false, false);
+	document.getElementById("tab_title37").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_active_hover");
+	document.getElementById("tab_header37").classList.add("tab_header_hover");
 
-	$("#_tab_list").addClass("active_group");
+	document.getElementById("_tab_list").classList.add("active_group");
 	
 }

options/theme.js

@@ -2,7 +2,12 @@
 // 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 LoadTheme(themeName) {
+function LoadTheme(themeName, reloadSidebar) {
+	
+	document.querySelectorAll(".theme_buttons").forEach(function(s){
+		s.disabled = true;
+	});
+	
 	chrome.storage.local.get(null, function(items) {
 		if (items.themes[themeName]) {
 			SelectedTheme = Object.assign({}, items.themes[themeName]);
@@ -12,22 +17,52 @@ function LoadTheme(themeName) {
 			current_theme = "";
 		}
 		setTimeout(function() {
-			$("#new_theme_name")[0].value = themeName;
+			document.getElementById("new_theme_name").value = themeName;
 			setTimeout(function() {
+
+				SetToolbarEvents(true, false, false, "");
+				RemoveToolbarEditEvents();
+				
 				ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
 				ApplyColorsSet(SelectedTheme["ColorsSet"]);
-				ApplySizeOptionsSet(SelectedTheme["TabsSizeSetNumber"]);
-				$("#toolbar").html(SelectedTheme.toolbar);
-				$("#toolbar_unused_buttons").html(SelectedTheme.unused_buttons);
+
+				document.getElementById("_gtetab_list").style.color = "";
+				document.getElementById("_gtetab_list2").style.color = "";
+				
+				document.getElementById("toolbar").innerHTML = SelectedTheme.toolbar;
+				document.getElementById("toolbar_unused_buttons").innerHTML = SelectedTheme.unused_buttons;
+
 				if (browserId == "F") {
-					$(".button#button_load_bak1, .button#button_load_bak2, .button#button_load_bak3").remove();
+					document.querySelectorAll("#button_load_bak1, #button_load_bak2, #button_load_bak3").forEach(function(s){
+						s.parentNode.removeChild(s);
+					});
 				}
-				SelectedTheme.ToolbarShow = $("#show_toolbar")[0].checked = SelectedTheme.ToolbarShow;
-				$("#field_show_toolbar").css({"height": $("#show_toolbar")[0].checked ? "" : "6"});
-				SelectedTheme.ToolbarShow ? $("#options_available_buttons, #toolbar, #toolbar_colors").show() : $("#options_available_buttons, #toolbar, #toolbar_colors").hide();
-				$(".on").removeClass("on");
+
+				document.getElementById("show_toolbar").checked = SelectedTheme.ToolbarShow;
+
+				if (SelectedTheme["TabsMargins"]) {
+					document.getElementById("tabs_margin_spacing")[SelectedTheme["TabsMargins"]].checked = true;
+					ApplyTabsMargins(SelectedTheme["TabsMargins"]);
+				} else {
+					document.getElementById("tabs_margin_spacing")["2"].checked = true;
+				}
+
+				document.querySelectorAll(".on").forEach(function(s){
+					s.classList.remove("on");
+				});
+
+				SetToolbarEvents(false, false, true, "click");
+				AddEditToolbarEditEvents();
+				RefreshFields();
 				RefreshGUI();
-				chrome.runtime.sendMessage({command: "reload_theme", themeName: "theme"+themeName});
+				if (reloadSidebar) {
+					chrome.runtime.sendMessage({command: "reload_theme", themeName: "theme"+themeName});
+				}
+				
+				document.querySelectorAll(".theme_buttons").forEach(function(s){
+					s.disabled = false;
+				});
+
 			}, 200);
 		}, 200);
 	});
@@ -42,45 +77,72 @@ function SaveTheme(themeName) {
 	});
 }
 function AddNewTheme() {
-	if (themes.indexOf($("#new_theme_name")[0].value) != -1) {
-		alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
-		return;
-	}
-	if ($("#new_theme_name")[0].value == "") {
+	
+	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;
 	}
-	$("#toolbar").html(DefaultToolbar);
+	
+	document.getElementById("toolbar").innerHTML = DefaultToolbar;
+
 	SelectedTheme = Object.assign({}, DefaultTheme);
 	SelectedTheme["ColorsSet"] = {};
 	DefaultTheme["ColorsSet"] = {};
-	themes.push($("#new_theme_name")[0].value);
-	var t_list = document.getElementById("theme_list");
-	var	theme_name = document.createElement("option");
-		theme_name.value = $("#new_theme_name")[0].value;
-		theme_name.text = theme_name.value;
-	t_list.add(theme_name);
-	$("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1;
-	SaveTheme(theme_name.value);
+	
+	if (themes.indexOf(NewName) != -1) {
+		while (themes.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(NewName);
+
+	let ThemeNameOption = document.createElement("option");
+	
+	ThemeNameOption.value = NewName;
+	ThemeNameOption.text = NewName;
+
+	ThemeList.add(ThemeNameOption);
+	ThemeList.selectedIndex = ThemeList.options.length-1;
+	
+	SaveTheme(NewName);
 	setTimeout(function() {
-		LoadTheme(theme_name.value);
-	}, 500);
-	chrome.storage.local.set({current_theme: $("#theme_list").val()});
+		LoadTheme(NewName, true);
+	}, 50);
+	
+	chrome.storage.local.set({current_theme: NewName});
 	RefreshFields();	
 }	
 function DeleteSelectedTheme() {
 	chrome.storage.local.get(null, function(items) {
 		let LSthemes = items.themes ? Object.assign({}, items.themes) : {};
-		themes.splice(themes.indexOf($("#theme_list").val()), 1);
+		
+		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});
-		var x = document.getElementById("theme_list");
-		x.remove(x.selectedIndex);
-		current_theme = ($("#theme_list")[0].options.length > 0) ? $("#theme_list").val() : "Default";
+		
+		ThemeList.remove(ThemeList.selectedIndex);
+	
+		current_theme = (ThemeList.options.length > 0) ? ThemeList.value : "Default";
 		chrome.storage.local.set({current_theme: current_theme});
-		if ($("#theme_list")[0].options.length == 0) {
+		if (ThemeList.options.length == 0) {
 			SelectedTheme = Object.assign({}, DefaultTheme);
 			SelectedTheme["ColorsSet"] = {};
 			chrome.storage.local.set({themes: {}});
@@ -88,29 +150,34 @@ function DeleteSelectedTheme() {
 				chrome.runtime.sendMessage({command: "reload_theme", themeName: ""});
 			}, 500);
 		}
-		LoadTheme(current_theme);
+		LoadTheme(current_theme, true);
 		RefreshFields();
 	});
 }
 function RenameSelectedTheme() {
-	if (themes.indexOf($("#new_theme_name")[0].value) != -1) {
+
+	let ThemeNameBox = document.getElementById("new_theme_name");
+
+	if (themes.indexOf(ThemeNameBox.value) != -1) {
 		alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
 		return;
 	}
-	if ($("#new_theme_name")[0].value == "") {
+	if (ThemeNameBox.value == "") {
 		alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
 		return;
 	}
 	chrome.storage.local.get(null, function(items) {
 		let LSthemes = items.themes ? Object.assign({}, items.themes) : {};
-		SelectedTheme["theme_name"] = $("#new_theme_name")[0].value;
-		let t_list = document.getElementById("theme_list");
-		t_list.options[t_list.selectedIndex].value = t_list.options[t_list.selectedIndex].text = SelectedTheme["theme_name"];
-		LSthemes[SelectedTheme["theme_name"]] = SelectedTheme;
+		SelectedTheme["theme_name"] = ThemeNameBox.value;
+		let ThemeList = document.getElementById("theme_list");
+		ThemeList.options[ThemeList.selectedIndex].value = ThemeNameBox.value;
+		ThemeList.options[ThemeList.selectedIndex].text = ThemeNameBox.value;
+		LSthemes[ThemeNameBox.value] = SelectedTheme;
 		if (LSthemes[current_theme]) {
 			delete LSthemes[current_theme];
 		}
-		current_theme = SelectedTheme["theme_name"];
+		current_theme = ThemeNameBox.value;
+		themes[ThemeList.selectedIndex] = ThemeNameBox.value;
 		chrome.storage.local.set({themes: LSthemes});
 		chrome.storage.local.set({current_theme: current_theme});
 	});
@@ -122,7 +189,7 @@ function ImportTheme() {
 	fr.readAsText(file.files[0]);
 	fr.onload = function() {
 		var data = fr.result;
-		file.remove();
+		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"));
@@ -146,23 +213,35 @@ function ImportTheme() {
 			if (themeObj.theme_version == 2) {
 				SelectedTheme["unused_buttons"] = themeObj["unused_buttons"];
 			}
+			if (themeObj.theme_version == 3) {
+				SelectedTheme["TabsMargins"] = themeObj["TabsMargins"];
+			}
 			if (themes.indexOf(themeObj.theme_name) == -1) {
 				SelectedTheme["theme_name"] = themeObj.theme_name;
 			} else {
-				SelectedTheme["theme_name"] = themeObj.theme_name + "(1)";
+				let NewName = themeObj.theme_name;
+				while (themes.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(SelectedTheme["theme_name"]);
 			SaveTheme(SelectedTheme["theme_name"]);
-			var t_list = document.getElementById("theme_list");
+			var ThemeList = document.getElementById("theme_list");
 			var theme_name = document.createElement("option");
 			theme_name.value = SelectedTheme["theme_name"];
 			theme_name.text = theme_name.value;
-			t_list.add(theme_name);
-			$("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1;
+			ThemeList.add(theme_name);
+			ThemeList.selectedIndex = ThemeList.options.length-1;
 			current_theme = SelectedTheme["theme_name"];
-			$("#new_theme_name")[0].value = current_theme;
+			document.createElement("new_theme_name").value = current_theme;
 			setTimeout(function() {
-				LoadTheme(current_theme);
+				LoadTheme(current_theme, true);
 			}, 500);
 			RefreshFields();
 			DefaultTheme["ColorsSet"] = {};
@@ -170,14 +249,3 @@ function ImportTheme() {
 		}
 	}	 
 }
-function ApplySizeOptionsSet(size){
-	for (let si = 0; si < document.styleSheets.length; si++) {
-		if ((document.styleSheets[si].ownerNode.id).match("size_settings") != null) {
-			if (document.styleSheets[si].ownerNode.id == "size_settings_"+size) {
-				document.styleSheets.item(si).disabled = false;
-			} else {
-				document.styleSheets.item(si).disabled = true;
-			}
-		}
-	}
-}

options/theme_size_settings_0.css

@@ -1,168 +0,0 @@
-/* OPTIONS IMAGES */
-.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
-.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
-.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
-.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
-.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
-.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
-
-.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
-.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
-
-.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
-.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
-
-.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
-.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
-
-.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
-.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
-
-.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
-.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
-
-.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
-.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
-.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
-.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
-
-@keyframes hover_blinking {
-	0%  {background-color: transparent;}
-	100% {background-color: blue;}
-}
-.hover_blinking {
-	animation: hover_blinking 1s infinite;
-}
-
-@keyframes hover_border_blinking {
-	0%  {border: 1px solid transparent;}
-	100% {border: 1px solid blue;}
-}
-.hover_border_blinking {
-	animation: hover_border_blinking 1s infinite;
-}
-
-/* MAIN TOOLBAR */
-#toolbar_background { top: 0px; left: 307px; }
-#toolbar_border_bottom { top: 0px; left: 328px; }
-
-#button_icons { top: 0px; left: 59px; }
-#button_icons_hover { top: 0px; left: 80px; }
-
-#button_background { top: 0px; left: 4px; }
-#button_hover_background { top: 0px; left: 25px; }
-
-#button_border { top: 0px; left: 115px; }
-#button_hover_border { top: 0px; left: 136px; }
-
-#filter_box_font { top: 0px; left: 175px; }
-#filter_clear_icon { top: 0px; left: 238px; }
-#filter_box_background { top: 0px; left: 196px; }
-#filter_box_border { top: 0px; left: 217px; }
-
-
-/* BIG OPTIONS BUTTONS */
-#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
-#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
-#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
-
-/* SCROLLBAR RESIZE */
-#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
-#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
-#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
-#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
-#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
-
-
-/* PIN LIST AND SCROLLBAR */
-#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
-
-#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
-#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
-#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-
-
-
-/* PINS */
-#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
-#pin_list_background { top: 1px; left: 187px; }
-#pin_list_border_bottom { top: 1px; left: 164px; }
-
-
-/* ATTENTION PIN */
-#attention_background { top: 1px; left: 72px; }
-#attention_border { top: 1px; left: 93px; }
-
-
-
-/* TAB LIST AND SCROLLBAR */
-#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
-
-#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
-#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
-#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
-#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
-#scrollbar_track { position: absolute; top: 410px; left: 790px; }
-
-#Tabs {
-	--row_image_size: 16px 16px;
-}
-/* TABS */
-#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
-
-.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 18px; /* background:rgba(255,0,0,0.1); */ }
-.tab_color_options_row>.color_border {top: 1px; left: 659px; background-size: var(--row_image_size);}
-.tab_color_options_row>.color_bucket {top: 1px; left: 680px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_color {top: 1px; left: 509px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_normal {top: 1px; left: 538px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_bold {top: 1px; left: 559px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_normal {top: 1px; left: 588px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_italic {top: 1px; left: 609px; background-size: var(--row_image_size);}
-
-
-/* DRAG AND DROP INDICATOR */
-#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
-#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_x { top: -14px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_background { top: 18px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#expand_hover_background { top: 1px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_closed_background { top: 1px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_open_background { top: 1px; left: -12px; background-size: var(--row_image_size);}
-
-
-#tab_list_background { top: 835px; left: 50px; }
-
-
-
-#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
-#_gtetab_list { width: 200px; height: 20px; }
-#_gtetab_list2 { width: 200px; height: 20px; }
-#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
-
-#group_list_background { top: 835px; left: 20px; }
-#group_list_borders { top: 631px; left: 20px; }
-#group_list_default_font_color { top: 652px; left: 20px; }
-#group_list_button_hover_background { top: 610px; left: 20px; }
-
-
-/* MENU */
-#tabs_menu_border { top: 59px; left: 80px; }
-#tabs_menu_background { top: 59px; left: 102px; }
-#tabs_menu_font { top: 36px; left: 102px; }
-#tabs_menu_hover_border { top: 14px; left: 80px; }
-#tabs_menu_hover_background { top: 14px; left: 102px; }
-#tabs_menu_separator { top: 36px; left: 80px; }
-

options/theme_size_settings_1.css

@@ -1,168 +0,0 @@
-/* OPTIONS IMAGES */
-.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
-.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
-.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
-.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
-.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
-.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
-
-.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
-.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
-
-.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
-.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
-
-.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
-.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
-
-.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
-.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
-
-.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
-.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
-
-.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
-.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
-.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
-.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
-
-@keyframes hover_blinking {
-	0%  {background-color: transparent;}
-	100% {background-color: blue;}
-}
-.hover_blinking {
-	animation: hover_blinking 1s infinite;
-}
-
-@keyframes hover_border_blinking {
-	0%  {border: 1px solid transparent;}
-	100% {border: 1px solid blue;}
-}
-.hover_border_blinking {
-	animation: hover_border_blinking 1s infinite;
-}
-
-/* MAIN TOOLBAR */
-#toolbar_background { top: 0px; left: 307px; }
-#toolbar_border_bottom { top: 0px; left: 328px; }
-
-#button_icons { top: 0px; left: 59px; }
-#button_icons_hover { top: 0px; left: 80px; }
-
-#button_background { top: 0px; left: 4px; }
-#button_hover_background { top: 0px; left: 25px; }
-
-#button_border { top: 0px; left: 115px; }
-#button_hover_border { top: 0px; left: 136px; }
-
-#filter_box_font { top: 0px; left: 175px; }
-#filter_clear_icon { top: 0px; left: 238px; }
-#filter_box_background { top: 0px; left: 196px; }
-#filter_box_border { top: 0px; left: 217px; }
-
-
-/* BIG OPTIONS BUTTONS */
-#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
-#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
-#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
-
-/* SCROLLBAR RESIZE */
-#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
-#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
-#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
-#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
-#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
-
-
-/* PIN LIST AND SCROLLBAR */
-#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
-
-#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
-#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
-#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-
-
-
-/* PINS */
-#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
-#pin_list_background { top: 1px; left: 187px; }
-#pin_list_border_bottom { top: 1px; left: 164px; }
-
-
-/* ATTENTION PIN */
-#attention_background { top: 1px; left: 72px; }
-#attention_border { top: 1px; left: 93px; }
-
-
-
-/* TAB LIST AND SCROLLBAR */
-#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
-
-#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
-#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
-#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
-#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
-#scrollbar_track { position: absolute; top: 410px; left: 790px; }
-
-#Tabs {
-	--row_image_size: 18px 18px;
-}
-/* TABS */
-#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
-
-.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 20px; /* background:rgba(255,0,0,0.1); */ }
-.tab_color_options_row>.color_border {top: 1px; left: 659px; background-size: var(--row_image_size);}
-.tab_color_options_row>.color_bucket {top: 1px; left: 680px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_color {top: 1px; left: 509px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_normal {top: 1px; left: 538px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_bold {top: 1px; left: 559px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_normal {top: 1px; left: 588px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_italic {top: 1px; left: 609px; background-size: var(--row_image_size);}
-
-
-/* DRAG AND DROP INDICATOR */
-#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
-#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_x { top: -16px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_background { top: 20px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#expand_hover_background { top: 1px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_closed_background { top: 1px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_open_background { top: 1px; left: -12px; background-size: var(--row_image_size);}
-
-
-#tab_list_background { top: 835px; left: 50px; }
-
-
-
-#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
-#_gtetab_list { width: 200px; height: 20px; }
-#_gtetab_list2 { width: 200px; height: 20px; }
-#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
-
-#group_list_background { top: 835px; left: 20px; }
-#group_list_borders { top: 631px; left: 20px; }
-#group_list_default_font_color { top: 652px; left: 20px; }
-#group_list_button_hover_background { top: 610px; left: 20px; }
-
-
-/* MENU */
-#tabs_menu_border { top: 59px; left: 80px; }
-#tabs_menu_background { top: 59px; left: 102px; }
-#tabs_menu_font { top: 36px; left: 102px; }
-#tabs_menu_hover_border { top: 14px; left: 80px; }
-#tabs_menu_hover_background { top: 14px; left: 102px; }
-#tabs_menu_separator { top: 36px; left: 80px; }
-

options/theme_size_settings_2.css

@@ -1,168 +0,0 @@
-/* OPTIONS IMAGES */
-.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
-.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
-.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
-.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
-.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
-.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
-
-.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
-.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
-
-.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
-.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
-
-.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
-.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
-
-.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
-.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
-
-.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
-.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
-
-.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
-.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
-.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
-.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
-
-@keyframes hover_blinking {
-	0%  {background-color: transparent;}
-	100% {background-color: blue;}
-}
-.hover_blinking {
-	animation: hover_blinking 1s infinite;
-}
-
-@keyframes hover_border_blinking {
-	0%  {border: 1px solid transparent;}
-	100% {border: 1px solid blue;}
-}
-.hover_border_blinking {
-	animation: hover_border_blinking 1s infinite;
-}
-
-/* MAIN TOOLBAR */
-#toolbar_background { top: 0px; left: 307px; }
-#toolbar_border_bottom { top: 0px; left: 328px; }
-
-#button_icons { top: 0px; left: 59px; }
-#button_icons_hover { top: 0px; left: 80px; }
-
-#button_background { top: 0px; left: 4px; }
-#button_hover_background { top: 0px; left: 25px; }
-
-#button_border { top: 0px; left: 115px; }
-#button_hover_border { top: 0px; left: 136px; }
-
-#filter_box_font { top: 0px; left: 175px; }
-#filter_clear_icon { top: 0px; left: 238px; }
-#filter_box_background { top: 0px; left: 196px; }
-#filter_box_border { top: 0px; left: 217px; }
-
-
-/* BIG OPTIONS BUTTONS */
-#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
-#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
-#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
-
-/* SCROLLBAR RESIZE */
-#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
-#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
-#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
-#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
-#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
-
-
-/* PIN LIST AND SCROLLBAR */
-#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
-
-#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
-#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
-#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-
-
-
-/* PINS */
-#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
-#pin_list_background { top: 3px; left: 187px; }
-#pin_list_border_bottom { top: 3px; left: 164px; }
-
-
-/* ATTENTION PIN */
-#attention_background { top: 3px; left: 72px; }
-#attention_border { top: 3px; left: 93px; }
-
-
-
-/* TAB LIST AND SCROLLBAR */
-#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
-
-#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
-#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
-#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
-#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
-#scrollbar_track { position: absolute; top: 410px; left: 790px; }
-
-#Tabs {
-	--row_image_size: 20px 20px;
-}
-/* TABS */
-#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
-
-.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 22px; /* background:rgba(255,0,0,0.1); */ }
-.tab_color_options_row>.color_border {top: 1px; left: 659px; background-size: var(--row_image_size);}
-.tab_color_options_row>.color_bucket {top: 1px; left: 680px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_color {top: 1px; left: 509px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_normal {top: 1px; left: 538px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_bold {top: 1px; left: 559px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_normal {top: 1px; left: 588px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_italic {top: 1px; left: 609px; background-size: var(--row_image_size);}
-
-
-/* DRAG AND DROP INDICATOR */
-#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
-#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_x { top: -18px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_background { top: 22px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#expand_hover_background { top: 1px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_closed_background { top: 1px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_open_background { top: 1px; left: -12px; background-size: var(--row_image_size);}
-
-
-#tab_list_background { top: 835px; left: 50px; }
-
-
-
-#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
-#_gtetab_list { width: 200px; height: 20px; }
-#_gtetab_list2 { width: 200px; height: 20px; }
-#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
-
-#group_list_background { top: 835px; left: 20px; }
-#group_list_borders { top: 631px; left: 20px; }
-#group_list_default_font_color { top: 652px; left: 20px; }
-#group_list_button_hover_background { top: 610px; left: 20px; }
-
-
-/* MENU */
-#tabs_menu_border { top: 59px; left: 80px; }
-#tabs_menu_background { top: 59px; left: 102px; }
-#tabs_menu_font { top: 36px; left: 102px; }
-#tabs_menu_hover_border { top: 14px; left: 80px; }
-#tabs_menu_hover_background { top: 14px; left: 102px; }
-#tabs_menu_separator { top: 36px; left: 80px; }
-

options/theme_size_settings_3.css

@@ -1,168 +0,0 @@
-/* OPTIONS IMAGES */
-.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
-.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
-.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
-.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
-.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
-.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
-
-.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
-.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
-
-.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
-.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
-
-.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
-.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
-
-.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
-.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
-
-.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
-.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
-
-.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
-.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
-.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
-.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
-
-@keyframes hover_blinking {
-	0%  {background-color: transparent;}
-	100% {background-color: blue;}
-}
-.hover_blinking {
-	animation: hover_blinking 1s infinite;
-}
-
-@keyframes hover_border_blinking {
-	0%  {border: 1px solid transparent;}
-	100% {border: 1px solid blue;}
-}
-.hover_border_blinking {
-	animation: hover_border_blinking 1s infinite;
-}
-
-/* MAIN TOOLBAR */
-#toolbar_background { top: 0px; left: 307px; }
-#toolbar_border_bottom { top: 0px; left: 328px; }
-
-#button_icons { top: 0px; left: 59px; }
-#button_icons_hover { top: 0px; left: 80px; }
-
-#button_background { top: 0px; left: 4px; }
-#button_hover_background { top: 0px; left: 25px; }
-
-#button_border { top: 0px; left: 115px; }
-#button_hover_border { top: 0px; left: 136px; }
-
-#filter_box_font { top: 0px; left: 175px; }
-#filter_clear_icon { top: 0px; left: 238px; }
-#filter_box_background { top: 0px; left: 196px; }
-#filter_box_border { top: 0px; left: 217px; }
-
-
-/* BIG OPTIONS BUTTONS */
-#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
-#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
-#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
-
-/* SCROLLBAR RESIZE */
-#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
-#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
-#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
-#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
-#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
-
-
-/* PIN LIST AND SCROLLBAR */
-#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
-
-#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
-#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
-#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-
-
-
-/* PINS */
-#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
-#pin_list_background { top: 3px; left: 187px; }
-#pin_list_border_bottom { top: 3px; left: 164px; }
-
-
-/* ATTENTION PIN */
-#attention_background { top: 3px; left: 72px; }
-#attention_border { top: 3px; left: 93px; }
-
-
-
-/* TAB LIST AND SCROLLBAR */
-#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
-
-#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
-#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
-#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
-#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
-#scrollbar_track { position: absolute; top: 410px; left: 790px; }
-
-#Tabs {
-	--row_image_size: 20px 20px;
-}
-/* TABS */
-#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
-
-.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 24px; /* background:rgba(255,0,0,0.1); */ }
-.tab_color_options_row>.color_border {top: 2px; left: 659px; background-size: var(--row_image_size);}
-.tab_color_options_row>.color_bucket {top: 2px; left: 680px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_color {top: 2px; left: 509px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_normal {top: 2px; left: 538px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_bold {top: 2px; left: 559px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_normal {top: 2px; left: 588px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_italic {top: 2px; left: 609px; background-size: var(--row_image_size);}
-
-
-/* DRAG AND DROP INDICATOR */
-#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
-#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_x { top: -18px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_background { top: 22px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#expand_hover_background { top: 2px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_closed_background { top: 2px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_open_background { top: 2px; left: -12px; background-size: var(--row_image_size);}
-
-
-#tab_list_background { top: 835px; left: 50px; }
-
-
-
-#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
-#_gtetab_list { width: 200px; height: 20px; }
-#_gtetab_list2 { width: 200px; height: 20px; }
-#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
-
-#group_list_background { top: 835px; left: 20px; }
-#group_list_borders { top: 631px; left: 20px; }
-#group_list_default_font_color { top: 652px; left: 20px; }
-#group_list_button_hover_background { top: 610px; left: 20px; }
-
-
-/* MENU */
-#tabs_menu_border { top: 59px; left: 80px; }
-#tabs_menu_background { top: 59px; left: 102px; }
-#tabs_menu_font { top: 36px; left: 102px; }
-#tabs_menu_hover_border { top: 14px; left: 80px; }
-#tabs_menu_hover_background { top: 14px; left: 102px; }
-#tabs_menu_separator { top: 36px; left: 80px; }
-

options/theme_size_settings_4.css

@@ -1,168 +0,0 @@
-/* OPTIONS IMAGES */
-.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
-.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
-.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
-.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
-.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
-.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
-.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
-.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
-
-.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
-.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
-
-.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
-.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
-
-.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
-.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
-
-.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
-.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
-
-.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
-.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
-
-.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
-.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
-.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
-.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
-
-@keyframes hover_blinking {
-	0%  {background-color: transparent;}
-	100% {background-color: blue;}
-}
-.hover_blinking {
-	animation: hover_blinking 1s infinite;
-}
-
-@keyframes hover_border_blinking {
-	0%  {border: 1px solid transparent;}
-	100% {border: 1px solid blue;}
-}
-.hover_border_blinking {
-	animation: hover_border_blinking 1s infinite;
-}
-
-/* MAIN TOOLBAR */
-#toolbar_background { top: 0px; left: 307px; }
-#toolbar_border_bottom { top: 0px; left: 328px; }
-
-#button_icons { top: 0px; left: 59px; }
-#button_icons_hover { top: 0px; left: 80px; }
-
-#button_background { top: 0px; left: 4px; }
-#button_hover_background { top: 0px; left: 25px; }
-
-#button_border { top: 0px; left: 115px; }
-#button_hover_border { top: 0px; left: 136px; }
-
-#filter_box_font { top: 0px; left: 175px; }
-#filter_clear_icon { top: 0px; left: 238px; }
-#filter_box_background { top: 0px; left: 196px; }
-#filter_box_border { top: 0px; left: 217px; }
-
-
-/* BIG OPTIONS BUTTONS */
-#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
-#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
-#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
-
-/* SCROLLBAR RESIZE */
-#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
-#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
-#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
-#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
-#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
-
-
-/* PIN LIST AND SCROLLBAR */
-#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
-
-#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
-#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
-#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-
-
-
-/* PINS */
-#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
-#pin_list_background { top: 4px; left: 187px; }
-#pin_list_border_bottom { top: 4px; left: 164px; }
-
-
-/* ATTENTION PIN */
-#attention_background { top: 4px; left: 72px; }
-#attention_border { top: 4px; left: 93px; }
-
-
-
-/* TAB LIST AND SCROLLBAR */
-#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
-
-#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
-#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
-#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
-#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
-#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
-#scrollbar_track { position: absolute; top: 410px; left: 790px; }
-
-#Tabs {
-	--row_image_size: 20px 20px;
-}
-/* TABS */
-#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 36px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
-
-.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 26px; /* background:rgba(255,0,0,0.1); */ }
-.tab_color_options_row>.color_border {top: 0px; left: 659px; background-size: var(--row_image_size);}
-.tab_color_options_row>.color_bucket {top: 0px; left: 680px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_color {top: 0px; left: 509px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_normal {top: 0px; left: 538px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_weight_bold {top: 0px; left: 559px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_normal {top: 0px; left: 588px; background-size: var(--row_image_size);}
-.tab_color_options_row>.font_style_italic {top: 0px; left: 609px; background-size: var(--row_image_size);}
-
-
-/* DRAG AND DROP INDICATOR */
-#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
-#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_x { top: -20px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_border { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-#close_hover_background { top: 20px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
-
-
-/* CLOSE TAB BUTTON OPTIONS */
-#expand_hover_background { top: 0px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_closed_background { top: 0px; left: calc(var(--children_padding_left) - 18px); background-size: var(--row_image_size);}
-#expand_open_background { top: 0px; left: -12px; background-size: var(--row_image_size);}
-
-
-#tab_list_background { top: 835px; left: 50px; }
-
-
-
-#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
-#_gtetab_list { width: 200px; height: 20px; }
-#_gtetab_list2 { width: 200px; height: 20px; }
-#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
-
-#group_list_background { top: 835px; left: 20px; }
-#group_list_borders { top: 631px; left: 20px; }
-#group_list_default_font_color { top: 652px; left: 20px; }
-#group_list_button_hover_background { top: 610px; left: 20px; }
-
-
-/* MENU */
-#tabs_menu_border { top: 59px; left: 80px; }
-#tabs_menu_background { top: 59px; left: 102px; }
-#tabs_menu_font { top: 36px; left: 102px; }
-#tabs_menu_hover_border { top: 14px; left: 80px; }
-#tabs_menu_hover_background { top: 14px; left: 102px; }
-#tabs_menu_separator { top: 36px; left: 80px; }
-

scripts/IO.js

@@ -1,72 +0,0 @@
-// 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/
-
-// **********      KEYBOARD AND MOUSE       ***************
-
-function BindTabsSwitchingToMouseWheel() {
-	// switch tabs with mouse scroll
-	$("#pin_list, .group").bind("mousewheel DOMMouseScroll", function(event) {
-		let prev = event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0;
-		if (prev) {
-			ActivatePrevTab();
-		} else {
-			ActivateNextTab();
-		}
-		event.preventDefault();
-	});
-}
-
-function SetIOEvents() {
-	if (!opt.switch_with_scroll) {
-		$("#pin_list").bind("mousewheel DOMMouseScroll", function(event) {
-			let direction = (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) ? -1 : 1;
-			let speed = 0.1;
-			for (let t = 1; t < 40; t++) {
-				setTimeout(function() {
-					if (t < 30) {
-						speed = speed+0.1; // accelerate
-					} else {
-						speed = speed-0.3; // decelerate
-					}
-					$("#pin_list").scrollLeft($("#pin_list").scrollLeft()+(direction*speed));
-				}, t);
-			}
-		});
-	}
-	
-	// catch keyboard keys
-	$(document).keydown(function(event) {
-		if (MouseHoverOver == "pin_list") {
-			// ctrl+a to select all
-			if (event.ctrlKey && event.which == 65) {
-				$(".pin").addClass("selected_tab");
-			}
-			// ctrl+i to invert selection
-			if (event.ctrlKey && event.which == 73) {
-				$(".pin").toggleClass("selected_tab");
-			}
-		}
-		if (MouseHoverOver.match("g_|tab_list") !== null) {
-			// ctrl+a to select all
-			if (event.ctrlKey && event.which == 65) {
-				$("#ch"+active_group).children(".tab:visible").addClass("selected_tab");
-			}
-			// ctrl+i to invert selection
-			if (event.ctrlKey && event.which == 73) {
-				$(".tab:visible").toggleClass("selected_tab");
-			}
-		}
-		RefreshGUI();
-	});
-
-	// remove middle mouse and set hiding menu
-	document.body.onmousedown = function(event) {
-		if (event.button == 1 && opt.close_with_MMB == true) {
-			event.preventDefault();
-		}
-		if (event.button == 0 && !$(event.target).is(".menu_item")) {
-			$(".menu").hide(300);
-		}
-	};
-}

scripts/backup.js

@@ -3,31 +3,41 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 function ExportGroup(filename) {
+	if (opt.debug) {
+		console.log("function: ExportGroup, filename "+filename);
+	}
 	let GroupToSave = { group: bggroups[active_group], folders: {}, tabs: [] };
-	let lastId = parseInt($("#"+active_group+" .tab").last()[0].id);
-	$("#"+active_group+" .folder").each(function() {
-		if (bgfolders[this.id]) {
-			GroupToSave.folders[this.id] = bgfolders[this.id];
+	document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
+		if (bgfolders[s.id]) {
+			GroupToSave.folders[s.id] = bgfolders[s.id];
 		}
-	})
-	$("#"+active_group+" .tab").each(function() {
-		chrome.tabs.get(parseInt(this.id), function(tab) {
-			if ((tab.url).startsWith("www") || (tab.url).startsWith("http") || (tab.url).startsWith("ftp")) {
-				(GroupToSave.tabs).push(
-					{
-						id: tab.id,
-						parent: $("#"+tab.id).parent().parent()[0].id,
-						index: $("#"+tab.id).index(),
-						expand: ($("#"+tab.id).is(".n") ? "n" : ($("#"+tab.id).is(".c") ? "c" : "o")),
-						url: tab.url
-					}
-				);
-			}
-			if (tab.id == lastId) {
-				SaveFile(filename, GroupToSave);
-			}
+	});
+	let Tabs = document.querySelectorAll("#"+active_group+" .tab");
+	if (Tabs.length > 0) {
+		let lastId = parseInt(Tabs[Tabs.length-1].id);
+		Tabs.forEach(function(s){
+			chrome.tabs.get(parseInt(s.id), function(tab) {
+				if ((tab.url).startsWith("www") || (tab.url).startsWith("http") || (tab.url).startsWith("ftp")) {
+					(GroupToSave.tabs).push(
+						{
+							id: tab.id,
+							parent: s.parentNode.parentNode.id,
+							index: Array.from(s.parentNode.children).indexOf(s),
+							expand: (s.classList.contains("c") ? "c" : (s.classList.contains("o") ? "o" : "")),
+							url: tab.url
+						}
+					);
+				}
+				
+				if (tab.id == lastId) {
+					// if (opt.debug) {
+						// console.log(GroupToSave);
+					// }
+					SaveFile(filename, GroupToSave);
+				}
+			});
 		});
-	})
+	}
 }
 function ImportGroup() {
 	let file = document.getElementById("file_import_group");
@@ -36,12 +46,12 @@ function ImportGroup() {
 	fr.readAsText(file.files[0]);
 	fr.onload = function() {
 		let data = fr.result;
-		file.remove();
+		file.parentNode.removeChild(file);
 		let LoadedGroup = JSON.parse(data);
 		let NewFolders = {};
 		let RefsTabs = {};
 		let NewTabs = [];
-		let NewGroupId = AddNewGroup({name: LoadedGroup.group.name, font: LoadedGroup.group.font});
+		let NewGroupId = AddNewGroup(LoadedGroup.group.name, LoadedGroup.group.font);
 		SetActiveGroup(NewGroupId, false, false);
 		for (var folder in LoadedGroup.folders) {
 			let newId = GenerateNewFolderID();
@@ -58,6 +68,13 @@ function ImportGroup() {
 					RefsTabs[Tab.id] = new_tab.id;
 					Tab.id = new_tab.id;
 					NewTabs.push(Tab);
+					setTimeout(function() {
+						let nt = document.getElementById(new_tab.id);
+						let NewGroupTabs = document.getElementById("ct"+NewGroupId);
+						if (nt != null && NewGroupTabs != null) {
+							NewGroupTabs.appendChild(nt);
+						}
+					}, 1000);
 				}
 				if (NewTabs.length == LoadedGroup.tabs.length-1) {
 					setTimeout(function() {
@@ -89,10 +106,10 @@ function ExportSession(filename) {
 				let ExportWindows = [];
 				w.forEach(function(CWin) {
 					if (CWin.tabs.length > 0) {
-						if (CWin.tabs.length > 100 && warn) {
-							alert(chrome.i18n.getMessage("warning_exporting_big_amount_of_tabs"));
-							warn = false;
-						}
+						// if (CWin.tabs.length > 100 && warn) {
+							// alert(chrome.i18n.getMessage("warning_exporting_big_amount_of_tabs"));
+							// warn = false;
+						// }
 						windows[CWin.id]["id"] = CWin.id;
 						windows[CWin.id]["tabs"] = [];
 						CWin.tabs.forEach(function(CTab) {
@@ -115,10 +132,10 @@ function ImportSession() {
 	fr.readAsText(file.files[file.files.length-1]);
 	fr.onload = function() {
 		let data = fr.result;
-		file.remove();
+		file.parentNode.removeChild(file);
 		let LoadedWindows = JSON.parse(data);
 		let RefsTabs = {};
-		log(LoadedWindows);
+		if (opt.debug) console.log(LoadedWindows);
 		LoadedWindows.forEach(function(LWin) {
 			let NewTabs = [];
 			let urls = [];
@@ -152,15 +169,15 @@ function ImportSession() {
 	}	 
 }
 function RearrangeTreeStructure(groups, folders, tabs) { // groups and folders are in object, just like bggroups and bgfolders, but tabs are in array of bgtreetabs objects
-	log("function: RearrangeTreeStructure");
+	if (opt.debug) console.log("function: RearrangeTreeStructure");
 	chrome.tabs.query({currentWindow: true}, function(ChromeTabs) {
-		if (Object.keys(groups).length > 0) {
+		if (groups && Object.keys(groups).length > 0) {
 			for (var group in groups) {
 				bggroups[groups[group].id] = Object.assign({}, groups[group]);
 			}
 			AppendGroups(bggroups);
 		}
-		if (Object.keys(folders).length > 0) {
+		if (folders && Object.keys(folders).length > 0) {
 			for (var folder in folders) {
 				bgfolders[folders[folder].id] = Object.assign({}, folders[folder]);
 			}
@@ -171,9 +188,13 @@ function RearrangeTreeStructure(groups, folders, tabs) { // groups and folders a
 			if (Tab.parent == "pin_list") {
 				chrome.tabs.update(Tab.id, {pinned: true});
 			}
-			if ($("#"+Tab.id)[0] && $("#ch"+Tab.parent)[0]) {
-				$("#ch"+Tab.parent).append($("#"+Tab.id));
-				$("#"+Tab.id).addClass(Tab.expand);
+			let tb = document.getElementById(Tab.id);
+			let tbp = document.getElementById("ct"+Tab.parent);
+			if (tb != null && tbp != null) {
+				tbp.appendChild(tb);
+				if (Tab.expand != "") {
+					tb.classList.add(Tab.expand);
+				}
 			}
 			bgtabs[Tab.id] = {index: Tab.index, parent: Tab.parent, expand: Tab.expand};
 		});
@@ -189,21 +210,21 @@ function RearrangeTreeStructure(groups, folders, tabs) { // groups and folders a
 	});
 }
 function ImportMergeTabs() {
-	log("function: ImportMergeTabs");
+	if (opt.debug) console.log("function: ImportMergeTabs");
 	let file = document.getElementById("file_import_merge_backup");
 	let fr = new FileReader();
 	if (file.files[0] == undefined) return;
 	fr.readAsText(file.files[0]);
 	fr.onload = function() {
 		let data = fr.result;
-		file.remove();
+		file.parentNode.removeChild(file);
 		let lw = JSON.parse(data);
 		let RefsWins = {};
 		let RefsTabs = {};
 		for (let LWI = 0; LWI < lw.length; LWI++) { // clear previous window ids
 			lw[LWI].id = "";
 		}
-		log(lw);
+		if (opt.debug) console.log(lw);
 		chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(cw) {
 			for (let CWI = 0; CWI < cw.length; CWI++) { // loop Windows
 				for (let LWI = 0; LWI < lw.length; LWI++) { // loop Loaded Windows
@@ -219,17 +240,17 @@ function ImportMergeTabs() {
 							}
 						}
 					}
-					log(tabsMatch);
+					if (opt.debug) console.log(tabsMatch);
 					if (tabsMatch > lw[LWI].tabs.length*0.8) {
 						lw[LWI].id = cw[CWI].id;
 						break;
 					}
 				}
 			}
-			log(lw);
+			if (opt.debug) console.log(lw);
 			lw.forEach(function(w) {
 				if (w.id == "") { // missing window, lets make one
-					log("missing window");
+					if (opt.debug) console.log("missing window");
 					let NewTabs = [];
 					let urls = [];
 					(w.tabs).forEach(function(Tab) {
@@ -261,7 +282,7 @@ function ImportMergeTabs() {
 				}
 				else
 				{ // window exists, lets add missing tabs
-					log("window exists");
+					if (opt.debug) console.log("window exists");
 					let NewTabs = [];
 					(w.tabs).forEach(function(Tab) {
 						if (Tab.url != "") { // missing tab, lets make one

scripts/chrome.js

@@ -13,12 +13,13 @@ function StartChromeListeners() {
 		});
 	}
 	chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
-		log("message to sidebar "+CurrentWindowId+": ");
-		log(message);
 		if (message.command == "backup_available") {
-			$("#button_load_bak"+message.bak).removeClass("disabled");
+			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			document.getElementById("button_load_bak"+message.bak).classList.remove("disabled");
 		}
 		if (message.command == "drag_drop") {
+			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (opt.debug) console.log(message);
 			DragAndDrop.ComesFromWindowId = message.ComesFromWindowId;
 			DragAndDrop.DragNodeClass = message.DragNodeClass;
 			DragAndDrop.Depth = message.Depth;
@@ -27,8 +28,11 @@ function StartChromeListeners() {
 			DragAndDrop.TabsIds = message.TabsIds;
 			DragAndDrop.TabsIdsParents = message.TabsIdsParents;
 			DragAndDrop.TabsIdsSelected = message.TabsIdsSelected;
+			DropTargetsFront(undefined, true, false);
 		}
 		if (message.command == "dropped") {
+			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (opt.debug) console.log(message);
 			DragAndDrop.DroppedToWindowId = message.DroppedToWindowId;
 			if (Object.keys(DragAndDrop.Folders).length > 0 && message.DroppedToWindowId != CurrentWindowId) {
 				for (var folder in DragAndDrop.Folders)
@@ -37,18 +41,25 @@ function StartChromeListeners() {
 				}
 			}
 		}
+		if (message.command == "dragend") {
+			CleanUpDragClasses();
+		}
 		if (message.command == "reload_sidebar") {
+			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (opt.debug) console.log(message);
 			window.location.reload();
 		}
 		if (message.command == "reload_options") {
+			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
 			chrome.runtime.sendMessage({command: "get_preferences"}, function(response) {
 				opt = Object.assign({}, response);
 				setTimeout(function() {
 					RestorePinListRowSettings();
-				}, 200);
+			}, 200);
 			});
 		}
 		if (message.command == "reload_theme") {
+			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
 			setTimeout(function() {
 				chrome.runtime.sendMessage({command: "get_theme", windowId: CurrentWindowId}, function(response) {
 					RestorePinListRowSettings();
@@ -58,110 +69,150 @@ function StartChromeListeners() {
 			}, 300);
 		}
 		if (message.windowId == CurrentWindowId) {
-			switch(message.command) {
-				case "tab_created": // if set to treat unparented tabs as active tab's child
-					if (opt.append_orphan_tab == "as_child" && message.tab.openerTabId == undefined && $("#"+active_group+" .active_tab")[0]) {
-						message.tab.openerTabId = $("#"+active_group+" .active_tab")[0].id;
+			
+			// I WANT TO MOVE THIS LOGIC TO THE BACKGROUND SCRIPT!
+			
+			if (message.command == "tab_created") { // if set to treat unparented tabs as active tab's child
+			
+				if (opt.debug) console.log("tab_created: "+message.tabId);
+				if (opt.debug) console.log("tab is pinned: "+message.tab.pinned);
+
+				if (message.parentTabId != undefined) {
+					AppendTab(message.tab, message.parentTabId, false, false, true, message.index, true, false, false, true, false);
+				} else {
+					if (opt.append_orphan_tab == "as_child" && message.tab.openerTabId == undefined && document.querySelector("#"+active_group+" .active_tab")) {
+						if (opt.debug) console.log("ignore orphan case, append tab as child");
+						message.tab.openerTabId = document.querySelector("#"+active_group+" .active_tab").id;
 					}
 					if (message.tab.openerTabId) { // child case
 						if (opt.append_child_tab == "after_active") {
-							AppendTab({ tab: message.tab, InsertAfterId: $("#"+active_group+" .active_tab")[0] ? $("#"+active_group+" .active_tab")[0].id : undefined, Append: false, Scroll: true  });
+							if (opt.debug) console.log("child case, tab will append after active");
+							AppendTab(message.tab, false, false, document.querySelector("#"+active_group+" .active_tab") != null ? document.querySelector("#"+active_group+" .active_tab").id : false, false, false, true, false, false, true, false);
 						} else {
-							if (opt.max_tree_depth < 0 || (opt.max_tree_depth > 0 && $("#"+message.tab.openerTabId).parents(".tab").length < opt.max_tree_depth)) { // append to tree
+							let Parents = GetParentsByClass(document.getElementById(message.tab.openerTabId), "tab");
+							if (opt.max_tree_depth < 0 || (opt.max_tree_depth > 0 && Parents.length < opt.max_tree_depth)) { // append to tree
 								if (opt.append_child_tab == "top") {
-									AppendTab({ tab: message.tab, ParentId: message.tab.openerTabId, Append: false, Scroll: true });
+									if (opt.debug) console.log("child case, in tree limit, tab will append on top");
+									AppendTab(message.tab, message.tab.openerTabId, false, false, (message.tab.pinned ? true : false), false, true, false, false, true, false);
 								}
 								if (opt.append_child_tab == "bottom") {
-									AppendTab({ tab: message.tab, ParentId: message.tab.openerTabId, Append: true, Scroll: true });
+									if (opt.debug) console.log("child case, in tree limit, tab will append on bottom");
+									AppendTab(message.tab, message.tab.openerTabId, false, false, true, false, true, false, false, true, false);
 								}
 							}
-							if (opt.max_tree_depth > 0 && $("#"+message.tab.openerTabId).parents(".tab").length >= opt.max_tree_depth) { // if reached depth limit of the tree
+							if (opt.max_tree_depth > 0 && Parents.length >= opt.max_tree_depth) { // if reached depth limit of the tree
+								if (opt.debug) console.log("child case, surpassed tree limit");
 								if (opt.append_child_tab_after_limit == "after") {
-									AppendTab({ tab: message.tab, InsertAfterId: message.tab.openerTabId, Append: true, Scroll: true });
+									if (opt.debug) console.log("tab will append after active");
+									AppendTab(message.tab, false, false, message.tab.openerTabId, true, false, true, false, false, true, false);
 								}
 								if (opt.append_child_tab_after_limit == "top") {
-									AppendTab({ tab: message.tab, ParentId: $("#"+message.tab.openerTabId).parent().parent()[0].id, Append: false, Scroll: true });
+									if (opt.debug) console.log("tab will append on top");
+									AppendTab(message.tab, document.getElementById(message.tab.openerTabId).parentNode.parentNode.id, false, false, (message.tab.pinned ? true : false), false, true, false, false, true, false);
 								}
 								if (opt.append_child_tab_after_limit == "bottom") {
-									AppendTab({ tab: message.tab, ParentId: $("#"+message.tab.openerTabId).parent().parent()[0].id, Append: true, Scroll: true });
+									if (opt.debug) console.log("tab will append on bottom");
+									AppendTab(message.tab, document.getElementById(message.tab.openerTabId).parentNode.parentNode.id, false, false, true, false, true, false, false, true, false);
 								}
 							}
 						}
-						if (opt.max_tree_depth == 0) { // place tabs flat, (should I merge it with orphans case?)
+						if (opt.max_tree_depth == 0) { // place tabs flat
+							if (opt.debug) console.log("max_tree_depth is 0, tabs are placed on the same level");
 							if (opt.append_child_tab_after_limit == "after") {
-								AppendTab({ tab: message.tab, InsertAfterId: message.tab.openerTabId, Append: false, Scroll: true });
+								if (opt.debug) console.log("tab will append after active");
+								AppendTab(message.tab, false, false, message.tab.openerTabId, false, false, true, false, false, true, false);
 							}
 							if (opt.append_child_tab_after_limit == "top") {
-								AppendTab({ tab: message.tab, Append: false, Scroll: true });
+								if (opt.debug) console.log("tab will append on top");
+								AppendTab(message.tab, false, false, false, false, false, true, false, false, true, false);
 							}
 							if (opt.append_child_tab_after_limit == "bottom") {
-								AppendTab({ tab: message.tab, Append: true, Scroll: true });
+								if (opt.debug) console.log("tab will append on bottom");
+								AppendTab(message.tab, false, false, false, true, false, true, false, false, true, false);
 							}
 						}
 					} else { // orphan case
 						if (opt.append_orphan_tab == "after_active") {
-							AppendTab({ tab: message.tab, InsertAfterId: $("#"+active_group+" .active_tab")[0] ? $("#"+active_group+" .active_tab")[0].id : undefined, Append: false });
+							AppendTab(message.tab, false, false, (document.querySelector("#"+active_group+" .active_tab") != null ? document.querySelector("#"+active_group+" .active_tab").id : undefined), (message.tab.pinned ? true : false), false, true, false, false, true, false);
 						}
 						if (opt.append_orphan_tab == "top") {
-							AppendTab({ tab: message.tab, Append: false });
+							AppendTab(message.tab, false, false, false, false, false, true, false, false, true, false);
 						}
 						if (opt.append_orphan_tab == "bottom" || opt.append_orphan_tab == "as_child") {
-							AppendTab({ tab: message.tab, Append: true });
+							AppendTab(message.tab, false, false, false, true, false, true, false, false, true, false);
 						}
 					}
-					if ($("#"+message.tab.openerTabId).is(".c")) {
-						$("#"+message.tab.openerTabId).removeClass("c").addClass("o");
+				}
+				
+				if (message.tab.openerTabId) { // check if openerTabId is defined, if it's in DOM and if it's closed, then change it to open
+					let openerTab = document.querySelector(".c[id='"+message.tab.openerTabId+"']");
+					if (openerTab != null) {
+						openerTab.classList.remove("c");
+						openerTab.classList.add("o");
 					}
-					if (opt.syncro_tabbar_tabs_order) {
-						let TTtabsIndexes = $(".pin, .tab").map(function(){return parseInt(this.id);}).toArray();
-						chrome.tabs.move(message.tab.id, {index: TTtabsIndexes.indexOf(message.tab.id)});
+				}
+				if (opt.syncro_tabbar_tabs_order) {
+					let tabIds = Array.prototype.map.call(document.querySelectorAll(".pin, .tab"), function(s){
+						return parseInt(s.id);
+					});
+					chrome.tabs.move(message.tab.id, {index: tabIds.indexOf(message.tab.id)});
+				}
+				RefreshExpandStates();
+				schedule_update_data++;
+				RefreshGUI();
+				RefreshCounters();
+				return;
+			}
+			if (message.command == "tab_attached") {
+				if (opt.debug) console.log(message);
+				AppendTab(message.tab, message.ParentId, false, false, true, false, true, false, false, true, false);
+				RefreshGUI();
+				return;
+			}
+			if (message.command == "tab_detached") {
+				let ctDetachedParent = document.getElementById(message.tabId).childNodes[4];
+				if (ctDetachedParent != null) {
+					if (opt.promote_children_in_first_child == true && ctDetachedParent.childNodes.length > 1) {
+						let ctNewParent = document.getElementById(ctDetachedParent.firstChild.id).childNodes[4];
+						ctDetachedParent.parentNode.parentNode.insertBefore(ctDetachedParent.firstChild, ctDetachedParent.parentNode);
+						while (ctDetachedParent.firstChild) {
+							ctNewParent.appendChild(ctDetachedParent.firstChild);
+						}
+					} else {
+						while (ctDetachedParent.firstChild) {
+							ctDetachedParent.parentNode.parentNode.insertBefore(ctDetachedParent.firstChild, ctDetachedParent.parentNode);
+						}
 					}
-					RefreshExpandStates();
+				}
+				RemoveTabFromList(message.tabId);
+				setTimeout(function() {
 					schedule_update_data++;
-					RefreshGUI();
-					RefreshCounters();
-				break;
-				case "tab_attached":
-					AppendTab({tab: message.tab, ParentId: message.ParentId, Append: true});
-					RefreshGUI();
-				break;
-				case "tab_detached":
-					if ($(".tab#"+message.tabId)[0]) {
-						if (opt.promote_children == true) {
-							if (opt.promote_children_in_first_child == true && $("#ch"+message.tabId).children().length > 1) {
-								let FirstChild = $("#ch"+message.tabId).children()[0];
-								$(FirstChild).insertAfter($("#"+message.tabId));
-								$("#ch"+FirstChild.id).append($("#ch"+message.tabId).children());
-							} else {
-								$("#ch"+message.tabId).children().insertAfter($("#"+message.tabId));
+				}, 300);
+				RefreshGUI();
+				return;
+			}
+			if (message.command == "tab_removed") {
+				if (opt.debug) console.log("tab_removed: "+message.tabId);
+				let mTab = document.getElementById(message.tabId);
+				if (mTab != null) {
+					let ctParent = mTab.childNodes[4];
+					if (opt.debug) console.log("tab_removed, promote children: " +opt.promote_children);
+					if (opt.promote_children == true) {
+						if (opt.promote_children_in_first_child == true && ctParent.childNodes.length > 1) {
+							let ctNewParent = document.getElementById(ctParent.firstChild.id).childNodes[4];
+							ctParent.parentNode.parentNode.insertBefore(ctParent.firstChild, ctParent.parentNode);
+							while (ctParent.firstChild) {
+								ctNewParent.appendChild(ctParent.firstChild);
 							}
 						} else {
-							$("#ch"+message.tabId).find(".tab").each(function() {
-								RemoveTabFromList(this.id);
-							});
-						}
-					}
-					RemoveTabFromList(message.tabId);
-					setTimeout(function() {
-						schedule_update_data++;
-					}, 300);
-					RefreshGUI();
-				break;
-				case "tab_removed":
-					if ($(".tab#"+message.tabId)[0]) {
-						if (opt.promote_children == true) {
-							if (opt.promote_children_in_first_child == true && $("#ch"+message.tabId).children().length > 1) {
-								let FirstChild = $("#ch"+message.tabId).children()[0];
-								$(FirstChild).insertAfter($("#"+message.tabId));
-								$("#ch"+FirstChild.id).append($("#ch"+message.tabId).children());
-							} else {
-								$("#ch"+message.tabId).children().insertAfter($("#"+message.tabId));
+							while (ctParent.firstChild) {
+								ctParent.parentNode.parentNode.insertBefore(ctParent.firstChild, ctParent.parentNode);
 							}
-						} else {
-							$("#ch"+message.tabId).find(".tab").each(function() {
-								chrome.tabs.remove(parseInt(this.id));
-							});
 						}
+					} else {
+						document.querySelectorAll("[id='"+message.tabId+"'] .tab").forEach(function(s) {
+							chrome.tabs.remove(parseInt(s.id));
+						});
 					}
 					RemoveTabFromList(message.tabId);
 					RefreshExpandStates();
@@ -170,44 +221,48 @@ function StartChromeListeners() {
 					}, 300);
 					RefreshGUI();
 					RefreshCounters();
-				break;
-				case "tab_activated":
+				}
+				return;
+			}
+			if (message.command == "tab_activated") {
+				SetActiveTab(message.tabId);
+				return;
+			}
+			if (message.command == "tab_attention") {
+				SetAttentionIcon(message.tabId);
+				return;
+			}
+			if (message.command == "tab_updated") {
+				if (message.changeInfo.favIconUrl != undefined || message.changeInfo.url != undefined) {
 					setTimeout(function() {
-						SetActiveTab(message.tabId);
-					}, 200);
-				break;
-				case "tab_attention":
-					SetAttentionIcon(message.tabId);
-				break;
-				case "tab_updated":
-					if (message.changeInfo.favIconUrl != undefined || message.changeInfo.url != undefined) {
-						setTimeout(function() {
-							GetFaviconAndTitle(message.tabId, true);
-						}, 100);
+						GetFaviconAndTitle(message.tabId, true);
+					}, 100);
+				}
+				if (message.changeInfo.title != undefined) {
+					setTimeout(function() {
+						GetFaviconAndTitle(message.tabId, true);
+					}, 1000);
+				}
+				if (message.changeInfo.audible != undefined || message.changeInfo.mutedInfo != undefined) {
+					RefreshMediaIcon(message.tabId);
+				}
+				if (message.changeInfo.discarded != undefined) {
+					RefreshDiscarded(message.tabId);
+				}
+				if (message.changeInfo.pinned != undefined) {
+					let updateTab = document.getElementById(message.tabId);
+					if (updateTab != null && ( (message.tab.pinned && updateTab.classList.contains("tab")) || (!message.tab.pinned && updateTab.classList.contains("pin")) )  ) {
+						SetTabClass(message.tabId, message.tab.pinned);
+						schedule_update_data++;
 					}
-					if (message.changeInfo.title != undefined) {
-						setTimeout(function() {
-							GetFaviconAndTitle(message.tabId, true);
-						}, 1000);
-					}
-					if (message.changeInfo.audible != undefined || message.changeInfo.mutedInfo != undefined) {
-						RefreshMediaIcon(message.tabId);
-					}
-					if (message.changeInfo.discarded != undefined) {
-						RefreshDiscarded(message.tabId);
-					}
-					if (message.changeInfo.pinned != undefined) {
-						if ((message.tab.pinned && $("#"+message.tabId).is(".tab")) || (!message.tab.pinned && $("#"+message.tabId).is(".pin"))) {
-							SetTabClass({ id: message.tabId, pin: message.tab.pinned });
-							schedule_update_data++;
-						}
-						RefreshExpandStates();
-					}
-				break;
-				case "remote_update":
-					RearrangeTreeStructure(message.groups, message.folders, message.tabs);
-					sendResponse(true);
-				break;
+					RefreshExpandStates();
+				}
+				return;
+			}
+			if (message.command == "remote_update") {
+				RearrangeTreeStructure(message.groups, message.folders, message.tabs);
+				sendResponse(true);
+				return;
 			}
 		}
 		

scripts/drag_and_drop.js

@@ -1,412 +0,0 @@
-// 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/
-
-// **********		  TABS EVENTS		  ***************
-
-function GetSelectedFolders() {
-	log("function: GetSelectedFolders");
-	let res = {Folders: {}, FoldersSelected: [], TabsIds: [], TabsIdsParents: []};
-	$("#"+active_group+" .selected_folder").each(function() {
-		res.FoldersSelected.push(this.id);
-		res.Folders[this.id] = Object.assign({}, bgfolders[this.id]);
-		if ($("#cf" + this.id).children().length > 0) {
-			$($("#cf" + this.id).find(".folder")).each(function() {
-				res.Folders[this.id] = Object.assign({}, bgfolders[this.id]);
-			});
-		}				
-		$($(this).find(".tab")).each(function() {
-			res.TabsIds.push(parseInt(this.id));
-			res.TabsIdsParents.push($(this).parent()[0].id);
-		});
-	});
-	log(res);
-	return res;
-}
-function GetSelectedTabs() {
-	log("function: GetSelectedTabs");
-	let res = {TabsIds: [], TabsIdsParents: [], TabsIdsSelected: []};
-	$("#"+active_group+" .selected_tab").each(function() {
-		res.TabsIds.push(parseInt(this.id));
-		res.TabsIdsParents.push($(this).parent()[0].id);
-		res.TabsIdsSelected.push(parseInt(this.id));
-		if ($("#ch" + this.id).children().length > 0) {
-			$($("#ch" + this.id).find(".tab")).each(function() {
-				res.TabsIds.push(parseInt(this.id));
-				res.TabsIdsParents.push($(this).parent()[0].id);
-			});
-		}
-	});
-	log(res);
-	return res;
-}
-function SetDragAndDropEvents() {
-	$(document).on("mouseleave", window, function(event) {
-		MouseHoverOver = "";
-	});
-	$(document).on("dragleave", window, function(event) {
-		MouseHoverOver = "";
-	});
-	$(document).on("dragleave", "body", function(event) {
-		MouseHoverOver = "";
-	});
-	$(document).on("dragover", "#toolbar_groups, #toolbar, #pin_list, .group", function(event) {
-		MouseHoverOver = this.id;
-	});
-	$(document).on("mouseover", "#toolbar_groups, #toolbar, #pin_list, .group", function(event) {
-		MouseHoverOver = this.id;
-	});
-	$(document).bind("drop dragover", function(event) { // PREVENT THE DEFAULT BROWSER DROP ACTION
-		event.preventDefault();
-	});
-	$(document).on("mousedown", ".drop_target", function(event) { // deny drag enter on drop_targets and allow clicks below them
-		$(".drop_target").css({"pointer-events": "none"});
-	});
-	$(document).on("dragenter", ".tab_header, .folder_header", function(event) { // allow drag enter on drop_targets
-		$(".drop_target").css({"pointer-events": "all"});
-	});
-	$(document).on("dragstart", ".tab_header, .folder_header", function(event) { // SET DRAG SOURCE
-		event.stopPropagation();
-		event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
-		event.originalEvent.dataTransfer.setData("text", "");
-		DragAndDrop.DroppedToWindowId = 0;
-		DragAndDrop.ComesFromWindowId = CurrentWindowId;
-		DragAndDrop.Depth = 0;
-		if ($(this)[0].classList[0] == "folder_header") {
-			DragAndDrop.DragNodeClass = "folder";
-			if ($(this).parent().is(":not(.selected_folder)")) {
-				$(".selected_folder").addClass("selected_folder_frozen").removeClass("selected_folder");
-				$(this).parent().addClass("selected_folder_temporarly").addClass("selected_folder");
-			}
-			$(".selected_folder:not(:visible)").addClass("selected_folder_frozen").removeClass("selected_folder");
-			let Folders = GetSelectedFolders();
-			DragAndDrop.TabsIds = Object.assign([], Folders.TabsIds);
-			DragAndDrop.TabsIdsParents = Object.assign([], Folders.TabsIdsParents);
-			DragAndDrop.TabsIdsSelected = Object.assign([], []);
-			DragAndDrop.Folders = Object.assign({}, Folders.Folders);
-			DragAndDrop.FoldersSelected = Object.assign([], Folders.FoldersSelected);
-		}
-		if ($(this)[0].classList[0] == "tab_header") {
-			DragAndDrop.DragNodeClass = "tab";
-			if ($(this).parent().is(".active_tab")) {
-				$(this).parent().addClass("selected_temporarly").addClass("selected_tab");
-			}
-			$(".close").removeClass("show");
-			$(".tab_header_hover").removeClass("tab_header_hover");
-			if ($(this).parent().is(":not(.selected_tab)")) {
-				$(".selected_tab").addClass("selected_frozen").removeClass("selected_tab");
-				$(this).parent().addClass("selected_temporarly").addClass("selected_tab");
-			}
-			$(".selected_tab:not(:visible)").addClass("selected_frozen").removeClass("selected_tab");
-			$("#"+active_group+" .selected_tab").find(".pin, .tab").each(function() {
-				if ($(this).parents(".pin, .tab").length > DragAndDrop.Depth) {
-					DragAndDrop.Depth = $(this).parents(".pin, .tab").length;
-				}
-			});
-			DragAndDrop.Depth -= $(this).parents(".pin, .tab").length-1;
-			if (DragAndDrop.Depth < 0) {
-				DragAndDrop.Depth = 0;
-			}
-			let Tabs = GetSelectedTabs();
-			DragAndDrop.TabsIds = Object.assign([], Tabs.TabsIds);
-			DragAndDrop.TabsIdsParents = Object.assign([], Tabs.TabsIdsParents);
-			DragAndDrop.TabsIdsSelected = Object.assign([], Tabs.TabsIdsSelected);
-			DragAndDrop.Folders = Object.assign({}, {});
-			DragAndDrop.FoldersSelected = Object.assign([], []);
-		}
-		chrome.runtime.sendMessage({
-			command: "drag_drop",
-			DragNodeClass: DragAndDrop.DragNodeClass,
-			TabsIds: DragAndDrop.TabsIds,
-			TabsIdsParents: DragAndDrop.TabsIdsParents,
-			TabsIdsSelected: DragAndDrop.TabsIdsSelected,
-			ComesFromWindowId: CurrentWindowId,
-			Depth: DragAndDrop.Depth,
-			Folders: DragAndDrop.Folders,
-			FoldersSelected: DragAndDrop.FoldersSelected
-		});
-	});
-	$(document).on("dragleave", ".highlighted_drop_target", function(event) { // REMOVE DROP TARGET WHEN DRAG LEAVES
-		$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-	});
-	$(document).on("dragenter", ".pin>.drag_entered_top:not(.highlighted_drop_target), .pin>.drag_entered_bottom:not(.highlighted_drop_target)", function(event) { // SET DROP TARGET WHEN ENTERING PINS
-		event.stopPropagation();
-		if (DragAndDrop.DragNodeClass == "tab") {
-			$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-			$(this).addClass("highlighted_drop_target");
-		}
-	});
-	$(document).on("dragenter", ".tab>.drag_entered_top:not(.highlighted_drop_target), .tab>.drag_entered_bottom:not(.highlighted_drop_target)", function(event) { // SET DROP TARGET WHEN ENTERING TABS
-		event.stopPropagation();
-		if (DragAndDrop.DragNodeClass == "tab") {
-			if ($(".selected_tab:visible").find($(this)).length == 0) {
-				if (opt.max_tree_drag_drop && opt.max_tree_depth >= 0) {
-					if ($(this).parents(".tab").length + DragAndDrop.Depth-1 > opt.max_tree_depth) {
-						return;
-					}
-				}
-				$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-				$(this).addClass("highlighted_drop_target");
-			}
-		}
-	});
-	$(document).on("dragenter", ".tab>.drag_enter_center:not(.highlighted_drop_target)", function(event) {
-		event.stopPropagation();
-		if (DragAndDrop.DragNodeClass == "tab") {
-			if ($(".selected_tab:visible").find($(this)).length == 0 && opt.max_tree_depth != 0) {
-				if (opt.max_tree_drag_drop && opt.max_tree_depth > 0) {
-					if ($(this).parents(".tab").length + DragAndDrop.Depth > opt.max_tree_depth) {
-						return;
-					}
-				}
-				$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-				$(this).addClass("highlighted_drop_target");
-			}
-		}
-	});
-	$(document).on("dragenter", ".folder>.drag_entered_top:not(.highlighted_drop_target), .folder>.drag_entered_bottom:not(.highlighted_drop_target), .folder>.drag_enter_center:not(.highlighted_drop_target)", function(event) { // SET DROP TARGET WHEN ENTERING FOLDERS
-		event.stopPropagation();
-		if (DragAndDrop.DragNodeClass == "folder") {
-			$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-			$(this).addClass("highlighted_drop_target");
-		}
-	});
-	$(document).on("dragenter", ".folder>.drag_enter_center:not(.highlighted_drop_target)", function(event) {
-		event.stopPropagation();
-		if (DragAndDrop.DragNodeClass == "tab") {
-			$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-			$(this).addClass("highlighted_drop_target");
-		}
-	});
-	$(document).on("dragover", "#pin_list, .group, .group_drag_box", function(event) { // SET DROP TARGET, PIN_LIST, TAB_LIST, GROUP OR GROUP_BUTTON
-		if (DragAndDrop.DragNodeClass != "group") {
-			if ($(".highlighted_drop_target").length == 0 && event.target.className == $(this)[0].className) {
-				$(this).addClass("highlighted_drop_target");
-			}
-		}
-	});	
-	$(document).on("dragenter", ".drag_enter_center", function(event) { // TIMER FOR FOR AUTO EXPAND
-		event.stopPropagation();
-		DragAndDrop.timeout = false;
-		setTimeout(function() {
-			DragAndDrop.timeout = true;
-		}, 1800);
-	});
-	$(document).on("dragleave", ".drag_enter_center", function(event) {
-		DragAndDrop.timeout = false;
-	});
-	$(document).on("dragover", ".c > .drag_enter_center", function(event) {
-		if (DragAndDrop.timeout && opt.open_tree_on_hover) {
-			$(this).parent().addClass("o").removeClass("c");
-			DragAndDrop.timeout = false;
-		}
-	});
-	$(document).on("drop", "*", function(event) { // DROP
-		chrome.runtime.sendMessage({command: "dropped", DroppedToWindowId: CurrentWindowId});
-		event.stopPropagation();
-		if (DragAndDrop.ComesFromWindowId == CurrentWindowId) {
-			DropToTarget($(".highlighted_drop_target"));
-		} else {
-			if (Object.keys(DragAndDrop.Folders).length > 0) {
-				for (var folder in DragAndDrop.Folders) {
-					bgfolders[DragAndDrop.Folders[folder].id] = Object.assign({}, DragAndDrop.Folders[folder]);
-				}
-				AppendFolders(bgfolders);
-			}
-			$(".selected_tab").addClass("selected_frozen").removeClass("selected_tab");
-			let target = $(".highlighted_drop_target");
-			let counter = 0;
-			(DragAndDrop.TabsIds).forEach(function(TabId) {
-				chrome.tabs.move(TabId, { windowId: CurrentWindowId, index: -1 }, function(MovedTab) {
-					if (browserId == "F") { // FIRFOX BUG 1398272 - HAVE TO REPLACE ORIGINAL ID
-						if ((DragAndDrop.TabsIdsParents).indexOf("ch"+DragAndDrop.TabsIds[counter]) != -1) {
-							DragAndDrop.TabsIdsParents[(DragAndDrop.TabsIdsParents).indexOf("ch"+DragAndDrop.TabsIds[counter])] = "ch"+MovedTab[0].id;
-						}
-						if ((DragAndDrop.TabsIdsSelected).indexOf(DragAndDrop.TabsIds[counter]) != -1) {
-							DragAndDrop.TabsIdsSelected[(DragAndDrop.TabsIdsSelected).indexOf(DragAndDrop.TabsIds[counter])] = MovedTab[0].id;
-						}
-						DragAndDrop.TabsIds[counter] = MovedTab[0].id;
-					}						
-					counter++;
-					if (counter == DragAndDrop.TabsIds.length) {
-						setTimeout(function() {
-							(DragAndDrop.TabsIdsSelected).forEach(function(selectedTabId) {
-								if ($("#"+selectedTabId)[0]) {
-									$("#"+selectedTabId).addClass("selected_temporarly").addClass("selected_tab");
-								}
-							});
-							for (var tabsIdsIndex = 1; tabsIdsIndex < (DragAndDrop.TabsIds).length; tabsIdsIndex++) {
-								if ($("#"+DragAndDrop.TabsIds[tabsIdsIndex])[0] && $("#"+DragAndDrop.TabsIdsParents[tabsIdsIndex])[0]) {
-									$("#"+DragAndDrop.TabsIdsParents[tabsIdsIndex]).append($("#"+DragAndDrop.TabsIds[tabsIdsIndex]));
-								}
-							}
-							for (var FolderSelectedIndex = 0; FolderSelectedIndex < (DragAndDrop.FoldersSelected).length; FolderSelectedIndex++) {
-								if ($("#"+DragAndDrop.FoldersSelected[FolderSelectedIndex])[0]) {
-									$("#"+DragAndDrop.FoldersSelected[FolderSelectedIndex]).addClass("selected_folder_temporarly").addClass("selected_folder");
-								}
-							}
-							DropToTarget(target);
-						}, 300);
-					}
-				});
-			});
-		}
-		$(".drop_target").css({"pointer-events": "none"});
-	});
-	$(document).on("dragend", ".tab_header, .folder_header", function(event) { // DETACH TABS
-		setTimeout(function() {
-			if (DragAndDrop.ComesFromWindowId == CurrentWindowId && DragAndDrop.DroppedToWindowId == 0) {
-				if (	(browserId == "F" && (event.screenX < event.view.mozInnerScreenX || event.screenX > (event.view.mozInnerScreenX + $(window).width()) || (event.screenY < event.view.mozInnerScreenY || event.screenY > (event.view.mozInnerScreenY + $(window).height()))))
-					||	(browserId != "F" && (event.pageX < 0 || event.pageX > $(window).width() || event.pageY < 0 || event.pageY > $(window).height()))
-				) {
-					if (DragAndDrop.DragNodeClass == "tab") {
-						DetachTabs(DragAndDrop.TabsIds, {});
-					}
-					if (DragAndDrop.DragNodeClass == "folder") {
-						DetachTabs(DragAndDrop.TabsIds, DragAndDrop.Folders);
-						setTimeout(function() {
-							SaveFolders();
-						}, 500);
-					}
-				}
-			}
-		}, 200);
-		$(".drop_target").css({"pointer-events": "none"});
-	});
-	$(document).on("dragstart", ".group_drag_box", function(event) { // DRAGGING GROUPS
-		event.originalEvent.dataTransfer.setData("null", "null");
-		event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
-		DragAndDrop.DragNodeClass = "group";
-		DragAndDrop.DragNode = $(this).parent();
-		$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-	});
-	$(document).on("dragenter", ".group_drag_box", function(event) { // WHEN DRAGGING THE GROUP, MOVE IT UP OR DOWN
-		if (DragAndDrop.DragNodeClass == "group") {
-			if (DragAndDrop.DragNode != undefined && $(this).parent() != DragAndDrop.DragNode) {
-				if ($(this).parent().index() <= DragAndDrop.DragNode.index()) {
-					DragAndDrop.DragNode.insertBefore($(this).parent());
-				} else {
-					if ($(this).parent().index() > DragAndDrop.DragNode.index()) {
-						DragAndDrop.DragNode.insertAfter($(this).parent());
-					}
-				}
-				$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-			}
-		}
-	});
-	$(document).on("dragend", ".group_drag_box", function(event) { // WHEN FINISHED DRAGGING THE GROUP
-		DragAndDrop.DragNode = undefined;
-		UpdateBgGroupsOrder();
-		$(".highlighted_drop_target").removeClass("highlighted_drop_target");
-		RearrangeGroupsLists();
-		$(".drop_target").css({"pointer-events": "none"});
-		if (opt.syncro_tabbar_groups_tabs_order) {
-			schedule_rearrange_tabs++;
-		}
-	});
-}
-function DropToTarget(TargetNode) {
-	if (DragAndDrop.DragNodeClass == "tab") {
-		if (TargetNode.parent().is(".pin")) { // dropped on pin
-			$(".selected_tab").each(function() {
-				SetTabClass({ id: this.id, pin: true });
-				if (TargetNode.is(".drag_entered_top")) {
-					$(this).insertBefore(TargetNode.parent());
-				} else {
-					$(this).insertAfter(TargetNode.parent());
-				}
-			});
-		}
-		if (TargetNode.is("#pin_list")) { // dropped on pin_list
-			$(".selected_tab").each(function() {
-				SetTabClass({ id: this.id, pin: true });
-			});
-			TargetNode.append($(".selected_tab"));
-		}
-		if (TargetNode.parent().is(".tab, .folder")) { // dropped on tab or folder
-			if (TargetNode.parent().is(".selected_tab")) {
-				TargetNode.parent().addClass("highlighted_selected").removeClass("selected_tab");
-			}
-			$(".selected_tab").each(function() {
-				SetTabClass({ id: this.id, pin: false });
-			});
-			if (TargetNode.is(".drag_entered_top")) {
-				$($(".selected_tab").get().reverse()).insertBefore(TargetNode.parent());
-			}
-			if (TargetNode.is(".drag_entered_bottom")) {
-				$($(".selected_tab").get().reverse()).insertAfter(TargetNode.parent());
-			}
-			if (TargetNode.is(".drag_enter_center")) {
-				if (opt.append_child_tab == "bottom") {
-					$("#ch" + TargetNode[0].id.substr(2)).append($($(".selected_tab").get().reverse()));
-				} else {
-					$("#ch" + TargetNode[0].id.substr(2)).prepend($($(".selected_tab").get().reverse()));
-				}
-			}
-		}
-		if (TargetNode.is(".group")) { // dropped on group (tab list)
-			$(".selected_tab").each(function() {
-				SetTabClass({ id: this.id, pin: false });
-			});
-			$("#ch"+TargetNode[0].id).append($($(".selected_tab").get().reverse()));
-		}
-		if (TargetNode.is(".group_drag_box")) { // dropped on group button (group list)
-			$(".selected_tab").each(function() {
-				SetTabClass({ id: this.id, pin: false });
-			});
-			$("#ch"+TargetNode[0].id.substr(1)).append($($(".selected_tab").get().reverse()));
-		}	
-		$(".highlighted_selected").addClass("selected_tab").removeClass("highlighted_selected");
-		$(".selected_frozen").addClass("selected_tab").removeClass("selected_frozen");
-		$(".selected_temporarly").removeClass("selected_tab").removeClass("selected_temporarly");
-	}	
-	if (DragAndDrop.DragNodeClass == "folder") { // dropped on group button (group list)
-		if (TargetNode.is(".group_drag_box")) {
-			$("#cf"+TargetNode[0].id.substr(1)).append($($(".selected_folder").get().reverse()));
-		}	
-		if (TargetNode.parent().is(".folder")) { // dropped on folder
-			if (TargetNode.parent().is(".selected_folder")) {
-				TargetNode.parent().addClass("highlighted_selected").removeClass("selected_folder");
-			}
-			if (TargetNode.is(".drag_entered_top")) {
-				$($(".selected_folder").get().reverse()).insertBefore(TargetNode.parent());
-			}
-			if (TargetNode.is(".drag_entered_bottom")) {
-				$($(".selected_folder").get().reverse()).insertAfter(TargetNode.parent());
-			}
-			if (TargetNode.is(".drag_enter_center")) {
-				if (opt.append_child_tab == "bottom") {
-					$("#cf" + TargetNode[0].id.substr(2)).append($($(".selected_folder").get().reverse()));
-				} else {
-					$("#cf" + TargetNode[0].id.substr(2)).prepend($($(".selected_folder").get().reverse()));
-				}
-			}
-		}
-		$(".highlighted_selected").addClass("selected_folder").removeClass("highlighted_selected");
-		$(".selected_folder_frozen").addClass("selected_folder").removeClass("selected_folder_frozen");
-		$(".selected_folder_temporarly").removeClass("selected_folder").removeClass("selected_folder_temporarly");
-		setTimeout(function() {
-			SaveFolders();
-		}, 300);
-	}
-	RefreshExpandStates();
-	DragAndDrop.timeout = false;
-	RefreshGUI();
-	RefreshCounters();
-	
-	if (opt.syncro_tabbar_tabs_order) {
-		let TTtabsIndexes = $(".pin, .tab").map(function(){return parseInt(this.id);}).toArray();
-		chrome.tabs.move(DragAndDrop.TabsIds, {index: TTtabsIndexes.indexOf(DragAndDrop.TabsIds[0])});
-		setTimeout(function() {
-			schedule_rearrange_tabs++;
-		}, 500);
-	}
-
-	setTimeout(function() {
-		schedule_update_data++;
-	}, 500);
-	TargetNode.removeClass("highlighted_drop_target");
-	$(".tab_header_hover").removeClass("tab_header_hover");
-	$(".folder_header").removeClass("folder_header_hover");
-	$(".dragover_highlight").removeClass("dragover_highlight"); // this is group dragover indicator
-}

scripts/events.js

@@ -0,0 +1,590 @@
+// 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 SetEvents() {
+	let PinList = document.getElementById("pin_list");
+	
+	if (!opt.switch_with_scroll) {
+		PinList.onmousewheel = function(event) {
+			let pinList = document.getElementById("pin_list");
+			let direction = (event.wheelDelta > 0 || event.detail < 0) ? -1 : 1;
+			let speed = 0.1;
+			for (let t = 1; t < 40; t++) {
+				setTimeout(function() {
+					if (t < 30) {
+						speed = speed+0.1; // accelerate
+					} else {
+						speed = speed-0.3; // decelerate
+					}
+					pinList.scrollLeft = pinList.scrollLeft+(direction*speed);
+				}, t);
+			}
+		}
+	}
+	document.oncontextmenu = function(event){
+		if (!event.ctrlKey) {
+			event.preventDefault();
+		}
+	}	
+	document.body.onresize = function(event) {
+		RefreshGUI();
+	}
+	
+	// MOUSE DOWN EVENTS
+	document.body.onmousedown = function(event) {
+		if (event.which == 2) {
+			event.preventDefault();
+		}	
+
+		if (event.which == 1 && event.target.classList.contains("menu_item") == false) {
+			HideMenus();
+		}
+		event.stopImmediatePropagation();
+
+		if (event.which == 1) {
+			RemoveHeadersHoverClass();
+		}
+	
+	}
+	// MOUSE DOWN EVENTS
+	document.body.onmousedown = function(event) {
+
+		if (event.which == 2) {
+			event.preventDefault();
+		}	
+
+		if (event.which == 1 && event.target.classList.contains("menu_item") == false) {
+			HideMenus();
+		}
+		event.stopImmediatePropagation();
+
+		if (event.which == 1) {
+			RemoveHeadersHoverClass();
+		}
+	
+	}
+
+	// CONFIRM EDIT FOLDER
+	document.getElementById("folder_edit_confirm").onmousedown = function(event) {
+		if (event.which == 1) {
+			FolderRenameConfirm();
+		}
+	}
+	
+	// DISCARD EDIT FOLDER
+	document.getElementById("folder_edit_discard").onmousedown = function(event) {
+		if (event.which == 1) {
+			HideRenameDialogs();
+		}
+	}
+
+	// CONFIRM EDIT GROUP
+	document.getElementById("group_edit_confirm").onmousedown = function(event) {
+		if (event.which == 1) {
+			GroupEditConfirm();
+		}
+	}
+	// DISCARD EDIT GROUP
+	document.getElementById("group_edit_discard").onmousedown = function(event) {
+		if (event.which == 1) {
+			HideRenameDialogs();
+		}
+	}
+	document.getElementById("folder_edit_name").onkeydown = function(event) {
+		if (event.keyCode == 13) {
+			FolderRenameConfirm();
+		}
+		if (event.which == 27) {
+			HideRenameDialogs();
+		}
+	}
+	document.getElementById("group_edit_name").onkeydown = function(event) {
+		if (event.keyCode == 13) {
+			GroupEditConfirm();
+		}
+		if (event.which == 27) {
+			HideRenameDialogs();
+		}
+	}
+
+	PinList.onmousedown = function(event) {
+		if (event.which == 1 && event.target == this) {
+			DeselectFolders();
+			DeselectTabs();
+			HideMenus();
+		}
+		if (event.which == 2 && event.target == this) {
+			ActionClickGroup(this, opt.midclick_group);
+		}
+		if (event.which == 3 && event.target == this) {
+			ShowFGlobalMenu(event);
+		}
+	}
+	PinList.ondragenter = function(event) {
+		// PIN,TAB==>PINLIST
+		if (event.target.id == "pin_list" && DragAndDrop.DragNodeClass == "tab") {
+			HighlightNode(this);
+		}
+	}
+	
+	// DOUBLE CLICK ACTION
+	PinList.ondblclick = function(event) {
+		if (event.target == this) {
+			ActionClickGroup(this, opt.dbclick_group);
+		}
+	}
+	
+	
+	// SHOW COLOR PICKER
+	document.getElementById("group_edit_font").onclick = function(event) {
+		if (event.which == 1) {
+			event.stopPropagation();
+			let ColorPicker = document.getElementById("color_picker");
+			ColorPicker.setAttribute("PickColor", this.id);
+			ColorPicker.value = "#"+RGBtoHex(this.style.backgroundColor);
+			ColorPicker.focus();
+			ColorPicker.click();
+		}
+	}
+	document.getElementById("color_picker").oninput = function(event) {
+		document.getElementById(this.getAttribute("PickColor")).style.backgroundColor = this.value;
+	}
+	
+	
+	
+	// CATCH KEYBOARD GLOBAL KEYS
+	document.body.onkeydown = function(event) {
+		// ctrl+a to select all
+		if (event.ctrlKey && event.which == 65) {
+			if (document.querySelector(".pin>.tab_header_hover") != null) {
+				document.querySelectorAll(".pin").forEach(function(s){
+					s.classList.add("selected_tab");
+				});
+			}
+			if (document.querySelector("#"+active_group+" .tab>.tab_header_hover") != null) {
+				let rootId = document.querySelector("#"+active_group+" .tab>.tab_header_hover").parentNode.parentNode.parentNode.id;
+				document.querySelectorAll("#ct"+rootId+">.tab").forEach(function(s){
+					s.classList.add("selected_tab");
+				});
+			}
+		}
+		// ctrl+i to invert selection
+		if (event.ctrlKey && event.which == 73) {
+			if (document.querySelector(".pin>.tab_header_hover") != null) {
+				document.querySelectorAll(".pin").forEach(function(s){
+					s.classList.toggle("selected_tab");
+				});
+			}
+			if (document.querySelector("#"+active_group+" .tab>.tab_header_hover") != null) {
+				let rootId = document.querySelector("#"+active_group+" .tab>.tab_header_hover").parentNode.parentNode.parentNode.id;
+				document.querySelectorAll("#ct"+rootId+">.tab").forEach(function(s){
+					s.classList.toggle("selected_tab");
+				});
+			}
+		}
+		// esc to deselect tabs
+		if (event.which == 27) {
+			DeselectTabs();
+			DeselectFolders();
+		}
+		// alt+g to toggle group bar
+		if (event.altKey && event.which == 71) {
+			GroupsToolbarToggle();
+		}
+		RefreshGUI();
+	}
+
+	
+	document.body.ondragover = function(event) {
+		event.preventDefault();
+		if (event.target.parentNode.classList.contains("c") && event.target.parentNode.classList.contains("dragged_tree") == false) {
+			if (DragAndDrop.timeout && opt.open_tree_on_hover) {
+				event.target.parentNode.classList.add("o");
+				event.target.parentNode.classList.remove("c");
+				DragAndDrop.timeout = false;
+			}
+		}
+	}	
+
+	document.ondrop = function(event) {
+		if (opt.debug) {
+			console.log("drop");
+		}
+		DragAndDrop.DroppedToWindowId = CurrentWindowId;
+		let target = document.querySelector(".highlighted_drop_target");
+		event.preventDefault();
+		if (DragAndDrop.ComesFromWindowId == CurrentWindowId) {
+			let selected = (document.querySelectorAll(".selected_tab").length > 0 ? document.querySelectorAll(".selected_tab") : (document.querySelectorAll(".selected_folder").length > 0 ? document.querySelectorAll(".selected_folder") : document.querySelectorAll(".dragged_group_button")));
+			DropToTarget(target, selected);
+		} else {
+			if (Object.keys(DragAndDrop.Folders).length > 0) {
+				for (var folder in DragAndDrop.Folders) {
+					bgfolders[DragAndDrop.Folders[folder].id] = Object.assign({}, DragAndDrop.Folders[folder]);
+				}
+				AppendFolders(bgfolders);
+			}
+			let currentlySelected = document.querySelectorAll(".selected_tab");
+			currentlySelected.forEach(function(s){
+				s.classList.add("selected_frozen");
+				s.classList.remove("selected_tab");
+				s.classList.remove("selected_last");
+			});
+			let counter = 0;
+			(DragAndDrop.TabsIds).forEach(function(TabId) {
+						if (opt.debug) console.log("DragAndDrop: will now move tab: "+TabId);
+				chrome.tabs.move(TabId, { windowId: CurrentWindowId, index: -1 }, function(MovedTab) {
+					if (browserId == "F") {																																						// MOZILLA BUG 1398272
+						let MovedTabId = MovedTab[0] != undefined ? MovedTab[0].id : (MovedTab.id != undefined ? MovedTab.id : TabId);
+						if ((DragAndDrop.TabsIdsParents).indexOf("ct"+DragAndDrop.TabsIds[counter]) != -1) {																// MOZILLA BUG 1398272
+							DragAndDrop.TabsIdsParents[(DragAndDrop.TabsIdsParents).indexOf("ct"+DragAndDrop.TabsIds[counter])] = "ct"+MovedTabId;				// MOZILLA BUG 1398272
+						}																																												// MOZILLA BUG 1398272
+						if ((DragAndDrop.TabsIdsSelected).indexOf(DragAndDrop.TabsIds[counter]) != -1) {																		// MOZILLA BUG 1398272
+							DragAndDrop.TabsIdsSelected[(DragAndDrop.TabsIdsSelected).indexOf(DragAndDrop.TabsIds[counter])] = MovedTabId;							// MOZILLA BUG 1398272
+						}																																												// MOZILLA BUG 1398272
+						DragAndDrop.TabsIds[counter] = MovedTabId;																														// MOZILLA BUG 1398272
+					}																																													// MOZILLA BUG 1398272				
+					counter++;
+					if (counter == DragAndDrop.TabsIds.length) {
+						console.log(DragAndDrop);
+						setTimeout(function() {
+							(DragAndDrop.TabsIdsSelected).forEach(function(selectedTabId) {
+								let selectedTab = document.getElementById(selectedTabId);
+								if (selectedTab != null) {
+									selectedTab.classList.add("selected_temporarly");
+									selectedTab.classList.add("selected_tab");
+								}
+							});
+							for (var tabsIdsIndex = 1; tabsIdsIndex < (DragAndDrop.TabsIds).length; tabsIdsIndex++) {
+								let DTab = document.getElementById(DragAndDrop.TabsIds[tabsIdsIndex]);
+								let DTabParent = document.getElementById(DragAndDrop.TabsIdsParents[tabsIdsIndex]);
+								if (DTab != null && DTabParent != null) {
+									DTabParent.appendChild(DTab);
+								}
+							}
+							for (var FolderSelectedIndex = 0; FolderSelectedIndex < (DragAndDrop.FoldersSelected).length; FolderSelectedIndex++) {
+								let Folder = document.getElementById(DragAndDrop.FoldersSelected[FolderSelectedIndex]);
+								if (Folder != null) {
+									Folder.classList.add("selected_folder_temporarly");
+									Folder.classList.add("selected_folder");
+								}
+							}
+							let selected = (document.querySelectorAll(".selected_tab").length > 0 ? document.querySelectorAll(".selected_tab") : (document.querySelectorAll(".selected_folder").length > 0 ? document.querySelectorAll(".selected_folder") : document.querySelectorAll(".dragged_group_button")));
+							DropToTarget(target, selected);
+						}, 300);
+					}
+				});
+			});
+		}
+		// event.dataTransfer.setData("folders", test_data);
+		// let folders = event.dataTransfer.getData("folders");
+	}
+	document.ondragleave = function(event) {
+		if (opt.debug) {
+			console.log("global dragleave");
+		}
+		if (event.target.classList) {
+			if (event.target.classList.contains("highlighted_drop_target") || event.target.classList.contains("drop_target")) {
+				event.target.classList.remove("highlighted_drop_target");
+			}
+			if (event.target.classList.contains("drag_enter_center")) {
+				DragAndDrop.timeout = false;
+			}
+		}
+	}
+
+	document.ondragend = function(event) {
+		if (opt.debug) {
+			console.log("document dragend");
+			console.log(event);
+		}
+		
+		
+		// DETACHING TEMPORARILY DISABLED PLEASE USE MENU OR TOOLBAR!
+		
+		// if (DragAndDrop.ComesFromWindowId == CurrentWindowId && DragAndDrop.DroppedToWindowId == 0) {
+			// if ((browserId == "F" && ( event.screenX < event.view.mozInnerScreenX || event.screenX > (event.view.mozInnerScreenX + window.innerWidth) || event.screenY < event.view.mozInnerScreenY || event.screenY > (event.view.mozInnerScreenY + window.innerHeight)))||	(browserId != "F" && (event.pageX < 0 || event.pageX > window.outerWidth || event.pageY < 0 || event.pageY > window.outerHeight))) {
+				// if (opt.debug) console.log("dragged outside sidebar");
+				// if (DragAndDrop.DragNodeClass == "tab") {
+					// Detach(DragAndDrop.TabsIds, {});
+				// }
+				// if (DragAndDrop.DragNodeClass == "folder") {
+					// Detach(DragAndDrop.TabsIds, DragAndDrop.Folders);
+					// setTimeout(function() {
+						// SaveFolders();
+					// }, 500);
+				// }
+			// }
+		// }
+		CleanUpDragClasses();
+		chrome.runtime.sendMessage({command: "dragend"});
+	}
+}
+
+
+function BindTabsSwitchingToMouseWheel(Id) {
+	document.getElementById(Id).onmousewheel = function(event) {
+		event.preventDefault();
+		let prev = event.wheelDelta > 0 || event.detail < 0;
+		if (prev) {
+			ActivatePrevTab();
+		} else {
+			ActivateNextTab();
+		}
+	}
+}
+
+function RemoveHeadersHoverClass() {
+	document.querySelectorAll(".folder_header_hover, .tab_header_hover").forEach(function(s){
+		s.classList.remove("folder_header_hover");
+		s.classList.remove("tab_header_hover");
+	});
+}
+
+function DropToTarget(TargetNode, selected) {
+	if (opt.debug) console.log("function: DropToTarget");
+	if (TargetNode != null && selected.length > 0) {
+		if (DragAndDrop.DragNodeClass == "tab") {
+			if (TargetNode.parentNode.classList.contains("pin")) { // dropped on pin
+				if (TargetNode.classList.contains("drag_entered_top")) {
+					selected.forEach(function(s){
+						SetTabClass(s.id, true);
+						TargetNode.parentNode.parentNode.insertBefore(s, TargetNode.parentNode);
+					});
+				} else {
+					if (TargetNode.parentNode.nextSibling != null) {
+						for (let i = selected.length-1; i >= 0; i--) {
+							SetTabClass(selected[i].id, true);
+							TargetNode.parentNode.parentNode.insertBefore(selected[i], TargetNode.parentNode.nextSibling);
+						}
+					} else {
+						selected.forEach(function(s){
+							SetTabClass(s.id, true);
+							TargetNode.parentNode.parentNode.appendChild(s);
+						});
+					}
+				}
+			}
+			if (TargetNode.id == "pin_list") { // dropped on pin_list
+				document.querySelectorAll(".selected_tab").forEach(function(s){
+					SetTabClass(s.id, true);
+					TargetNode.appendChild(s);
+				});
+			}
+			if (TargetNode.parentNode.classList.contains("tab") || TargetNode.parentNode.classList.contains("folder")) { // dropped on tab or folder
+				selected.forEach(function(s){
+					SetTabClass(s.id, false);
+				});
+				if (TargetNode.classList.contains("drag_entered_top")) {
+					selected.forEach(function(s){
+						TargetNode.parentNode.parentNode.insertBefore(s, TargetNode.parentNode);
+					});
+				}
+				if (TargetNode.classList.contains("drag_entered_bottom")) {
+					if (TargetNode.parentNode.nextSibling != null) {
+						for (let i = selected.length-1; i >= 0; i--) {
+							TargetNode.parentNode.parentNode.insertBefore(selected[i], TargetNode.parentNode.nextSibling);
+						}
+					} else {
+						selected.forEach(function(s){
+							TargetNode.parentNode.parentNode.appendChild(s);
+						});
+					}
+				}
+				if (TargetNode.classList.contains("drag_enter_center")) {
+					let newParent = document.getElementById("ct" + TargetNode.id.substr(2));
+					if (opt.append_child_tab == "bottom") {
+						selected.forEach(function(s){
+							newParent.appendChild(s);
+						});
+					} else {
+						for (let i = selected.length-1; i >= 0; i--) {
+							newParent.prepend(selected[i]);
+						}
+					}
+				}
+			}
+			if (TargetNode.classList.contains("group")) { // dropped on group (tab list)
+				selected.forEach(function(s){
+					SetTabClass(s.id, false);
+				});
+				let newParent = document.getElementById("ct" + TargetNode.id);
+				selected.forEach(function(s){
+					newParent.appendChild(s);
+				});
+			}
+			if (TargetNode.classList.contains("group_drag_box")) { // dropped on group button (group list)
+				selected.forEach(function(s){
+					SetTabClass(s.id, false);
+				});
+
+				let newParent = document.getElementById("ct" + TargetNode.id.substr(1));
+				selected.forEach(function(s){
+					newParent.appendChild(s);
+				});
+			}	
+		}
+		if (DragAndDrop.DragNodeClass == "folder") { // dropped on group button (group list)
+			if (opt.debug) console.log("DragNodeClass is folder");
+			if (TargetNode.classList.contains("group")) { // dropped on group (tab list)
+				let newParent = document.getElementById("cf" + TargetNode.id);
+				selected.forEach(function(s){
+					newParent.appendChild(s);
+				});
+			}
+			if (TargetNode.classList.contains("group_drag_box")) { // dropped on group button (group list)
+				let newParent = document.getElementById("cf" + TargetNode.id.substr(1));
+				selected.forEach(function(s){
+					newParent.appendChild(s);
+				});
+			}	
+			if (TargetNode.parentNode.classList.contains("folder")) { // dropped on folder
+				if (TargetNode.classList.contains("drag_entered_top")) {
+					selected.forEach(function(s){
+						TargetNode.parentNode.parentNode.insertBefore(s, TargetNode.parentNode);
+					});
+				}
+				if (TargetNode.classList.contains("drag_entered_bottom")) {
+					if (TargetNode.parentNode.nextSibling != null) {
+						for(let i = selected.length-1; i >= 0; i--) {
+							TargetNode.parentNode.parentNode.insertBefore(selected[i], TargetNode.parentNode.nextSibling);
+						}
+					} else {
+						selected.forEach(function(s){
+							TargetNode.parentNode.parentNode.appendChild(s);
+						});
+					}
+				}
+				if (TargetNode.classList.contains("drag_enter_center")) {
+					let newParent = document.getElementById("cf" + TargetNode.id.substr(2));
+					if (opt.append_child_tab == "bottom") {
+						selected.forEach(function(s){
+							newParent.appendChild(s);
+						});
+					} else {
+						for (let i = selected.length-1; i >= 0; i--) {
+							newParent.prepend(selected[i]);
+						}
+					}
+				}
+			}
+			setTimeout(function() {
+				SaveFolders();
+			}, 300);
+		}
+
+		if (TargetNode.parentNode.classList.contains("group_button") && DragAndDrop.DragNodeClass == "group") {
+			if (TargetNode.classList.contains("group_button_drag_entered_top")) {
+				TargetNode.parentNode.parentNode.insertBefore(selected[0], TargetNode.parentNode);
+			} else {
+				if (TargetNode.parentNode.nextSibling != null) {
+					TargetNode.parentNode.parentNode.insertBefore(selected[0], TargetNode.parentNode.nextSibling);
+				} else {
+					TargetNode.parentNode.parentNode.appendChild(selected[0]);
+				}
+			}
+			UpdateBgGroupsOrder();
+			RearrangeGroupsLists();
+			if (opt.syncro_tabbar_groups_tabs_order) {
+				schedule_rearrange_tabs++;
+			}		
+		}		
+		
+		if (opt.syncro_tabbar_tabs_order && DragAndDrop.TabsIds[0] != undefined) {
+			let tabIds = Array.prototype.map.call(document.querySelectorAll(".pin, .tab"), function(s){
+				return parseInt(s.id);
+			});
+			if (opt.debug) console.log("After DropToTarget, will Syncro tabbar tabs order, TabsIds array is:");
+			if (opt.debug) console.log(DragAndDrop.TabsIds);
+			chrome.tabs.move(DragAndDrop.TabsIds, {index: tabIds.indexOf(DragAndDrop.TabsIds[0])});
+			setTimeout(function() {
+				schedule_rearrange_tabs++;
+			}, 500);
+		}
+	}
+	DragAndDrop.timeout = false;
+	setTimeout(function() {
+		EmptyDragAndDrop();
+		RefreshExpandStates();
+		RefreshCounters();
+		RefreshGUI();
+		schedule_update_data++;
+	}, 100);
+	
+	CleanUpDragClasses();
+	
+}
+
+function DropTargetsFront(ExcludeNode, tabs, groups) {
+	if (ExcludeNode == undefined) {
+		ExcludeNode = {parentNode: {childNodes: [{id: "x"}, {id: "x"}, {id: "x"}], id: "x"}};
+	}
+	if (tabs) {
+		document.querySelectorAll("#"+active_group+" .drag_enter_center:not(#"+ExcludeNode.parentNode.childNodes[0].id+")").forEach(function(s){
+			s.style.zIndex = 9911;
+		});
+		document.querySelectorAll("#"+active_group+" .drag_enter_center:not(#"+ExcludeNode.parentNode.childNodes[0].id+")").forEach(function(s){
+			s.style.zIndex = 9911;
+		});
+		document.querySelectorAll(".drag_entered_top:not(#"+ExcludeNode.parentNode.childNodes[1].id+")").forEach(function(s){
+			s.style.zIndex = 9915;
+		});
+		document.querySelectorAll(".drag_entered_bottom:not(#"+ExcludeNode.parentNode.childNodes[2].id+")").forEach(function(s){
+			s.style.zIndex = 9920;
+		});
+	}
+	if (groups) {
+		document.querySelectorAll(".group_button:not(#"+ExcludeNode.parentNode.id+") .group_drag_box").forEach(function(s){
+			s.style.zIndex = -1;
+		});
+	}				
+}
+
+
+function CleanUpDragClasses() {
+	document.querySelectorAll(".highlighted_drop_target").forEach(function(s){
+		s.classList.remove("highlighted_drop_target");
+	});
+	document.querySelectorAll(".highlighted_selected").forEach(function(s){
+		s.classList.add("selected_tab");
+		s.classList.remove("highlighted_selected");
+	});
+	document.querySelectorAll(".selected_frozen").forEach(function(s){
+		s.classList.add("selected_tab");
+		s.classList.remove("selected_frozen");
+	});
+	document.querySelectorAll(".selected_temporarly").forEach(function(s){
+		s.classList.remove("selected_tab");
+		s.classList.remove("selected_temporarly");
+	});
+	document.querySelectorAll(".highlighted_selected").forEach(function(s){
+		s.classList.add("selected_folder");
+		s.classList.remove("highlighted_selected");
+	});
+	document.querySelectorAll(".selected_folder_frozen").forEach(function(s){
+		s.classList.add("selected_folder");
+		s.classList.remove("selected_folder_frozen");
+	});
+	document.querySelectorAll(".selected_folder_temporarly").forEach(function(s){
+		s.classList.remove("selected_folder");
+		s.classList.remove("selected_folder_temporarly");
+	});
+	document.querySelectorAll(".tab_header_hover").forEach(function(s){
+		s.classList.remove("tab_header_hover");
+	});
+	document.querySelectorAll(".folder_header").forEach(function(s){
+		s.classList.remove("folder_header_hover");
+	});
+	document.querySelectorAll(".dragged_group_button").forEach(function(s){ // dragged group button
+		s.classList.remove("dragged_group_button");
+	});
+	document.querySelectorAll(".dragged_tree").forEach(function(s){
+		s.classList.remove("dragged_tree");
+	});
+	document.querySelectorAll(".dragged_selected").forEach(function(s){
+		s.classList.remove("dragged_selected");
+	});
+	document.querySelectorAll(".drop_target").forEach(function(s){
+		s.style.zIndex = "";
+	});
+}

scripts/folders.js

@@ -2,194 +2,413 @@
 // 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 AddNewFolder(p) {
+function AddNewFolder(ParentId, Name, Index, ExpandState) {
 	var newId = GenerateNewFolderID();
-	bgfolders[newId] = { id: newId, parent: (p.ParentId ? p.ParentId : ""), index: (p.index ? p.index : 0), name: (p.name ? p.name : caption_noname_group), expand: (p.expand ? p.expand : "n") };
-	AppendFolder({id: newId, ParentId: (p.ParentId ? p.ParentId : ""), name: caption_noname_group});
+	bgfolders[newId] = { id: newId, parent: (ParentId ? ParentId : ""), index: (Index ? Index : 0), name: (Name ? Name : caption_noname_group), expand: (ExpandState ? ExpandState : "") };
+	AppendFolder(newId, caption_noname_group, (ParentId ? ParentId : ""), undefined, true);
 	SaveFolders();
 	RefreshCounters();
+	RefreshExpandStates();
 	return newId;
 }
-function AppendFolder(param) {
-	if ($("#"+param.id).length == 0) {
-		var fd = document.createElement("div"); fd.className = "folder ";  if (param.expand) { fd.className += param.expand }  fd.id = param.id;// FOLDER
-		var dc = document.createElement("div"); dc.className = "drop_target drag_enter_center"; dc.id = "dc"+param.id; fd.appendChild(dc); // DROP TARGET CENTER
-		var dt = document.createElement("div"); dt.className = "drop_target drag_entered_top"; dt.id = "du"+param.id; fd.appendChild(dt); // DROP TARGET TOP
-		var db = document.createElement("div"); db.className = "drop_target drag_entered_bottom"; db.id = "dd"+param.id; fd.appendChild(db); // DROP TARGET BOTTOM
-		var fh = document.createElement("div"); fh.className = opt.always_show_close ? "folder_header close_show" : "folder_header"; fh.id = "folder_header"+param.id; fh.draggable = true; fd.appendChild(fh); // HEADER
-		var ex = document.createElement("div"); ex.className = "folder_icon"; ex.id = "fop"+param.id; fh.appendChild(ex);
-		var ft = document.createElement("div"); ft.className = "folder_title"; ft.id = "folder_title"+param.id; ft.textContent = param.name; fh.appendChild(ft); // TITLE
-		var cf = document.createElement("div"); cf.className = "children"; cf.id = "cf"+param.id; fd.appendChild(cf);
-		var ch = document.createElement("div"); ch.className = "children"; ch.id = "ch"+param.id; fd.appendChild(ch);
+
+function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
+	if (document.getElementById(folderId) == null) {
+		var fd = document.createElement("div"); fd.className = "folder ";  if (Expand) { fd.className += Expand }  fd.id = folderId;// FOLDER
+		var dc = document.createElement("div"); dc.className = "drop_target drag_enter_center"; dc.id = "dc"+folderId; fd.appendChild(dc); // DROP TARGET CENTER
+		var du = document.createElement("div"); du.className = "drop_target drag_entered_top"; du.id = "du"+folderId; fd.appendChild(du); // DROP TARGET TOP
+		var dd = document.createElement("div"); dd.className = "drop_target drag_entered_bottom"; dd.id = "dd"+folderId; fd.appendChild(dd); // DROP TARGET BOTTOM
+		var fh = document.createElement("div"); fh.className = (opt.always_show_close && !opt.never_show_close) ? "folder_header close_show" : "folder_header"; fh.id = "folder_header"+folderId; if (SetEvents) {fh.draggable = true;} fd.appendChild(fh); // HEADER
+		var ex = document.createElement("div"); ex.className = "folder_icon"; ex.id = "fop"+folderId; fh.appendChild(ex);
+		var ft = document.createElement("div"); ft.className = "folder_title"; ft.id = "folder_title"+folderId; ft.textContent = Name; fh.appendChild(ft); // TITLE
+		var cf = document.createElement("div"); cf.className = "children_folders"; cf.id = "cf"+folderId; fd.appendChild(cf);
+		var ct = document.createElement("div"); ct.className = "children_tabs"; ct.id = "ct"+folderId; fd.appendChild(ct);
 		if (!opt.never_show_close) {
-			var cl = document.createElement("div"); cl.className = "close"; cl.id = "close"+param.id; fh.appendChild(cl); // CLOSE BUTTON
-			var ci = document.createElement("div"); ci.className = "close_img"; ci.id = "close_img"+param.id; cl.appendChild(ci);
+			var cl = document.createElement("div"); cl.className = "close"; cl.id = "close"+folderId; fh.appendChild(cl); // CLOSE BUTTON
+			var ci = document.createElement("div"); ci.className = "close_img"; ci.id = "close_img"+folderId; cl.appendChild(ci);
 		}
-		if (param.ParentId == "" || param.ParentId == undefined || $("#cf"+param.ParentId).length == 0) {
-			$("#cf"+active_group).append(fd);
+		
+		if (SetEvents) {
+			ct.ondblclick = function(event) {
+				if (event.target == this) {
+					ActionClickGroup(this.parentNode, opt.dbclick_group);
+				}
+			}
+			cf.ondblclick = function(event) {
+				if (event.target == this) {
+					ActionClickGroup(this.parentNode, opt.dbclick_group);
+				}
+			}
+
+			cf.onmousedown = function(event) {
+				if (event.target == this) {
+					if (event.which == 1) {
+						DeselectFolders();
+						DeselectTabs();
+					}
+					if (event.which == 2 && event.target == this) {
+						event.stopImmediatePropagation();
+						ActionClickGroup(this.parentNode, opt.midclick_group);
+					}
+					if (event.which == 3) {
+						ShowFGlobalMenu(event);
+					}
+				}
+			}
+			ct.onmousedown = function(event) {
+				if (event.target == this) {
+					if (event.which == 1) {
+						DeselectFolders();
+						DeselectTabs();
+					}
+					if (event.which == 2 && event.target == this) {
+						event.stopImmediatePropagation();
+						ActionClickGroup(this.parentNode, opt.midclick_group);
+					}
+					if (event.which == 3) {
+						ShowFGlobalMenu(event);
+					}
+				}
+			}
+
+			if (!opt.never_show_close) {
+				cl.onmousedown = function(event) {
+					event.stopImmediatePropagation();
+					if (event.which != 3) {
+						RemoveFolder(this.parentNode.parentNode.id);
+					}
+				}
+				cl.onmouseenter = function(event) {
+					this.classList.add("close_hover");
+				}
+				cl.onmouseleave = function(event) {
+					this.classList.remove("close_hover");
+				}
+			}
+			fh.onmousedown = function(event) {
+				if (document.getElementById("main_menu").style.top != "-1000px") {
+					HideMenus();
+				}
+				// SELECT FOLDER
+				if (event.which == 1 && !event.shiftKey) {
+					DeselectTabs();
+					if (!event.ctrlKey) {
+						DeselectFolders();
+					}
+					event.target.parentNode.parentNode.classList.toggle("selected_folder");
+				}
+				if (event.which == 2) {
+					event.preventDefault();
+					ActionClickFolder(this.parentNode, opt.midclick_folder);
+				}
+				// SHOW FOLDER MENU
+				if (event.which == 3) {
+					ShowFolderMenu(this.parentNode, event);
+				}
+			}
+			// edit folder
+			fh.ondblclick = function(event) {
+				if (event.which == 1 && !event.shiftKey && !event.ctrlKey && (event.target.classList.contains("folder_title") || event.target.classList.contains("folder_header"))) {
+				// if (event.which == 1) {
+					// ShowRenameFolderDialog(this.parentNode.id);
+					ActionClickFolder(this.parentNode, opt.dbclick_folder);
+				}
+			}
+			fh.ondragstart = function(event) { // DRAG START
+				event.stopPropagation();
+				event.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+				event.dataTransfer.setData("text", "");
+				// event.dataTransfer.setData("TTSourceWindowId", CurrentWindowId);
+				CleanUpDragClasses();
+				EmptyDragAndDrop();
+			
+				if (opt.debug) console.log("started dragging folder");
+				if (opt.debug) console.log(DragAndDrop.DragNodeClass);
+				
+				DropTargetsFront(this, true, false);
+
+				if (this.parentNode.classList.contains("selected_folder") == false) {
+					if (opt.debug) console.log(this.parentNode.classList);
+					document.querySelectorAll(".selected_folder").forEach(function(s){
+						s.classList.add("selected_folder_frozen");
+						s.classList.remove("selected_folder");
+					});
+					this.parentNode.classList.add("selected_folder_temporarly");
+					this.parentNode.classList.add("selected_folder");
+				} else {
+					document.querySelectorAll(".group:not(#"+active_group+") .selected_folder").forEach(function(s){
+						s.classList.add("selected_folder_frozen");
+						s.classList.remove("selected_folder");
+					});
+				}
+				RemoveHeadersHoverClass();
+				// let test_data = [];
+				document.querySelectorAll("[id='"+this.parentNode.id+"'], [id='"+this.parentNode.id+"'] .folder, [id='"+this.parentNode.id+"'] .tab").forEach(function(s){
+					s.classList.add("dragged_tree");
+				});
+				document.querySelectorAll(".selected_tab, .selected_tab .tab, .selected_folder, .selected_folder .folder").forEach(function(s){
+					s.classList.add("dragged_selected");
+					// test_data.push(s.id);
+				});
+				let Folders = GetSelectedFolders();
+				
+				document.querySelectorAll("[id='"+this.parentNode.id+"'], [id='"+this.parentNode.id+"'] .folder, [id='"+this.parentNode.id+"'] .tab").forEach(function(s){
+					s.classList.add("dragged_tree");
+				});
+				document.querySelectorAll(".selected_tab, .selected_tab .tab, .selected_folder, .selected_folder .folder").forEach(function(s){
+					s.classList.add("dragged_selected");
+				});
+
+				if (opt.max_tree_drag_drop_folders) {
+					document.querySelectorAll(".dragged_tree .folder").forEach(function(s){
+						let parents = GetParentsByClass(s.parentNode, "dragged_tree");
+						if (parents.length > DragAndDrop.Depth) {
+							DragAndDrop.Depth = parents.length;
+						}
+					});
+				} else {
+					DragAndDrop.Depth = -1;
+				}
+					
+				DragAndDrop.DragNodeClass = "folder";
+				DragAndDrop.TabsIds = Object.assign([], Folders.TabsIds);
+				DragAndDrop.TabsIdsParents = Object.assign([], Folders.TabsIdsParents);
+				DragAndDrop.Folders = Object.assign({}, Folders.Folders);
+				DragAndDrop.FoldersSelected = Object.assign([], Folders.FoldersSelected);
+				DragAndDrop.ComesFromWindowId = CurrentWindowId;
+				
+				chrome.runtime.sendMessage({
+					command: "drag_drop",
+					DragNodeClass: DragAndDrop.DragNodeClass,
+					TabsIds: DragAndDrop.TabsIds,
+					TabsIdsParents: DragAndDrop.TabsIdsParents,
+					TabsIdsSelected: DragAndDrop.TabsIdsSelected,
+					ComesFromWindowId: CurrentWindowId,
+					Depth: DragAndDrop.Depth,
+					Folders: DragAndDrop.Folders,
+					FoldersSelected: DragAndDrop.FoldersSelected
+				});
+			}
+			fh.ondragenter = function(event) {
+				this.classList.remove("folder_header_hover");
+			}		
+			fh.onmouseover = function(event) {
+				this.classList.add("folder_header_hover");
+				if (opt.never_show_close == false && opt.always_show_close == false) {
+					this.classList.add("close_show");
+				}
+			}
+			fh.onmouseleave = function(event) {
+				this.classList.remove("folder_header_hover");
+				if (opt.never_show_close == false && opt.always_show_close == false) {
+					this.classList.remove("close_show");
+				}
+			}
+			dc.ondragenter = function(event) {
+				// DRAGENTER PIN,TAB,FOLDER==>DROP ZONES
+				DragAndDrop.timeout = false;
+				setTimeout(function() {
+					DragAndDrop.timeout = true;
+				}, 1000);
+				if (DragAndDrop.DragNodeClass == "tab" || DragAndDrop.DragNodeClass == "folder") {
+					HighlightDragEnter(this, 0, "folder");
+				}
+			}
+			du.ondragenter = function(event) {
+				// FOLDER==>FOLDER
+				if (DragAndDrop.DragNodeClass == "tab" || DragAndDrop.DragNodeClass == "folder") {
+					HighlightDragEnter(this, 1, "folder");
+				}
+			}
+			dd.ondragenter = function(event) {
+				// FOLDER==>FOLDER
+				if (DragAndDrop.DragNodeClass == "tab" || DragAndDrop.DragNodeClass == "folder") {
+					HighlightDragEnter(this, 1, "folder");
+				}
+			}
+			ex.onmousedown = function(event) {
+				if (document.getElementById("main_menu").style.top != "-1000px") {
+					HideMenus();
+				}
+				// EXPAND/COLLAPSE FOLDER
+				if (event.which == 1 && !event.shiftKey && !event.ctrlKey) {
+					event.stopPropagation();
+					EventExpandBox(this.parentNode.parentNode);
+					RefreshExpandStates();
+					RefreshCounters();
+				}
+			}
+		}	
+		if (ParentId == "" || ParentId == undefined || document.getElementById("cf"+ParentId) == null) {
+			document.getElementById("cf"+active_group).appendChild(fd);
 		} else {
-			$("#cf"+param.ParentId).append(fd);
+			document.getElementById("cf"+ParentId).appendChild(fd);
 		}
 	}
 }
+
 function GenerateNewFolderID() {
 	var newID = "f_"+GenerateRandomID();
-	if ($("#"+newID)[0]) {
-		GenerateNewFolderID();
-	} else {
+	if (document.getElementById(newID) == null) {
 		return newID;
+	} else {
+		GenerateNewFolderID();
 	}
 }
+
 function AppendFolders(Folders) {
 	for (var folderId in Folders) {
-		AppendFolder({id: folderId, ParentId: Folders[folderId].parent, name: Folders[folderId].name, expand: Folders[folderId].expand});
+		AppendFolder(folderId, Folders[folderId].name, Folders[folderId].parent, Folders[folderId].expand, true);
 	}
-	// APPEND FOLDERS TO PARENTS
 	for (var folderId in Folders) {
-		if ($("#"+folderId)[0] && Folders[folderId].parent != $("#"+folderId).parent().parent()[0].id) {
-			$("#cf"+Folders[folderId].parent).append($("#"+folderId));
+		let f = document.getElementById(folderId);
+		let parent = document.getElementById("cf"+Folders[folderId].parent);
+		if (f != null && parent != null && Folders[folderId].parent != f.parentNode.parentNode.id) {
+			parent.appendChild(f);
 		}
 	}
 }
+
 function SaveFolders() {
-	$(".folder").each(function() {
-		bgfolders[this.id].parent = $(this).parent().parent()[0].id;
-		bgfolders[this.id].index = $(this).index();
-		bgfolders[this.id].expand = ($(this).is(".n") ? "n" : ($(this).is(".c") ? "c" : "o"));
+	document.querySelectorAll(".folder").forEach(function(s){
+		bgfolders[s.id].parent = s.parentNode.parentNode.id;
+		bgfolders[s.id].index = Array.from(s.parentNode.children).indexOf(s);
+		bgfolders[s.id].expand = (s.classList.contains("c") ? "c" : (s.classList.contains("o") ? "o" : ""));
 	});
 	chrome.runtime.sendMessage({command: "save_folders", folders: bgfolders, windowId: CurrentWindowId});
 }
+
 function RearrangeFolders(first_loop) {
-	$(".folder").each(function() {
-		if (bgfolders[this.id] && $(this).parent().children().eq(bgfolders[this.id].index)[0]) {
-			if ($(this).index() > bgfolders[this.id].index) {
-				$(this).insertBefore($(this).parent().children().eq(bgfolders[this.id].index));
+	document.querySelectorAll(".folder").forEach(function(s){
+		if (bgfolders[s.id] && s.parentNode.childNodes[bgfolders[s.id].index]) {
+			let Ind = Array.from(s.parentNode.children).indexOf(s);
+			if (Ind > bgfolders[s.id].index) {
+				s.parentNode.childNodes[bgfolders[s.id].index].parentNode.insertBefore(s, s.parentNode.childNodes[bgfolders[s.id].index]);
 			} else {
-				$(this).insertAfter($(this).parent().children().eq(bgfolders[this.id].index));
+				if (s.parentNode.childNodes[bgfolders[s.id].index].nextSibling != null) {
+					s.parentNode.childNodes[bgfolders[s.id].index].parentNode.insertBefore(s, s.parentNode.childNodes[bgfolders[s.id].index].nextSibling);
+				} else {
+					s.parentNode.childNodes[bgfolders[s.id].index].parentNode.appendChild(s);
+				}				
 			}
 		}
-		if (bgfolders[this.id] && $(this).index() != bgfolders[this.id].index && first_loop) {
+		let newInd = Array.from(s.parentNode.children).indexOf(s);
+		if (bgfolders[s.id] && newInd != bgfolders[s.id].index && first_loop) {
 			RearrangeFolders(false);
 		}
 	});
 }
+
 function RemoveFolder(FolderId) {
-	if ($("#"+FolderId)[0]) {
+	let folder = document.getElementById(FolderId);
+	if (folder != null) {
+		let CF = folder.childNodes[4]; // CF stands for DIV with children folders
+		let CT = folder.childNodes[5]; // CT stands for DIV with children tabs
 		if (opt.promote_children == true) {
-			if (opt.promote_children_in_first_child == true && $("#cf"+FolderId).children().length > 0) {
-				let FirstChild = $("#cf"+FolderId).children()[0];
-				$(FirstChild).insertAfter($("#"+FolderId));
-				$("#cf"+FirstChild.id).append($("#cf"+FolderId).children());
-				if ($("#ch"+FolderId).children().length > 0) {
-					$("#ch"+FirstChild.id).append($("#ch"+FolderId).children());
+			if (opt.promote_children_in_first_child == true && CF.children.length > 0) {
+				let FirstFolderChild = CF.firstChild;
+				folder.parentNode.insertBefore(FirstFolderChild, folder);
+				let NewCF = FirstFolderChild.childNodes[4];
+				while (CF.firstChild) {
+					NewCF.appendChild(CF.firstChild);
+				}
+				if (CT.childNodes.length > 0) {
+					let NewCT = FirstFolderChild.childNodes[5];
+					while (CT.firstChild) {
+						NewCT.appendChild(CT.firstChild);
+					}
 				}
 			} else {
-				$("#ch"+($("#"+FolderId).parent().parent()[0].id)).append($("#ch"+FolderId).children());
-				$("#cf"+FolderId).children().insertAfter($("#"+FolderId));
+				let NewCT = document.getElementById("ct"+folder.parentNode.parentNode.id);
+				// let NewCT = folder.parentNode.parentNode.childNodes[5];
+				while (CT.firstChild) {
+					NewCT.appendChild(CT.firstChild);
+				}
+				while (CF.lastChild) {
+					folder.parentNode.insertBefore(CF.lastChild, folder);
+				}
 			}
 		} else {
-			$("#"+FolderId+" .tab").each(function() {
-				chrome.tabs.remove(parseInt(this.id), null);
+			document.querySelectorAll("#"+FolderId+" .tab").forEach(function(s){
+				chrome.tabs.remove(parseInt(s.id), null);
 			});
-			$("#"+FolderId+" .folder").each(function() {
-				delete bgfolders[this.id];
+
+			document.querySelectorAll("#"+FolderId+" .folder").forEach(function(s){
+				delete bgfolders[s.id];
 			});
 		}
-		$("#"+FolderId).remove();
+		folder.parentNode.removeChild(folder);	
 		delete bgfolders[FolderId];
 		RefreshExpandStates();
 		chrome.runtime.sendMessage({command: "save_folders", folders: bgfolders, windowId: CurrentWindowId});
 	}
 }
+
 function SetActiveFolder(FolderId) {
-	if ($("#"+FolderId).length > 0) {
-		$(".selected_folder").removeClass("selected_folder");
-		$("#"+FolderId).addClass("selected_folder");
+	let folder = document.getElementById(FolderId);
+	if (folder != null) {
+		document.querySelectorAll(".selected_folder").forEach(function(s){
+			s.classList.remove("selected_folder");
+		});
+		folder.classList.add("selected_folder");
 	}
 }
-// Rename folder popup
-function ShowRenameFolderDialog(FolderId) {
-	$("#folder_edit_name")[0].value = bgfolders[FolderId].name;
-	$("#folder_edit_name").data("FolderId", FolderId);
-	$("#folder_edit").css({"display": "block", "top": $("#toolbar_groups").offset().top + 8, "left": 22});
+
+function ShowRenameFolderDialog(FolderId) { // Rename folder popup
+	HideRenameDialogs();
+	if (bgfolders[FolderId]) {
+		let name = document.getElementById("folder_edit_name");
+		name.value = bgfolders[FolderId].name;
+		let folderEditDialog = document.getElementById("folder_edit");
+		folderEditDialog.setAttribute("FolderId", FolderId);
+		folderEditDialog.style.display = "block";
+		folderEditDialog.style.top = document.getElementById("toolbar").getBoundingClientRect().height + document.getElementById("pin_list").getBoundingClientRect().height + 8 + "px";
+		folderEditDialog.style.left = "22px";
+		setTimeout(function(){
+			document.getElementById("folder_edit_name").select();
+		},5);
+	}
 }
-// when pressed OK in folder popup
-function FolderRenameConfirm() {
-	$("#folder_edit_name")[0].value = $("#folder_edit_name")[0].value.replace(/[\f\n\r\v\t\<\>\+\-\(\)\.\,\;\:\~\/\|\?\@\!\"\'\£\$\%\&\^\#\=\*\[\]]?/gi, "");
-	bgfolders[$("#folder_edit_name").data("FolderId")].name = $("#folder_edit_name")[0].value;
-	$("#folder_title"+$("#folder_edit_name").data("FolderId"))[0].innerText = $("#folder_edit_name")[0].value;
-	$(".edit_dialog").hide(0);
+
+function FolderRenameConfirm() { // when pressed OK in folder popup
+	let name = document.getElementById("folder_edit_name");
+	let FolderId = document.getElementById("folder_edit").getAttribute("FolderId");
+	name.value = name.value.replace(/[\f\n\r\v\t\<\>\+\-\(\)\.\,\;\:\~\/\|\?\@\!\"\'\£\$\%\&\^\#\=\*\[\]]?/gi, "");
+	bgfolders[FolderId].name = name.value;
+	document.getElementById("folder_title" + FolderId).textContent = name.value;
+	HideRenameDialogs();
 	chrome.runtime.sendMessage({command: "save_folders", folders: bgfolders, windowId: CurrentWindowId});
 	RefreshCounters();
 }
-function SetFolderEvents() {
-	// EXPAND BOX - EXPAND / COLLAPSE
-	$(document).on("click", ".folder_icon", function(event) {
-		event.stopPropagation();
-		if (event.button == 0) {
-			if ($(this).parent().parent().is(".o")) {
-				$(this).parent().parent().removeClass("o").addClass("c");
-			} else {
-				if ($(this).parent().parent().is(".c")) {
-					$(this).parent().parent().removeClass("c").addClass("o");
-				}
-			}
-			RefreshExpandStates();
-			RefreshCounters();
-			SaveFolders();
-		}
-	});
-	// SINGLE CLICK TO ACTIVATE FOLDER
-	$(document).on("click", ".folder_header", function(event) {
-		event.stopPropagation();
-		if (event.button == 0 && !event.shiftKey) {
-			$("#"+active_group+" .tab").removeClass("selected_tab");
-			if (!event.ctrlKey) {
-				$(".selected_folder:not(#"+($(this).parent()[0].id)+")").removeClass("selected_folder");
-			}
-			// SetActiveFolder();
-			$(this).parent().toggleClass("selected_folder");
-		}
-	});
-	// CLOSE TAB/PIN
-	$(document).on("mousedown", ".folder_header", function(event) {
-		if ((event.button == 1 && opt.close_with_MMB == true) || (event.button == 0 && $(event.target).is(".close, .close_img"))) {
-			RemoveFolder($(this).parent()[0].id);
-		}
-		if (event.button == 2) {
-			event.stopPropagation();
-			ShowFolderMenu($(this).parent(), event);
-		}
-	});
-	// edit folder dialog box
-	$(document).on("mousedown", "#folder_edit_discard", function(event) {
-		$(".edit_dialog").hide(0);
-	});
-	$("#folder_edit_name").keyup(function(e) {
-		if (e.keyCode == 13) {
-			FolderRenameConfirm();
-		}
-	});
-	$(document).on("mousedown", "#folder_edit_confirm", function(event) {
-		FolderRenameConfirm();
-	});
-	// edit folder
-	$(document).on("dblclick", ".folder_title", function(event) {
-		if (event.button == 0) {
-			ShowRenameFolderDialog($(this).parent().parent()[0].id);
-		}
-	});	
-	$(document).on("mouseover", ".folder_header", function(event) {
-		$(this).addClass("folder_header_hover");
-		if (opt.always_show_close == false) {
-			$(this).addClass("close_show");
-		}
-	});
-	$(document).on("mouseleave", ".folder_header", function(event) {
-		$(this).removeClass("folder_header_hover");
-		if (opt.always_show_close == false) {
-			$(this).removeClass("close_show");
-		}
+
+function DeselectFolders() {
+	document.querySelectorAll("#"+active_group+" .selected_folder").forEach(function(s){
+		s.classList.remove("selected_folder");
 	});
 }
+
+function ActionClickFolder(FolderNode, bgOption) {
+	if (bgOption == "rename_folder") {
+		ShowRenameFolderDialog(FolderNode.id);
+	}
+	if (bgOption == "new_folder") {
+		AddNewFolder(FolderNode.id, undefined, undefined, undefined);
+	}
+	if (bgOption == "new_tab") {
+		OpenNewTab(false, FolderNode.id);
+	}
+	if (bgOption == "expand_collapse") {
+		EventExpandBox(FolderNode);
+	}
+	if (bgOption == "close_folder") {
+		RemoveFolder(FolderNode.id);
+	}
+	if (bgOption == "unload_folder") {
+		let tabsArr = [];
+		document.querySelectorAll("#"+FolderNode.id+" .tab").forEach(function(s){
+			tabsArr.push(parseInt(s.id));
+		});
+		DiscardTabs(tabsArr);
+	}
+}
+

scripts/global.js

@@ -11,25 +11,24 @@ var schedule_rearrange_tabs = 0;
 var schedule_rearrange_reverse = false;
 var windows = {};
 var tabs = {};
-var MouseHoverOver = "";
+var tt_ids = {};
 var DragAndDrop = {
 	timeout: false,
-	DragNode: undefined,
+	Depth: 0,
+	// DragNode: undefined,
 	DragNodeClass: "",
 	TabsIds: [],
 	TabsIdsParents: [],
 	TabsIdsSelected: [],
 	Folders: {},
 	FoldersSelected: [],
-	ComesFromWindowId: 0,
-	DroppedToWindowId: 0,
-	Depth: 0
+	ComesFromWindowId: undefined,
+	DroppedToWindowId: 0
 };
-var menuItemId = 0;
+var menuItemNode;
 var CurrentWindowId = 0;
 var SearchIndex = 0;
 var active_group = "tab_list";
-var PickColor = "";
 var opt = {};
 var browserId = navigator.userAgent.match("Opera") !== null ? "O" : ( navigator.userAgent.match("Vivaldi") !== null ? "V" : (navigator.userAgent.match("Firefox") !== null ? "F" : "C" )  );
 var bgtabs = {};
@@ -40,7 +39,7 @@ var caption_loading = chrome.i18n.getMessage("caption_loading");
 var caption_searchbox = chrome.i18n.getMessage("caption_searchbox");
 var caption_ungrouped_group = chrome.i18n.getMessage("caption_ungrouped_group");
 var caption_noname_group = chrome.i18n.getMessage("caption_noname_group");
-var DefaultToolbar =
+const DefaultToolbar =
 	'<div id=toolbar_main>'+
 		'<div class=button id=button_new><div class=button_img></div></div>'+
 		'<div class=button id=button_pin><div class=button_img></div></div>'+
@@ -71,8 +70,8 @@ var DefaultToolbar =
 		'<div class=button id=button_settings><div class=button_img></div></div>'+
 		'<div class=button id=button_extensions><div class=button_img></div></div>'
 		: '')+
-		'<div class=button id=button_discard><div class=button_img></div></div>'+
-		'<div class=button id=button_move><div class=button_img></div></div>'+
+		'<div class=button id=button_unload><div class=button_img></div></div>'+
+		'<div class=button id=button_detach><div class=button_img></div></div>'+
 	'</div>'+
 	'<div class=toolbar_shelf id=toolbar_shelf_groups>'+
 		'<div class=button id=button_groups_toolbar_hide><div class=button_img></div></div>'+
@@ -101,28 +100,30 @@ var DefaultTheme = {
 	"ToolbarShow": true,
 	"ColorsSet": {},
 	"TabsSizeSetNumber": 2,
+	"TabsMargins": "2",
 	"theme_name": "untitled",
-	"theme_version": 2,
+	"theme_version": 3,
 	"toolbar": DefaultToolbar,
 	"unused_buttons": ""
 };
 var DefaultPreferences = {
 	"skip_load": false,
-	"pin_list_multi_row": false,
-	"close_with_MMB": true,
+	"pin_list_multi_row": true,
 	"always_show_close": false,
+	"never_show_close": false,
 	"allow_pin_close": false,
 	"append_child_tab": "bottom",
 	"append_child_tab_after_limit": "after",
 	"append_orphan_tab": "bottom",
 	"after_closing_active_tab": "below_seek_in_parent",
-	"close_other_trees": false,
+	"collapse_other_trees": false,
+	"open_tree_on_hover": true,
 	"promote_children": true,
 	"promote_children_in_first_child": true,
-	"open_tree_on_hover": true,
 	"max_tree_depth": -1,
+	// "max_tree_depth_folders": 0,
 	"max_tree_drag_drop": true,
-	"never_show_close": false,
+	"max_tree_drag_drop_folders": false,
 	"switch_with_scroll": false,
 	"syncro_tabbar_tabs_order": true,
 	"show_counter_groups": true,
@@ -130,10 +131,17 @@ var DefaultPreferences = {
 	"show_counter_tabs_hints": true,
 	"groups_toolbar_default": true,
 	"syncro_tabbar_groups_tabs_order": true,
+	"midclick_tab": "close_tab",
+	"dbclick_tab": "new_tab",
+	"dbclick_group": "new_tab",
+	"midclick_group": "nothing",
+	"midclick_folder": "nothing",
+	"dbclick_folder": "rename_folder",
 	"debug": false
 };
 var theme = {
 	"TabsSizeSetNumber": 2,
+	"TabsMargins": "2",
 	"ToolbarShow": true,
 	"toolbar": DefaultToolbar
 };
@@ -159,35 +167,69 @@ function HexToRGB(hex, alpha){
 	if (alpha) { return 'rgba('+r+', '+g+', '+b+', '+alpha+')'; } else { return 'rgb('+r+', '+g+', '+b+')'; }
 }
 
-
 function GetCurrentTheme() {
 	chrome.storage.local.get(null, function(items) {
 		if (items["current_theme"] && items["themes"] && items["themes"][items["current_theme"]]) {
 			theme = items["themes"][items["current_theme"]];
+			if (theme.theme_version == 1) {
+				theme["ColorsSet"]["scrollbar_height"] = theme.ScrollbarPinList + "px";
+				theme["ColorsSet"]["scrollbar_width"] = theme.ScrollbarTabList + "px";
+				theme["toolbar"] = DefaultToolbar;
+				theme["unused_buttons"] = "";
+			}
+			if (theme.theme_version == 2) {
+				SelectedTheme["TabsMargins"] = "2";
+			}
 		} else {
 			theme = Object.assign({}, DefaultTheme);
 		}
 	});
 }
+
 function ApplyTheme(theme) {
+	if (theme.theme_version == 1) {
+		theme["ColorsSet"]["scrollbar_height"] = theme.ScrollbarPinList + "px";
+		theme["ColorsSet"]["scrollbar_width"] = theme.ScrollbarTabList + "px";
+		theme["toolbar"] = DefaultToolbar;
+		theme["unused_buttons"] = "";
+	}
+	if (theme.theme_version == 2) {
+		theme["TabsMargins"] = "2";
+	}
 	RestoreStateOfGroupsToolbar();
 	ApplySizeSet(theme["TabsSizeSetNumber"]);
 	ApplyColorsSet(theme["ColorsSet"]);
-	if (theme.ToolbarShow) {
+	ApplyTabsMargins(theme["TabsMargins"]);
+	if (theme.ToolbarShow == true) {
+		SetToolbarEvents(true, false, false, "");
 		if (theme.theme_version == DefaultTheme.theme_version) {
-			$("#toolbar").html(theme.toolbar);
+			document.getElementById("toolbar").innerHTML = theme.toolbar;
 			if (browserId == "F") {
-				$(".button#button_load_bak1, .button#button_load_bak2, .button#button_load_bak3").remove();
+				document.querySelectorAll(".button#button_load_bak1, .button#button_load_bak2, .button#button_load_bak3").forEach(function(s){
+					s.parentNode.removeChild(s);
+				});
 			}
 		} else {
-			$("#toolbar").html(DefaultToolbar);
+			document.getElementById("toolbar").innerHTML = DefaultToolbar;
+		}
+		SetToolbarEvents(false, true, true, "mousedown");
+		RestoreToolbarShelf();
+		RestoreToolbarSearchFilter();
+	}	else {
+		document.getElementById("toolbar").innerHTML = "";
+		RefreshGUI();
+	}
+	
+	for (var groupId in bggroups) {
+		let groupTitle = document.getElementById("_gte"+groupId);
+		if (groupTitle != null && bggroups[groupId].font == "") {
+			groupTitle.style.color = "";
 		}
 	}
-	RestoreToolbarShelf();
-	RestoreToolbarSearchFilter();
 	Loadi18n();
 }
-/* theme colors is an object with css variables (but without --), for example; {"button_background": "#f2f2f2", "filter_box_border": "#cccccc"} */
+
+// 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) {
@@ -221,21 +263,22 @@ function ApplySizeSet(size){
 	}
 }
 
-function LoadPreferences() {
-	opt = Object.assign({}, DefaultPreferences);
-	chrome.storage.local.get(null, function(items) {
-		if (items["preferences"]) {
-			for (var parameter in items["preferences"]) {
-				if (opt[parameter] != undefined) {
-					opt[parameter] = items["preferences"][parameter];
-				}
+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 LoadDefaultPreferences() {
 	opt = Object.assign({}, DefaultPreferences);
 }
+
 function SavePreferences() {
 	chrome.runtime.sendMessage({command: "save_preferences", opt: opt}, function(response) {
 		setTimeout(function() {
@@ -243,6 +286,7 @@ function SavePreferences() {
 		}, 300);
 	});
 }
+
 function ShowOpenFileDialog(id, extension) {
 	let body = document.getElementById("body");
 	let inp = document.createElement("input");
@@ -251,23 +295,43 @@ function ShowOpenFileDialog(id, extension) {
 	inp.accept = extension;
 	inp.style.display = "none";
 	body.appendChild(inp);
-	$("#"+id).click();
-}
-function SaveFile(filename, data) {
-	let d = JSON.stringify(data);
-	let body = document.getElementById("body");
-	let link = document.createElement("a");
-	link.target = "_self";
-	link.download = filename;
-	link.href = "data:text/csv;charset=utf-8," + encodeURIComponent(d);
-	body.appendChild(link);
-	link.click();
-	link.remove();
+	inp.click();
+	return inp;
 }
 
-function log(m) {
-	if (opt.debug) {
-		console.log(m);
-	}
-	// chrome.runtime.sendMessage({command: "console_log", m: m});
+function SaveFile(filename, data) {
+	chrome.tabs.query({currentWindow: true, active: true}, function(activeTab) {
+		chrome.tabs.create({url: "download.html"}, function(tab) {
+			setTimeout(function() {
+				chrome.runtime.sendMessage({command: "show_save_file_dialog", currentTabId: activeTab[0].id, selfTabId: tab.id, data: data, filename: filename});
+			}, 100);
+		});
+	});
+}
+
+// function SaveFile(filename, data) {
+	// let file = new File([JSON.stringify(data)], filename, {type: "text/csv;charset=utf-8"} );
+	// let body = document.getElementById("body");
+	// let savelink = document.createElement("a");
+	// savelink.target = "_blank";
+	// savelink.style.display = "none";
+	// savelink.type = "file";
+	// savelink.download = filename;
+	// savelink.href = URL.createObjectURL(file);
+	// body.appendChild(savelink);
+	// savelink.click();
+	// savelink.parentNode.removeChild(savelink);
+// }
+
+function EmptyDragAndDrop() {
+	DragAndDrop.timeout = false;
+	DragAndDrop.DragNodeClass = "";
+	DragAndDrop.DroppedToWindowId = 0;
+	DragAndDrop.ComesFromWindowId = undefined;
+	DragAndDrop.Depth = 0;
+	DragAndDrop.TabsIds = [];
+	DragAndDrop.TabsIdsParents = [];
+	DragAndDrop.TabsIdsSelected = [];
+	DragAndDrop.Folders = {};
+	DragAndDrop.FoldersSelected = [];
 }

scripts/groups.js

@@ -7,151 +7,291 @@
 function SaveGroups() {
 	chrome.runtime.sendMessage({command: "save_groups", groups: bggroups, windowId: CurrentWindowId});
 }
+
 function AppendGroups(Groups) {
-	// var scroll = $("#group_list").scrollTop();
+	// let GroupList = document.getElementById("group_list");
+	// let scroll = GroupList.scrollTop;
+
+	AppendGroupToList("tab_list", caption_ungrouped_group, "", true);
+
 	for (var group in Groups) {
-		AppendGroupToList(Groups[group].id, Groups[group].name, Groups[group].font);
+		AppendGroupToList(Groups[group].id, Groups[group].name, Groups[group].font, true);
+		if (document.querySelectorAll(".group").length == Object.keys(Groups).length) {
+			RearrangeGroupsButtons();
+			setTimeout(function() {
+				RearrangeGroupsLists();
+			}, 50);
+		}
 	}
-	setTimeout(function() {
-		RearrangeGroupsButtons(0);
-	}, 1000);
 }
 
-function RearrangeGroupsButtons(stack) {
-	$(".group_button").each(function() {
-		let groupId = (this.id).substr(1);
+function RearrangeGroupsButtons(first_loop) {
+	document.querySelectorAll(".group_button").forEach(function(s){
+		let groupId = (s.id).substr(1);
 		if (bggroups[groupId]) {
-			if ($("#group_list").children().eq(bggroups[groupId].index)[0] && $(this).index() > bggroups[groupId].index) {
-				$(this).insertBefore($("#group_list").children().eq(bggroups[groupId].index)[0]);
-			} else {
-				if ($("#group_list").children().eq(bggroups[groupId].index)[0] && $(this).index() < bggroups[groupId].index) {
-					$(this).insertAfter($("#group_list").children().eq(bggroups[groupId].index)[0]);
+			if (s.parentNode.childNodes[bggroups[groupId].index] != undefined) {
+				let Ind = Array.from(s.parentNode.children).indexOf(s);
+				if (Ind > bggroups[groupId].index) {
+					s.parentNode.childNodes[bggroups[groupId].index].parentNode.insertBefore(s, s.parentNode.childNodes[bggroups[groupId].index]);
+				} else {
+					if (s.parentNode.childNodes[bggroups[groupId].index].nextSibling != null) {
+						s.parentNode.childNodes[bggroups[groupId].index].parentNode.insertBefore(s, s.parentNode.childNodes[bggroups[groupId].index].nextSibling);
+					} else {
+						s.parentNode.childNodes[bggroups[groupId].index].parentNode.appendChild(s);
+					}	
+				}
+				let newInd = Array.from(s.parentNode.children).indexOf(s);
+				if (newInd != bggroups[groupId].index && first_loop) {
+					RearrangeGroupsButtons(false);
 				}
 			}
-			if ($(this).index() != bggroups[groupId].index && stack < 10) {
-				RearrangeGroupsButtons(stack+1);
-			}
 		}
 	});
 }
-function RearrangeGroupsLists() {
-	let scroll = $("#"+active_group).scrollTop();
-	$(".group_button").each(function() {
-		let groupId = (this.id).substr(1);
-		if ($("#"+groupId)[0]) {
-			$("#groups").append($("#"+groupId));
-		}
-	});
-	$("#"+active_group).scrollTop(scroll);
-}
 
-function AppendGroupToList(groupId, group_name, font_color) {
-	if ($("#"+groupId).length == 0 && $("#groups")[0]) {
-		var grp = document.createElement("div"); grp.className = "group"; grp.id = groupId; $("#groups")[0].appendChild(grp);
-		var gcf = document.createElement("div"); gcf.className = "children_folders"; gcf.id = "cf"+groupId; grp.appendChild(gcf);
-		var gct = document.createElement("div"); gct.className = "children_tabs"; gct.id = "ch"+groupId; grp.appendChild(gct);
+function RearrangeGroupsLists() {
+	let activegroup = document.getElementById(active_group);
+	let scroll = activegroup.scrollTop;
+	let groups = document.getElementById("groups");
+	document.querySelectorAll(".group_button").forEach(function(s){
+		let group = document.getElementById((s.id).substr(1));
+		if (group != null) {
+			groups.appendChild(group);
+		}
+	});
+	activegroup.scrollTop = scroll;
+}
+
+function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
+	if (document.getElementById(groupId) == null) {
+		let grp = document.createElement("div"); grp.className = "group"; grp.id = groupId; grp.style.display = "none"; document.getElementById("groups").appendChild(grp);
+		let gcf = document.createElement("div"); gcf.className = "children_folders"; gcf.id = "cf"+groupId; grp.appendChild(gcf);
+		let gct = document.createElement("div"); gct.className = "children_tabs"; gct.id = "ct"+groupId; grp.appendChild(gct);
+		if (SetEvents) {
+			grp.onmousedown = function(event) {
+				event.stopImmediatePropagation();
+				if (event.which == 1 && event.target == this) {
+					DeselectFolders();
+					DeselectTabs();
+					HideMenus();
+				}
+				if (event.which == 2) {
+					event.preventDefault();
+					ActionClickGroup(this, opt.midclick_group);
+				}
+				if (event.which == 3 && event.target.id == this.id) {
+					// SHOW MENU
+					ShowFGlobalMenu(event);
+				}
+			}
+			grp.ondragenter = function(event) {
+				// PIN,TAB==>GROUP
+				if (event.target.id == this.id && (DragAndDrop.DragNodeClass == "tab" || DragAndDrop.DragNodeClass == "folder")) {
+					HighlightNode(this);
+				}
+			}
+			// DOUBLE CLICK ACTION
+			grp.ondblclick = function(event) {
+				if (event.target.id == this.id) {
+					ActionClickGroup(this, opt.dbclick_group);
+				}
+			}
+
+			if (opt.switch_with_scroll) {
+				BindTabsSwitchingToMouseWheel(groupId);
+			}
+
+		}
+
 	}
-	if ($("#_"+groupId).length == 0) {
-		var gbn = document.createElement("div"); gbn.className = "group_button"; gbn.id = "_"+groupId; $("#group_list")[0].appendChild(gbn);
-		var gte = document.createElement("span"); gte.className = "group_title"; gte.id = "_gte"+groupId; gte.textContent = group_name; if (font_color != "") {gte.style.color = "#"+font_color;} gbn.appendChild(gte);
-		var gtd = document.createElement("div"); gtd.className = "group_drag_box"; gtd.draggable = true; gtd.id = "-"+groupId; gbn.appendChild(gtd);
-	}
-	if (groupId != active_group) {
-		$("#"+groupId).hide();
+
+	if (document.getElementById("_"+groupId) == null) {
+		let gbn = document.createElement("div"); gbn.className = "group_button"; gbn.id = "_"+groupId; document.getElementById("group_list").appendChild(gbn);
+		let gte = document.createElement("span"); gte.className = "group_title"; gte.id = "_gte"+groupId; gte.textContent = group_name;
+		if (font_color != "") {
+			gte.style.color = "#"+font_color;
+		} else {
+			gte.style.color = window.getComputedStyle(document.getElementById("body"), null).getPropertyValue("--group_list_default_font_color");
+		}
+		gbn.appendChild(gte);
+		let gtd = document.createElement("div"); gtd.className = "drop_target group_drag_box"; if (SetEvents) {gtd.draggable = true;} gtd.id = "-"+groupId; gbn.appendChild(gtd);
+		let gdd = document.createElement("div"); gdd.className = "drop_target group_button_drag_entered_bottom"; gdd.id = "dd"+groupId; gbn.appendChild(gdd);
+		let gdu = document.createElement("div"); gdu.className = "drop_target group_button_drag_entered_top"; gdu.id = "du"+groupId; gbn.appendChild(gdu);
+		
+		if (SetEvents) {
+
+			// ACTIVATE GROUP
+			gtd.onclick = function(event) {
+				SetActiveGroup(this.id.substr(1), true, true);
+			}
+			
+			// SHOW GROUP MENU
+			gbn.onmousedown = function(event) {
+				// event.stopImmediatePropagation();
+				if (event.which == 3) {
+					ShowFGroupMenu(document.getElementById(this.id.substr(1)), event);
+				}
+			}
+
+			// EDIT GROUP
+			gtd.ondblclick = function(event) {
+				if (event.which == 1 && this.id != "-tab_list") {
+					ShowGroupEditWindow((this.id).substr(1));
+				}
+			}
+
+			// DRAGGING GROUPS
+			gtd.ondragstart = function(event) { // DRAG START
+				event.stopPropagation();
+				event.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+				event.dataTransfer.setData("text", "");
+				// event.dataTransfer.setData("text/plain", "");
+				// event.dataTransfer.setData("TTSourceWindowId", CurrentWindowId);
+				CleanUpDragClasses();
+				EmptyDragAndDrop();
+
+				DragAndDrop.ComesFromWindowId = CurrentWindowId;
+				DragAndDrop.DragNodeClass = "group";
+				// DragAndDrop.DragNode = event.target.parentNode;
+				
+				this.parentNode.classList.add("dragged_group_button");
+				// event.dataTransfer.setData("null", "null");
+				DropTargetsFront(this, false, true);
+			}
+
+			gtd.ondragenter = function(event) { // DRAG START
+				if (DragAndDrop.DragNodeClass == "tab" || DragAndDrop.DragNodeClass == "folder") {
+					HighlightNode(this);
+				}
+			}
+
+			gdu.ondragenter = function(event) { // DRAG START
+				if (DragAndDrop.DragNodeClass == "group") {
+					HighlightNode(this);
+				}
+			}
+
+			gdd.ondragenter = function(event) { // DRAG START
+				// GROUP BUTTON==>GROUP BUTTON
+				if (DragAndDrop.DragNodeClass == "group") {
+					HighlightNode(this);
+				}
+			}
+			// scroll groups
+			// $(document).on("mousedown", "#scroll_group_up, #scroll_group_down", function(event) {
+				// IOKeys.LMB = true;
+				// ScrollGroupList($(this).is("#scroll_group_up"));
+			// });
+			// $(document).on("mouseleave", "#scroll_group_up, #scroll_group_down", function(event) {
+				// IOKeys.LMB = false;
+			// });
+		}
 	}
 	RefreshGUI();
-	
-	if (opt.switch_with_scroll) {
-		BindTabsSwitchingToMouseWheel();
-	}
 }
 
 function GenerateNewGroupID(){
-	var newID = "g_"+GenerateRandomID();
-	if ($("#"+newID)[0]) {
-		GenerateNewGroupID();
-	} else {
+	let newID = "g_"+GenerateRandomID();
+	if (document.getElementById(newID) == null) {
 		return newID;
+	} else {
+		GenerateNewGroupID();
 	}
 }
 
-function AddNewGroup(p) {
-	var newId = GenerateNewGroupID();
-	bggroups[newId] = { id: newId, index: 0, active_tab: 0, active_tab_ttid: "", name: (p.name ? p.name : caption_noname_group), font:  (p.font ? p.font : "")  };
-	AppendGroupToList(newId, bggroups[newId].name, bggroups[newId].font);
+function AddNewGroup(Name, FontColor) {
+	let newId = GenerateNewGroupID();
+	bggroups[newId] = { id: newId, index: 0, active_tab: 0, prev_active_tab: 0, active_tab_ttid: "", name: (Name ? Name : caption_noname_group), font:  (FontColor ? FontColor : "")  };
+	AppendGroupToList(newId, bggroups[newId].name, bggroups[newId].font, true);
 	UpdateBgGroupsOrder();
 	return newId;
 }
 
-// function AppendTabsToGroup(p) {
-// }
-
 // remove group, delete tabs if close_tabs is true
 function GroupRemove(groupId, close_tabs) {
 	if (close_tabs) {
-		CloseTabs($("#"+groupId).find(".tab").map(function() {return parseInt(this.id);}).toArray());
-		$("#"+groupId+" .folder").each(function() {
-			RemoveFolder(this.id);
+		let tabIds = Array.prototype.map.call(document.querySelectorAll("#"+groupId+" .tab"), function(s){
+			return parseInt(s.id);
+		});
+		CloseTabs(tabIds);
+		document.querySelectorAll("#"+groupId+" .folder").forEach(function(s){
+			RemoveFolder(s.id);
 		});
 	} else {
-		$("#cf"+groupId).children().each(function() {
-			$("#cftab_list").append(this);
-		});
-		$("#ch"+groupId).children().each(function() {
-			$("#chtab_list").append(this);
-		});
+		let TabListFolders = document.getElementById("cftab_list");
+		let GroupFolders = document.getElementById("cf"+groupId);
+		while (GroupFolders.firstChild) {
+			TabListFolders.appendChild(GroupFolders.firstChild);
+		}
+		let TabListTabs = document.getElementById("cttab_list");
+		let GroupTabs = document.getElementById("ct"+groupId);
+		while (GroupTabs.firstChild) {
+			TabListTabs.appendChild(GroupTabs.firstChild);
+		}
 		RefreshExpandStates();
 		RefreshCounters();
 	}
 	delete bggroups[groupId];
-	
-	if ($("#"+groupId)[0].id == active_group) {
-		if ($("#_"+groupId).prev(".group_button")[0]) {
-			SetActiveGroup(($("#_"+groupId).prev(".group_button")[0].id).substr(1), true, true);
+	if (groupId == active_group) {
+		if (document.getElementById("_"+groupId).previousSibling) {
+			SetActiveGroup((document.getElementById("_"+groupId).previousSibling.id).substr(1), true, true);
 		} else {
-			if ($("#_"+groupId).next(".group_button")[0]) {
-				SetActiveGroup(($("#_"+groupId).next(".group_button")[0].id).substr(1), true, true);
+			if (document.getElementById("_"+groupId).nextSibling) {
+				SetActiveGroup((document.getElementById("_"+groupId).nextSibling.id).substr(1), true, true);
 			} else {
 				SetActiveGroup("tab_list", true, true);
 			}
 		}
 	}
 	SaveGroups();
-	$("#"+groupId).remove();
-	$("#_"+groupId).remove();
+	let group = document.getElementById(groupId);
+	group.parentNode.removeChild(group);	
+	let groupButton = document.getElementById("_"+groupId);
+	groupButton.parentNode.removeChild(groupButton);	
 	schedule_update_data++;
 }
 
 function UpdateBgGroupsOrder() {
-	$(".group_button").each(function() {
-		if (bggroups[(this.id).substr(1)]) {
-			bggroups[(this.id).substr(1)].index = $(this).index();
+	document.querySelectorAll(".group_button").forEach(function(s){
+		if (bggroups[(s.id).substr(1)]) {
+			bggroups[(s.id).substr(1)].index = Array.from(s.parentNode.children).indexOf(s);
 		}
 	});
 	SaveGroups();
 }
 
 function SetActiveGroup(groupId, switch_to_active_in_group, scroll_to_active) {
-	log("function: SetActiveGroup");
-	if ($("#"+groupId)[0]) {
+	if (opt.debug) console.log("function: SetActiveGroup");
+	let group = document.getElementById(groupId);
+	if (group != null) {
 		active_group = groupId;
-		$(".group_button").removeClass("active_group");
-		$("#_"+groupId).addClass("active_group");
-		$(".tab, .group").hide();
-		$("#"+groupId).show();
-		$("#"+groupId+" .tab").show();
+		document.querySelectorAll(".group_button").forEach(function(s){
+			s.classList.remove("active_group");
+		});
+		document.getElementById("_"+groupId).classList.add("active_group");
+		document.querySelectorAll(".group").forEach(function(s){
+			s.style.display = "none";
+		});
+		group.style.display = "";
 		RefreshGUI();
-		$("#group_edit").hide();
-		if (switch_to_active_in_group && $("#"+groupId+" .active_tab")[0]){
-			chrome.tabs.update(parseInt($("#"+groupId+" .active_tab")[0].id), {active: true});
-		}
-		if (scroll_to_active && $("#"+groupId+" .active_tab")[0]){
-			ScrollToTab($("#"+groupId+" .active_tab")[0].id);
+		HideRenameDialogs()
+		let activeTab = document.querySelector("#"+groupId+" .active_tab");
+		if (activeTab != null ){
+			if (switch_to_active_in_group){
+				chrome.tabs.update(parseInt(activeTab.id), {active: true});
+			}
+			if (scroll_to_active){
+				ScrollToTab(activeTab.id);
+			}
 		}
 		if (groupId == "tab_list") {
-			$("#button_remove_group, #button_edit_group").addClass("disabled");
+			document.querySelectorAll("#button_remove_group, #button_edit_group").forEach(function(s){
+				s.classList.add("disabled");
+			});
 		} else {
-			$("#button_remove_group, #button_edit_group").removeClass("disabled");
+			document.querySelectorAll("#button_remove_group, #button_edit_group").forEach(function(s){
+				s.classList.remove("disabled");
+			});
 		}
 		chrome.runtime.sendMessage({command: "set_active_group", active_group: groupId, windowId: CurrentWindowId});
 		RefreshExpandStates();
@@ -160,20 +300,109 @@ function SetActiveGroup(groupId, switch_to_active_in_group, scroll_to_active) {
 }
 
 function SetActiveTabInGroup(groupId, tabId) {
-	if ($(".tab#"+tabId)[0] /* && $("#"+tabId).parents(".group")[0] */ && bggroups[groupId] != undefined) {
-		// bggroups[$("#"+tabId).parents(".group")[0].id].active_tab = parseInt(tabId);
-		// if ($("#"+tabId).parents(".group")[0].id != active_group) {
+	if (document.querySelector("#"+groupId+" [id='"+tabId+"']") != null && bggroups[groupId] != undefined) {
 		if (groupId != active_group) {
-			// SetActiveGroup($("#"+tabId).parents(".group")[0].id, false, true);
 			SetActiveGroup(groupId, false, true);
 		}
 		if (bggroups[groupId]) {
+			bggroups[groupId].prev_active_tab = bggroups[groupId].active_tab;
 			bggroups[groupId].active_tab = parseInt(tabId);
 		}
 		SaveGroups();
 	}
 }
 
+// Edit group popup
+function ShowGroupEditWindow(groupId) {
+	HideRenameDialogs();
+	if (bggroups[groupId]) {
+		let name = document.getElementById("group_edit_name");
+		name.value = bggroups[groupId].name;
+		let groupEditDialog = document.getElementById("group_edit");
+		groupEditDialog.setAttribute("groupId", groupId);
+		groupEditDialog.style.display = "block";
+		groupEditDialog.style.top = document.getElementById("toolbar").getBoundingClientRect().height + document.getElementById("pin_list").getBoundingClientRect().height + 8 + "px";
+		groupEditDialog.style.left = "22px";
+		let DefaultGroupButtonFontColor = window.getComputedStyle(document.getElementById("body"), null).getPropertyValue("--group_list_default_font_color");
+		let GroupEditFont = document.getElementById("group_edit_font");
+		GroupEditFont.style.backgroundColor = (bggroups[groupId].font == "" ? DefaultGroupButtonFontColor : "#"+bggroups[groupId].font);
+		setTimeout(function(){
+			document.getElementById("group_edit_name").select();
+		},5);
+	}
+}
+
+// when pressed OK in group popup
+function GroupEditConfirm() {
+	let groupId = document.getElementById("group_edit").getAttribute("groupId");
+	if (bggroups[groupId]) {
+		let GroupEditName = document.getElementById("group_edit_name");
+		GroupEditName.value = GroupEditName.value.replace(/[\f\n\r\v\t\<\>\+\-\(\)\.\,\;\:\~\/\|\?\@\!\"\'\£\$\%\&\^\#\=\*\[\]]?/gi, "");
+		bggroups[groupId].name = GroupEditName.value;
+		let GroupEditFont = document.getElementById("group_edit_font");
+		let DefaultGroupButtonFontColor = window.getComputedStyle(document.getElementById("body"), null).getPropertyValue("--group_list_default_font_color");
+		let ThisGroupButtonFontColor = RGBtoHex(GroupEditFont.style.backgroundColor);
+		if ("#"+ThisGroupButtonFontColor != DefaultGroupButtonFontColor) {
+			bggroups[groupId].font = ThisGroupButtonFontColor;
+			document.getElementById("_gte"+groupId).style.color = "#"+ThisGroupButtonFontColor;
+		}
+		HideRenameDialogs();
+		RefreshGUI();
+		SaveGroups();
+	}
+}
+
+function RestoreStateOfGroupsToolbar() {
+	chrome.runtime.sendMessage({command: "get_group_bar", windowId: CurrentWindowId}, function(response) {
+		let toolbarGroups = document.getElementById("toolbar_groups");
+		if (response == true) {
+			toolbarGroups.style.display = "inline-block";
+			toolbarGroups.style.width = "19px";
+			toolbarGroups.style.borderRight = "1px solid var(--group_list_borders)";
+			toolbarGroups.classList.remove("hidden");
+		} else {
+			toolbarGroups.style.display = "none";
+			toolbarGroups.style.width = "0px";
+			toolbarGroups.style.borderRight = "none";
+			toolbarGroups.classList.add("hidden");
+		}
+	});
+}
+
+function GroupsToolbarToggle() {
+	let toolbarGroups = document.getElementById("toolbar_groups");
+	toolbarGroups.classList.toggle("hidden");
+	if (toolbarGroups.classList.contains("hidden")) {
+		toolbarGroups.style.display = "none";
+		toolbarGroups.style.width = "0px";
+		toolbarGroups.style.borderRight = "none";
+		chrome.runtime.sendMessage({command: "set_group_bar", group_bar: false, windowId: CurrentWindowId});
+	} else {
+		toolbarGroups.style.display = "inline-block";
+		toolbarGroups.style.width = "19px";
+		toolbarGroups.style.borderRight = "1px solid var(--group_list_borders)";
+		chrome.runtime.sendMessage({command: "set_group_bar", group_bar: true, windowId: CurrentWindowId});
+	}
+	RefreshGUI();
+}
+
+function ActionClickGroup(Node, bgOption) {
+	console.log(Node.id)
+	if (bgOption == "new_tab") {
+		if (Node.id == "pin_list") {
+			OpenNewTab(true, undefined);
+		}
+		if (Node.classList.contains("tab") || Node.classList.contains("folder") || Node.classList.contains("group")) {
+			OpenNewTab(false, Node.id);
+		}
+	}
+	if (bgOption == "activate_previous_active") {
+		chrome.tabs.update(parseInt(bggroups[active_group].prev_active_tab), {active: true});
+	}
+}
+// function AppendTabsToGroup(p) {
+// }
+
 // direction == true goes up, false goes down
 // function ScrollGroupList(direction) {
 	// if (direction) {
@@ -197,28 +426,6 @@ function SetActiveTabInGroup(groupId, tabId) {
 	// }
 // }
 
-// Edit group popup
-function ShowGroupEditWindow() {
-	if (bggroups[menuItemId]) {
-		$("#group_edit_name")[0].value = bggroups[menuItemId].name;
-		$("#group_edit").css({"display": "block", "top": $("#toolbar_groups").offset().top + 8, "left": 22});
-		$("#group_edit_font").css({"background-color": bggroups[menuItemId].font == "" ? "var(--button_icons, #808080)" : "#"+bggroups[menuItemId].font});
-	}
-}
-
-// when pressed OK in group popup
-function GroupEditConfirm() {
-	if (bggroups[menuItemId]) {
-		$("#group_edit_name")[0].value = $("#group_edit_name")[0].value.replace(/[\f\n\r\v\t\<\>\+\-\(\)\.\,\;\:\~\/\|\?\@\!\"\'\£\$\%\&\^\#\=\*\[\]]?/gi, "");
-		bggroups[menuItemId].name = $("#group_edit_name")[0].value;
-		bggroups[menuItemId].font = RGBtoHex($("#group_edit_font").css("background-color"));
-		$(".edit_dialog").hide(0);
-		$(".group_title#_gte" +menuItemId).css({"color": "#"+bggroups[menuItemId].font});
-		RefreshGUI();
-		SaveGroups();
-	}
-}
-
 // "Move to group" popup
 // function ShowMoveToGroupWindow(x, y) {
 	// $(".move_to_group_menu_entry").remove();
@@ -240,111 +447,3 @@ function GroupEditConfirm() {
 	// $("#move_to_group_menu").css({"display": "block", "top": y-24, "left": x-20});
 // }
 
-
-// **********         GROUPS EVENTS         ***************
-
-function RestoreStateOfGroupsToolbar() {
-	chrome.runtime.sendMessage({command: "get_group_bar", windowId: CurrentWindowId}, function(response) {
-		$("#toolbar_groups").css({"display": "inline-block"});
-		if (response == true) {
-			$("#toolbar_groups").removeClass("hidden");
-			$("#toolbar_groups").css({"width": "19px", "border-right": "1px solid var(--group_list_borders)"});
-		} else {
-			$("#toolbar_groups").addClass("hidden");
-			$("#toolbar_groups").css({"width": "0px", "border-right": "none"});
-		}
-	});
-}
-
-function SetGroupEvents() {
-			
-	// activate group
-	$(document).on("click", ".group_button", function(event) {
-		// menuGroupId = (this.id).substr(1);
-		if (event.button == 0) {
-			SetActiveGroup((this.id).substr(1), true, true);
-		}
-	});
-
-	// show/hide groups toolbar
-	$(document).on("mousedown", "#button_groups_toolbar_hide", function(event) {
-		if (event.button == 0) {
-			$("#toolbar_groups").toggleClass("hidden");
-			if ($("#toolbar_groups").is(".hidden")) {
-				$("#toolbar_groups").css({"width": "0px", "border-right": "none"});
-				chrome.runtime.sendMessage({command: "set_group_bar", group_bar: false, windowId: CurrentWindowId});
-			} else {
-				$("#toolbar_groups").css({"width": "19px", "border-right": "1px solid var(--group_list_borders)"});
-				chrome.runtime.sendMessage({command: "set_group_bar", group_bar: true, windowId: CurrentWindowId});
-			}
-			RefreshGUI();
-		}
-	});
-
-
-	// edit group dialog box
-	$(document).on("mousedown", "#group_edit_discard", function(event) {
-		$(".edit_dialog").hide(0);
-	});
-	$("#group_edit_name").keyup(function(e) {
-		if (e.keyCode == 13) {
-			GroupEditConfirm();
-		}
-	});
-	$(document).on("mousedown", "#group_edit_confirm", function(event) {
-		GroupEditConfirm();
-	});
-
-	// show color picker
-	$(document).on("mousedown", "#group_edit_font, #group_edit_background", function(event) {
-		event.stopPropagation();
-		PickColor = this.id;
-		$("#color_picker")[0].value = "#"+RGBtoHex($(this).css("background-color"));
-		$("#color_picker").focus();
-		$("#color_picker").click();
-	});
-	
-	$(document).on("input", "#color_picker", function(event) {
-		$("#"+PickColor).css({"background-color": $("#color_picker")[0].value});
-	});	
-
-
-	// edit group
-	$(document).on("dblclick", ".group_button:not(#_tab_list)", function(event) {
-		if (event.button == 0) {
-			menuItemId = (this.id).substr(1);
-			ShowGroupEditWindow();
-		}
-	});
-
-
-
-	// scroll groups
-	// $(document).on("mousedown", "#scroll_group_up, #scroll_group_down", function(event) {
-		// IOKeys.LMB = true;
-		// ScrollGroupList($(this).is("#scroll_group_up"));
-	// });
-	// $(document).on("mouseleave", "#scroll_group_up, #scroll_group_down", function(event) {
-		// IOKeys.LMB = false;
-	// });
-
-	// remove tabs from group button
-	// $(document).on("mousedown", "#remove_tabs_from_group", function(event) {
-		// if (event.button == 0 && vt.ActiveGroup.match("at|ut") == null) {
-			// AppendTabsToGroup({tabsIds: $(".tab.selected_tab:visible").map(function() {return parseInt(this.id);}).toArray(), groupId: "ut", SwitchTabIfHasActive: true, insertAfter: true, moveTabs: true});
-		// }
-	// });
-
-
-	// remove group
-	// $(document).on("mousedown", ".group", function(event) {
-		// if (event.button == 1 || IOKeys.Shift) {
-			// if (IOKeys.Shift) {
-				// GroupRemove($(this)[0].id, true);
-			// } else {
-				// GroupRemove($(this)[0].id, false);
-			// }
-		// }
-	// });
-
-}

scripts/menu.js

@@ -4,287 +4,681 @@
 
 // **********			 MENU		 ***************
 
+function HideMenus() {
+	document.querySelectorAll(".separator, .menu_item").forEach(function(s){s.style.display = "none";});
+	document.querySelectorAll(".menu").forEach(function(s){
+		s.style.top = "-1000px";
+		s.style.left = "-1000px";
+	});
+}
+
+function ShowMenu(MenuNode, event) {
+	MenuNode.style.display = "block";
+	let x = event.pageX >= (document.body.clientWidth - MenuNode.getBoundingClientRect().width - 5) ? (document.body.clientWidth - MenuNode.getBoundingClientRect().width - 5) : (event.pageX - 5);
+	let y = event.pageY >= (document.body.clientHeight - MenuNode.getBoundingClientRect().height - 16) ? (document.body.clientHeight - MenuNode.getBoundingClientRect().height - 16) : (event.pageY - 16);
+	MenuNode.style.top = y + "px";
+	MenuNode.style.left = x + "px";
+}
+
 function ShowTabMenu(TabNode, event) {
-	$(".menu").hide(0);
-	menuItemId = parseInt(TabNode[0].id);
+	HideMenus();
+	menuItemNode = TabNode;
+ 	// $(".menu").hide(0);
+
 	// MUTE TABS
-	if (TabNode.is(".muted")) {
-		$("#tabs_menu_mute").css({ "display": "none" });
-		$("#tabs_menu_unmute").css({ "display": "" });
+	// if (TabNode.classList.contains("audible") && !TabNode.classList.contains("muted")) {
+		// document.querySelector("#menu_mute_tab").style.display = "";
+	// }
+	if (TabNode.classList.contains("muted")) {
+		document.querySelector("#menu_unmute_tab").style.display = "";
 	} else {
-		$("#tabs_menu_mute").css({ "display": "" });
-		$("#tabs_menu_unmute").css({ "display": "none" });
+		document.querySelector("#menu_mute_tab").style.display = "";
 	}
-	if (TabNode.is(".pin")) {
-		if (!opt.allow_pin_close) {
-			$("#tabs_menu_close").css({ "display": "none" });
-		}
-		// show contextmenu with correct size position
-		if ($("#pins_menu").outerWidth() > $(window).width() - 10) {
-			$("#pins_menu").css({ "width": $(window).width() - 10 });
-		} else {
-			$("#pins_menu").css({ "width": "" });
-		}
-		var x = event.pageX >= $(window).width() - $("#pins_menu").outerWidth() ? $(window).width() - $("#pins_menu").outerWidth() : event.pageX;
-		var y = event.pageY >= $(window).height() - $("#pins_menu").outerHeight() - 10 ? $(window).height() - $("#pins_menu").outerHeight() - 10 : event.pageY;
-		$("#pins_menu").css({ "display": "block", "top": y - 15, "left": x - 5 });
+	if (!TabNode.classList.contains("discarded")) {
+		document.querySelector("#menu_unload").style.display = "";
 	}
-	if (TabNode.is(".tab")) {
-		if ($("#" + menuItemId).is(".o, .c")) {
-			$("#tabs_menu_close_tree").css({ "display": "" });
-		} else {
-			$("#tabs_menu_close_tree").css({ "display": "none" });
+	
+	if (TabNode.classList.contains("pin")) {
+		if (opt.allow_pin_close) {
+			document.getElementById("menu_close").style.display = "";
 		}
-		if ($("#tabs_menu").outerWidth() > $(window).width() - 10) {
-			$("#tabs_menu").css({ "width": $(window).width() - 10 });
-		} else {
-			$("#tabs_menu").css({ "width": "" });
-		}
-		var x = event.pageX >= $(window).width() - $("#tabs_menu").outerWidth() ? $(window).width() - $("#tabs_menu").outerWidth() : event.pageX;
-		var y = event.pageY >= $(window).height() - $("#tabs_menu").outerHeight() - 10 ? $(window).height() - $("#tabs_menu").outerHeight() - 10 : event.pageY;
-		$("#tabs_menu").css({ "display": "block", "top": y - 15, "left": x - 5 });
+
+		document.querySelectorAll("#menu_new_pin, #separator_unpt, #menu_unpin_tab, #separator_dupt, #menu_duplicate_tab, #separator_undclo, #menu_undo_close_tab, #separator_deta, #menu_detach_tab, #menu_reload_tab, #separator_clo, #menu_close_other, #separator_mutot, #menu_mute_other, #menu_unmute_other, #separator_tts, #menu_treetabs_settings").forEach(function(s){
+			s.style.display = "";
+		});
 	}
+	
+	if (TabNode.classList.contains("tab")) {
+
+		document.querySelectorAll("#menu_new_tab, #separator_pit, #menu_pin_tab, #separator_newf, #menu_new_folder, #separator_dupt, #menu_duplicate_tab, #separator_undclo, #menu_undo_close_tab, #separator_expaa, #menu_expand_all, #menu_collapse_all, #separator_deta, #menu_detach_tab, #menu_reload_tab, #separator_clo, #menu_close, #menu_close_other, #separator_mut, #separator_mutot, #menu_mute_other, #menu_unmute_other, #separator_tts, #menu_treetabs_settings").forEach(function(s){
+			s.style.display = "";
+		});
+
+		if (TabNode.classList.contains("o")) {
+			document.querySelector("#separator_collt").style.display = "";
+			document.querySelector("#menu_collapse_tree").style.display = "";
+		}
+		if (TabNode.classList.contains("c")) {
+			document.querySelector("#separator_expat").style.display = "";
+			document.querySelector("#menu_expand_tree").style.display = "";
+		}
+		if (TabNode.classList.contains("c") || TabNode.classList.contains("o")) {
+			document.querySelector("#menu_close_tree").style.display = "";
+			document.querySelector("#separator_bkt").style.display = "";
+			document.querySelector("#menu_bookmark_tree").style.display = "";
+			document.querySelector("#separator_mutt").style.display = "";
+			document.querySelector("#menu_mute_tree").style.display = "";
+			document.querySelector("#menu_unmute_tree").style.display = "";
+		}
+	}
+	ShowMenu(document.getElementById("main_menu"), event);
 }
 
 function ShowFolderMenu(FolderNode, event) {
-	$(".menu").hide(0);
-	menuItemId = FolderNode[0].id;
-	if ($("#folders_menu").outerWidth() > $(window).width() - 10) {
-		$("#folders_menu").css({ "width": $(window).width() - 10 });
-	} else {
-		$("#folders_menu").css({ "width": "" });
+	HideMenus();
+	menuItemNode = FolderNode;
+	
+	document.querySelectorAll("#menu_mute_tab, #menu_unmute_tab, #menu_unload, #menu_new_tab, #menu_new_folder, #separator_renf, #menu_rename_folder, #menu_delete_folder, #separator_bkt, #menu_bookmark_tree, #separator_expaa, #menu_expand_all, #separator_colla, #menu_collapse_all, #menu_new_group, #separator_tts, #menu_treetabs_settings").forEach(function(s){
+		s.style.display = "";
+	});
+
+	if (FolderNode.classList.contains("o")) {
+		document.querySelector("#folders_menu, #menu_collapse_tree").style.display = "";
 	}
-	var x = event.pageX >= $(window).width() - $("#folders_menu").outerWidth() ? $(window).width() - $("#folders_menu").outerWidth() : event.pageX;
-	var y = event.pageY >= $(window).height() - $("#folders_menu").outerHeight() - 10 ? $(window).height() - $("#folders_menu").outerHeight() - 10 : event.pageY;
-	$("#folders_menu").css({ "display": "block", "top": y - 15, "left": x - 5 });
+	if (FolderNode.classList.contains("c")) {
+		document.querySelector("#folders_menu, #menu_expand_tree").style.display = "";
+	}
+	
+	ShowMenu(document.getElementById("main_menu"), event);
+}
+
+function ShowFGlobalMenu(event) {
+	menuItemNode = event.target;
+	HideMenus();
+
+
+	document.querySelectorAll("#menu_new_pin, #menu_new_tab, #menu_new_folder, #separator_undclo, #menu_undo_close_tab, #separator_expaa, #menu_expand_all, #menu_collapse_all, #separator_newg, #menu_new_group, #separator_gbk, #menu_bookmark_group, #separator_tts, #menu_treetabs_settings").forEach(function(s){
+		s.style.display = "";
+	});
+	ShowMenu(document.getElementById("main_menu"), event);
+}
+
+function ShowFGroupMenu(GroupNode, event) {
+	HideMenus();
+	menuItemNode = GroupNode;
+	
+	document.querySelectorAll("#menu_new_group, #menu_rename_group, #menu_delete_group, #menu_delete_group_tabs_close, #separator_gunlo, #groups_menu_unload, #separator_gbk, #separator_tts, #menu_bookmark_group, #separator_tts, #menu_treetabs_settings").forEach(function(s){
+		s.style.display = "";
+	});
+	if (menuItemNode.id == "tab_list") {
+		document.querySelectorAll("#menu_rename_group, #menu_delete_group, #menu_delete_group_tabs_close").forEach(function(s){
+			s.style.display = "none";
+		});
+	}
+	ShowMenu(document.getElementById("main_menu"), event);
 }
 
 function SetMenu() {
-	// trigger action when the contexmenu is about to be shown
-	$(document).bind("contextmenu", function(event) {
-		if (!event.ctrlKey) {
-			event.preventDefault();
-		}
-	});
-
-	// show global menu
-	$(document).on("mousedown", "#pin_list, .group", function(event) {
-		event.stopPropagation();
-		if (event.button == 2) {
-			$(".menu").hide(0);
-			menuItemId = active_group;
-
-			var x = event.pageX >= $(window).width() - $("#global_menu").outerWidth() ? $(window).width() - $("#global_menu").outerWidth() : event.pageX;
-			var y = event.pageY >= $(window).height() - $("#global_menu").outerHeight() - 10 ? $(window).height() - $("#global_menu").outerHeight() - 10 : event.pageY;
-			$("#global_menu").css({ "display": "block", "top": y - 15, "left": x - 5 });
-		}
-	});
-
-	// show global menu
-	$(document).on("mousedown", ".group_drag_box", function(event) {
-		// event.stopPropagation();
-		if (event.button == 2) {
-			$(".menu").hide(0);
-			if (this.id == "-tab_list") {
-				menuItemId = "tab_list";
-				$("#groups_menu_rename, #groups_menu_delete, #groups_menu_delete_tabs_close").hide();
-			} else {
-				menuItemId = (this.id).substr(1);
-				$("#groups_menu_rename, #groups_menu_delete, #groups_menu_delete_tabs_close").show();
-			}
-			var x = event.pageX >= $(window).width() - $("#groups_menu").outerWidth() ? $(window).width() - $("#groups_menu").outerWidth() : event.pageX;
-			var y = event.pageY >= $(window).height() - $("#groups_menu").outerHeight() - 10 ? $(window).height() - $("#groups_menu").outerHeight() - 10 : event.pageY;
-			$("#groups_menu").css({ "display": "block", "top": y - 15, "left": x - 5 });
-		}
-	});
-
-
-
-	// if the menu element is clicked
-	$(document).on("mousedown", ".menu li", function(event) {
-		event.stopPropagation();
-		if (event.button != 0) {
-			return;
-		}
-		switch ($(this).attr("data-action")) {
-			case "tab_new":
-				chrome.tabs.create({});
-			break;
-			case "tab_clone":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".selected_tab:visible").each(function() {
-						chrome.tabs.duplicate(parseInt(this.id));
-					});
-				} else {
-					chrome.tabs.duplicate(menuItemId);
+	document.querySelectorAll(".menu_item").forEach(function(m){
+		if (m.id == "menu_new_pin") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("pin")) {
+						OpenNewTab(true, menuItemNode.id);
+					} else {
+						OpenNewTab(true, undefined);
+					}
+					HideMenus();
 				}
-			break;
-			case "tab_move":
-				if ($("#" + menuItemId).is(".selected_tab, .active_tab")) {
+			}				
+		}
+		if (m.id == "menu_new_tab") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("folder")) {
+						OpenNewTab(false, menuItemNode.id);
+					} else {
+						if (menuItemNode.classList.contains("pin")) {
+							OpenNewTab(true, menuItemNode.id);
+						} else {
+							if (menuItemNode.classList.contains("tab")) {
+								OpenNewTab(false, menuItemNode.id);
+							} else {
+								OpenNewTab();
+							}
+						}
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_unpin_tab" || m.id == "menu_pin_tab") {
+			m.onmousedown = function(event) {
+				event.stopPropagation();
+				if (event.which == 1) {
+					if (menuItemNode.classList.contains("selected_tab")) {
+						document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { pinned: (menuItemNode.classList.contains("tab")) });
+						});
+					} else {
+						chrome.tabs.update(parseInt(menuItemNode.id), { pinned: (menuItemNode.classList.contains("tab")) });
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_duplicate_tab") {
+			m.onmousedown = function(event) {
+				event.stopPropagation();
+				if (event.which == 1) {
+					if (menuItemNode.classList.contains("selected_tab")) {
+						document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+							chrome.tabs.duplicate(parseInt(s.id), function(tab) {
+								setTimeout(function() {
+									let tb = document.getElementById(tab.id);
+									if (s != null && tb != null) {
+										s.parentNode.insertBefore(tb, s);
+									}
+								}, 10);
+							});
+						});
+					} else {
+						chrome.tabs.duplicate(parseInt(menuItemNode.id), function(tab) {
+							setTimeout(function() {
+								let tb = document.getElementById(tab.id);
+								if (menuItemNode != null && tb != null) {
+									menuItemNode.parentNode.insertBefore(tb, menuItemNode);
+								}
+							}, 10);
+						});
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_detach_tab") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+
+					if (menuItemNode.classList.contains("selected_tab")) {
+						let tabsArr = [];
+						document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+							tabsArr.push(parseInt(s.id));
+							if (s.childNodes[4].childNodes.length > 0) {
+								document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+									tabsArr.push(parseInt(t.id));
+								});
+							}
+						});
+						Detach(tabsArr);
+					} else {
+						Detach([parseInt(menuItemNode.id)]);
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_reload_tab") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("selected_tab")) {
+						document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+							chrome.tabs.reload(parseInt(s.id));
+						});
+					} else {
+						chrome.tabs.reload(parseInt(menuItemNode.id));
+					}
+					HideMenus();
+				}
+			}				
+		}
+		
+		if (m.id == "menu_unload") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("pin") || menuItemNode.classList.contains("tab")) {
+						if (menuItemNode.classList.contains("selected_tab")) {
+							let tabsArr = [];
+							document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+								tabsArr.push(parseInt(s.id));
+								if (s.childNodes[4].childNodes.length > 0) {
+									document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+										tabsArr.push(parseInt(t.id));
+									});
+								}
+							});
+							DiscardTabs(tabsArr);
+						} else {
+							DiscardTabs([parseInt(menuItemNode.id)]);
+						}
+					}
+					if (menuItemNode.classList.contains("folder")) {
+						let tabsArr = [];
+						document.querySelectorAll("#"+menuItemNode.id+" .tab").forEach(function(s){
+							tabsArr.push(parseInt(s.id));
+						});
+						DiscardTabs(tabsArr);
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_close") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("selected_tab")) {
+						let tabsArr = [];
+						document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+							tabsArr.push(parseInt(s.id));
+							if (s.childNodes[4].childNodes.length > 0) {
+								document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+									tabsArr.push(parseInt(t.id));
+								});
+							}
+						});
+						CloseTabs(tabsArr);
+					} else {
+						CloseTabs([parseInt(menuItemNode.id)]);
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_mute_tab") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("pin") || menuItemNode.classList.contains("tab")) {
+						if (menuItemNode.classList.contains("selected_tab")) {
+							document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+								chrome.tabs.update(parseInt(s.id), { muted: true });
+							});
+						} else {
+							chrome.tabs.update(parseInt(menuItemNode.id), { muted: true });
+						}
+					}
+					if (menuItemNode.classList.contains("folder")) {
+						document.querySelectorAll("#"+menuItemNode.id+" .tab").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { muted: true });
+						});
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_mute_tree") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					document.querySelectorAll("[id='"+menuItemNode.id+"'], [id='"+menuItemNode.id+"'] .tab").forEach(function(s){
+						chrome.tabs.update(parseInt(s.id), { muted: true });
+					});
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_unmute_tab") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("pin") || menuItemNode.classList.contains("tab")) {
+						if (menuItemNode.classList.contains("selected_tab")) {
+							document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+								chrome.tabs.update(parseInt(s.id), { muted: false });
+							});
+						} else {
+							chrome.tabs.update(parseInt(menuItemNode.id), { muted: false });
+						}
+					}
+					if (menuItemNode.classList.contains("folder")) {
+						document.querySelectorAll("#"+menuItemNode.id+" .tab").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { muted: false });
+						});
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_unmute_tree") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					document.querySelectorAll("[id='"+menuItemNode.id+"'], [id='"+menuItemNode.id+"'] .tab").forEach(function(s){
+						chrome.tabs.update(parseInt(s.id), { muted: false });
+					});
+					HideMenus();
+				}
+			}				
+		}
+
+		
+		if (m.id == "menu_mute_other") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("selected_tab")) {
+						document.querySelectorAll(".pin:not(.selected_tab), #"+active_group+" .tab:not(.selected_tab)").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { muted: true });
+						});
+					} else {
+						document.querySelectorAll(".pin:not([id='"+menuItemNode.id+"']), #"+active_group+" .tab:not([id='"+menuItemNode.id+"'])").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { muted: true });
+						});
+					}
+
+					HideMenus();
+				}
+			}				
+		}
+
+		
+		if (m.id == "menu_unmute_other") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("selected_tab")) {
+						document.querySelectorAll(".pin:not(.selected_tab), #"+active_group+" .tab:not(.selected_tab)").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { muted: false });
+						});
+					} else {
+						document.querySelectorAll(".pin:not([id='"+menuItemNode.id+"']), #"+active_group+" .tab:not([id='"+menuItemNode.id+"'])").forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { muted: false });
+						});
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+
+
+		
+		if (m.id == "menu_undo_close_tab") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					chrome.sessions.getRecentlyClosed(null, function(sessions) {
+						if (sessions.length > 0) {
+							chrome.sessions.restore(null, function() {});
+						}
+					});
+					HideMenus();
+				}
+			}				
+		}
+
+		
+		if (m.id == "menu_new_folder") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("folder")) {
+						AddNewFolder(menuItemNode.id, undefined, undefined, undefined);
+					} else {
+						if (menuItemNode.classList.contains("tab")) {
+							let folders = GetParentsByClass(menuItemNode, "folder");
+							if (folders.length > 0) {
+								AddNewFolder(folders[0].id, undefined, undefined, undefined);
+							} else {
+								AddNewFolder();
+							}
+						} else {
+							AddNewFolder();
+						}
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "menu_expand_tree") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					document.querySelectorAll("[id='"+menuItemNode.id+"'], [id='"+menuItemNode.id+"'] .folder.c, [id='"+menuItemNode.id+"'] .tab.c").forEach(function(s){
+						s.classList.add("o");
+						s.classList.remove("c");
+					});
+						
+					schedule_update_data++;
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_collapse_tree") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					document.querySelectorAll("[id='"+menuItemNode.id+"'], [id='"+menuItemNode.id+"'] .folder.c, [id='"+menuItemNode.id+"'] .tab.c").forEach(function(s){
+						s.classList.add("c");
+						s.classList.remove("o");
+					});
+					schedule_update_data++;
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_expand_all") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					document.querySelectorAll("#"+active_group+" .folder.c, #"+active_group+" .tab.c").forEach(function(s){
+						s.classList.add("o");
+						s.classList.remove("c");
+					});
+					schedule_update_data++;
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_collapse_all") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					document.querySelectorAll("#"+active_group+" .folder.o, #"+active_group+" .tab.o").forEach(function(s){
+						s.classList.add("c");
+						s.classList.remove("o");
+					});
+					schedule_update_data++;
+					HideMenus();
+				}
+			}				
+		}
+
+
+
+		if (m.id == "menu_close_tree") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+
 					let tabsArr = [];
-					$(".active_tab:visible, .selected_tab:visible").each(function() {
-						tabsArr.push(parseInt(this.id));
-						if ($("#ch"+this.id).children().length > 0) {
-							$($("#ch"+this.id).find(".tab")).each(function() {
-								tabsArr.push(parseInt(this.id));
+					document.querySelectorAll("[id='"+menuItemNode.id+"'] .tab, [id='"+menuItemNode.id+"']").forEach(function(s){
+						tabsArr.push(parseInt(s.id));
+						if (s.childNodes[4].childNodes.length > 0) {
+							document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+								tabsArr.push(parseInt(t.id));
 							});
 						}
 					});
-					DetachTabs(tabsArr);
-				} else {
-					DetachTabs([menuItemId]);
+					CloseTabs(tabsArr);
+					HideMenus();
 				}
-			break;
-			case "tab_reload":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".selected_tab:visible").each(function() {
-						chrome.tabs.reload(parseInt(this.id));
-					});
-				} else {
-					chrome.tabs.reload(menuItemId);
-				}
-			break;
-			case "tab_pin":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".selected_tab:visible").each(function() {
-						chrome.tabs.update(parseInt(this.id), { pinned: ($("#" + menuItemId).is(".pin") ? false : true) });
-					});
-				} else {
-					chrome.tabs.update(menuItemId, { pinned: ($("#" + menuItemId).is(".pin") ? false : true) });
-				}
-			break;
-			case "tab_mute":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".selected_tab:visible").each(function() {
-						chrome.tabs.get(parseInt(this.id), function(tab) {
-							if (tab) {
-								chrome.tabs.update(tab.id, { muted: true });
-							}
-						});
-					});
-				} else {
-					chrome.tabs.get(menuItemId, function(tab) {
-						if (tab) {
-							chrome.tabs.update(tab.id, { muted: true });
-						}
-					});
-				}
-			break;
-			case "tab_unmute":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".selected_tab:visible").each(function() {
-						chrome.tabs.get(parseInt(this.id), function(tab) {
-							if (tab) {
-								chrome.tabs.update(tab.id, { muted: false });
-							}
-						});
-					});
-				} else {
-					chrome.tabs.get(menuItemId, function(tab) {
-						chrome.tabs.update(tab.id, { muted: false });
-					});
-				}
-			break;
-			case "tab_mute_other":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".tab:visible:not(.selected_tab)").each(function() {
-						chrome.tabs.update(parseInt(this.id), { muted: true });
-					});
-				} else {
-					$(".tab:visible:not(#" + menuItemId + ")").each(function() {
-						chrome.tabs.update(parseInt(this.id), { muted: true });
-					});
-				}
-			break;
-			case "tab_unmute_other":
-				if ($("#" + menuItemId).is(".selected_tab")) {
-					$(".tab:visible:not(.selected_tab)").each(function() {
-						chrome.tabs.update(parseInt(this.id), { muted: false });
-					});
-				} else {
-					$(".tab:visible:not(#" + menuItemId + ")").each(function() {
-						chrome.tabs.update(parseInt(this.id), { muted: false });
-					});
-				}
-			break;
-			case "tab_close":
-				CloseTabs($("#" + menuItemId).is(".selected_tab") ? $(".selected_tab:visible").map(function() { return parseInt(this.id); }).toArray() : [menuItemId]);
-			break;
-			case "tab_close_tree":
-				CloseTabs($("#" + menuItemId).find(".tab").map(function() { return parseInt(this.id); }).toArray());
-				CloseTabs([menuItemId]);
-			break;
-			case "tab_close_other":
-				CloseTabs($(".tab:visible:not(#" + menuItemId + ")").map(function() { return parseInt(this.id); }).toArray());
-			break;
-			case "tab_undo_close":
-				chrome.sessions.getRecentlyClosed(null, function(sessions) {
-					if (sessions.length > 0) {
-						chrome.sessions.restore(null, function() {});
-					}
-				});
-			break;
-			case "tab_discard":
-				DiscardTabs($("#" + menuItemId).is(".selected_tab") ? $(".tab.selected_tab:visible").map(function() { return parseInt(this.id); }).toArray() : [menuItemId]);
-			break;
-			case "tab_settings":
-				chrome.tabs.create({ "url": "options.html" });
-			break;
-			case "tab_expand_all":
-				$(".tab.c").addClass("o").removeClass("c");
-				schedule_update_data++;
-			break;
-			case "tab_collapse_all":
-				$(".tab.o").addClass("c").removeClass("o");
-				schedule_update_data++;
-			break;
-			case "folder_new":
-				AddNewFolder({});
-			break;
-			case "folder_rename":
-				if ($("#" + menuItemId).is(".selected_folder")) {
-					$(".selected_folder:visible").each(function() {
-						ShowRenameFolderDialog(this.id);
-					});
-				} else {
-					ShowRenameFolderDialog(menuItemId);
-				}
-			break;
-			case "folder_delete":
-				if ($("#" + menuItemId).is(".selected_folder")) {
-					$(".selected_folder:visible").each(function() {
-						RemoveFolder(this.id);
-					});
-				} else {
-					RemoveFolder(menuItemId);
-				}
-			break;
-			case "group_new":
-				AddNewGroup({});
-			break;
-			case "group_rename":
-				ShowGroupEditWindow();
-			break;
-			case "group_delete":
-				GroupRemove(menuItemId, false);
-			break;
-			case "group_delete_tabs_close":
-				GroupRemove(menuItemId, true);
-			break;
-			case "group_unload":
-				DiscardTabs($("#"+menuItemId+" .tab").map(function() { return parseInt(this.id); }).toArray());
-			break;
+			}				
 		}
-		$(".menu").hide(0);
-	});
 
+		if (m.id == "menu_rename_folder") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					ShowRenameFolderDialog(menuItemNode.id);
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "menu_delete_folder") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					if (menuItemNode.classList.contains("selected_folder")) {
+						document.querySelectorAll("#"+menuItemNode.id+"  .selected_folder, #"+menuItemNode.id).forEach(function(s){
+							RemoveFolder(s.id);
+						});
+					} else {
+						RemoveFolder(menuItemNode.id);
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_close_other") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					let tabsArr = [];
+					if (menuItemNode.classList.contains("selected_tab")) {
+						document.querySelectorAll(".pin:not(.selected_tab), #"+active_group+" .tab:not(.selected_tab)").forEach(function(s){
+							let children = document.querySelectorAll("[id='"+s.id+"'] .selected_tab");
+							if (children.length == 0 || opt.promote_children) {
+								tabsArr.push(parseInt(s.id));
+							}
+						});
+						CloseTabs(tabsArr);
+					} else {
+						if (menuItemNode.classList.contains("tab")) {
+							document.getElementById(active_group).appendChild(menuItemNode);
+						}
+						document.querySelectorAll(".pin:not([id='"+menuItemNode.id+"']), #"+active_group+" .tab:not([id='"+menuItemNode.id+"'])").forEach(function(s){
+							tabsArr.push(parseInt(s.id));
+						});
+			
+						CloseTabs(tabsArr);
+					}
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_bookmark_tree") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					Bookmark(menuItemNode);
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "menu_rename_group") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					ShowGroupEditWindow(menuItemNode.id);
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_delete_group") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					GroupRemove(menuItemNode.id, false);
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "menu_delete_group_tabs_close") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					GroupRemove(menuItemNode.id, true);
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "groups_menu_unload") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					let tabsArr = [];
+					document.querySelectorAll("[id='"+menuItemNode.id+"'] .tab").forEach(function(s){
+						tabsArr.push(parseInt(s.id));
+					});
+					DiscardTabs(tabsArr);					
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "menu_bookmark_group") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					Bookmark(menuItemNode);
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_new_group") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					AddNewGroup();
+					HideMenus();
+				}
+			}				
+		}
+
+
+		if (m.id == "menu_treetabs_settings") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					chrome.tabs.create({ "url": "options.html" });
+					HideMenus();
+				}
+			}				
+		}
+
+
+	});
 	
 	
 
 	// move tabs to group
-	// $(document).on("mousedown", "#tabs_menu_move_to_new_group, .move_to_group_menu_entry", function(event) {
+	// $(document).on("mousedown", "#menu_detach_tab_to_new_group, .move_to_group_menu_entry", function(event) {
 		// var tabsIds
-		// if ($(this).is("#tabs_menu_move_to_new_group")) {
+		// if ($(this).is("#menu_detach_tab_to_new_group")) {
 			// bg.dt.DropToGroup = AddNewGroup(575757);
 			// GetColorFromMiddlePixel(vt.menuItemId, bg.dt.DropToGroup);
 		// } else {

scripts/refresh.js

@@ -4,64 +4,80 @@
 
 // **********          REFRESH GUI          ***************
 
-function SetTRefreshEvents() {
-	$(window).on("resize", function(event) {
-		RefreshGUI();
-	});
-
-	// click on media icon
-	$(document).on("mousedown", ".tab_mediaicon", function(event) {
-		event.stopPropagation();
-		if (event.button == 0 && $(this).parent().parent().is(".audible, .muted")) {
-			chrome.tabs.get(parseInt(this.parentNode.parentNode.id), function(tab) {
-				if (tab) {
-					chrome.tabs.update(tab.id, {muted:!tab.mutedInfo.muted});
-				}
-			});
-		}
-	});
-}
-
 function RefreshGUI() {
-	if ($("#toolbar").children().length > 0) {
-		$("#toolbar").css({ "height": "", "width": "", "display": "", "padding": "", "border": "" });
-		if ($(".button").is(".on")) {
-			$("#toolbar").css({ "height": 53 });
+	let toolbar = document.getElementById("toolbar");
+	if (toolbar.children.length > 0) {
+		toolbar.style.height = "";
+		toolbar.style.width = "";
+		toolbar.style.display = "";
+		toolbar.style.border = "";
+		toolbar.style.padding = "";
+		if (document.querySelector(".on.button") != null) {
+			toolbar.style.height = "53px";
 		} else {
-			$("#toolbar").css({ "height": 26 });
+			toolbar.style.height = "26px";
 		}
 	} else {
-		$("#toolbar").css({ "height": 0, "width": "0px", "display": "none", "padding": "0", "border": "none" });
+		toolbar.style.height = "0px";
+		toolbar.style.width = "0px";
+		toolbar.style.display = "none";
+		toolbar.style.border = "none";
+		toolbar.style.padding = "0";
 	}
-	
-	if ($("#pin_list").children().length > 0) {
-		$("#pin_list").css({ "top": $("#toolbar")[0].getBoundingClientRect().height, "height": "", "width":"", "display": "", "padding": "", "border": "" });
+	let pin_list = document.getElementById("pin_list");
+	if (pin_list.children.length > 0) {
+		pin_list.style.top = toolbar.getBoundingClientRect().height + "px";
+		pin_list.style.height = "";
+		pin_list.style.width = document.body.clientWidth + "px";;
+		pin_list.style.display = "";
+		pin_list.style.border = "";
+		pin_list.style.padding = "";
 	} else {
-		$("#pin_list").css({ "height": "0px", "width": "0px", "display": "none", "padding": "0", "border": "none" });
+		pin_list.style.top = "0px";
+		pin_list.style.height = "0px";
+		pin_list.style.width = "0px";
+		pin_list.style.display = "none";
+		pin_list.style.border = "none";
+		pin_list.style.padding = "0";
 	}
-
-	$("#toolbar_groups").css({ "top": $("#toolbar").outerHeight() + $("#pin_list")[0].getBoundingClientRect().height, "height": $(window).height() - $("#toolbar").outerHeight() - $("#pin_list")[0].getBoundingClientRect().height});
-	
-	$(".group_title").each(function(){
-		$(this)[0].innerText = (bggroups[(this.id).substr(4)] ? bggroups[(this.id).substr(4)].name : caption_noname_group) + (opt.show_counter_groups ? " (" + $("#" + (this.id).substr(4) +" .tab").length + ")" : "");
+	let toolbar_groups = document.getElementById("toolbar_groups");
+	toolbar_groups.style.top = toolbar.getBoundingClientRect().height + pin_list.getBoundingClientRect().height + "px";
+	toolbar_groups.style.height = document.body.clientHeight - toolbar.getBoundingClientRect().height - pin_list.getBoundingClientRect().height + "px";
+	if (opt.show_counter_groups) {
+		document.querySelectorAll(".group").forEach(function(s){
+			let groupLabel = document.getElementById("_gte"+s.id);
+			if (groupLabel) {
+				groupLabel.textContent = (bggroups[s.id] ? bggroups[s.id].name : caption_noname_group) + " (" + document.querySelectorAll("#"+s.id+" .tab").length + ")";
+			}
+		});
+	} else {
+		document.querySelectorAll(".group").forEach(function(s){
+			let groupLabel = document.getElementById("_gte"+s.id);
+			if (groupLabel) {
+				groupLabel.textContent = bggroups[s.id] ? bggroups[s.id].name : caption_noname_group;
+			}
+		});
+	}
+	document.querySelectorAll(".group_button").forEach(function(s){
+		s.style.height = s.firstChild.getBoundingClientRect().height + "px";
 	});
-	
-	$(".group_button").each(function(){
-		$(this).css({ "height": $(this).children(0).innerWidth() });
-	});
-
-	$("#groups").css({ "top": $("#toolbar")[0].getBoundingClientRect().height + $("#pin_list")[0].getBoundingClientRect().height, "left": $("#toolbar_groups").outerWidth(), "height": $(window).height() - $("#pin_list")[0].getBoundingClientRect().height - $("#toolbar").outerHeight(), "width": $(window).width() - $("#toolbar_groups").outerWidth() });
+	let groups = document.getElementById("groups");
+	groups.style.top = toolbar.getBoundingClientRect().height + pin_list.getBoundingClientRect().height + "px";
+	groups.style.left = toolbar_groups.getBoundingClientRect().width + "px";
+	groups.style.height = document.body.clientHeight - pin_list.getBoundingClientRect().height - toolbar.getBoundingClientRect().height + "px";
+	groups.style.width = document.body.clientWidth - toolbar_groups.getBoundingClientRect().width + 1 + "px";
 }
 
 // set discarded class
 function RefreshDiscarded(tabId) {
-	if ($("#" + tabId).length > 0) {
+	let t = document.getElementById(tabId);
+	if (t != null) {
 		chrome.tabs.get(parseInt(tabId), function(tab) {
 			if (tab) {
 				if (tab.discarded) {
-					$("#" + tabId).addClass("discarded");
+					t.classList.add("discarded");
 				} else {
-					$("#" + tabId).removeClass("discarded");
+					t.classList.remove("discarded");
 				}
 			}
 		});
@@ -70,24 +86,29 @@ function RefreshDiscarded(tabId) {
 
 // set discarded class
 function SetAttentionIcon(tabId) {
-	if ($("#" + tabId).length > 0) {
-		$("#" + tabId).addClass("attention");
+	let t = document.getElementById(tabId);
+	if (t != null) {
+		t.classList.add("attention");
 	}
 }
 
 // change media icon
 function RefreshMediaIcon(tabId) {
-	if ($("#" + tabId).length > 0) {
+	let t = document.getElementById(tabId);
+	if (t != null) {
 		chrome.tabs.get(parseInt(tabId), function(tab) {
 			if (tab) {
 				if (tab.mutedInfo.muted) {
-					$("#" + tabId).removeClass("audible").addClass("muted");
+					t.classList.remove("audible");
+					t.classList.add("muted");
 				}
 				if (!tab.mutedInfo.muted && tab.audible) {
-					$("#" + tabId).removeClass("muted").addClass("audible");
+					t.classList.remove("muted");
+					t.classList.add("audible");
 				}
 				if (!tab.mutedInfo.muted && !tab.audible) {
-					$("#" + tabId).removeClass("audible").removeClass("muted");
+					t.classList.remove("audible");
+					t.classList.remove("muted");
 				}
 			}
 		});
@@ -99,68 +120,73 @@ function RefreshMediaIcon(tabId) {
 function VivaldiRefreshMediaIcons() {
 	setInterval(function() {
 		chrome.tabs.query({currentWindow: true}, function(tabs) {
-			$(".audible, .muted").removeClass("audible").removeClass("muted");
+			document.querySelectorAll(".audible, .muted").forEach(function(s){
+				s.classList.remove("audible");
+				s.classList.remove("muted");
+			});
 			let tc = tabs.length;
 			for (var ti = 0; ti < tc; ti++) {
 				if (tabs[ti].audible) {
-					$("#" + tabs[ti].id).addClass("audible");
+					document.getElementById(tabs[ti].id).classList.add("audible");
 				}
 				if (tabs[ti].mutedInfo.muted) {
-					$("#" + tabs[ti].id).addClass("muted");
+					document.getElementById(tabs[ti].id).classList.add("muted");
 				}
 			}
 		});
-	}, 1400);
+	// }, 1400);
+	}, 1000);
 }
 
 function GetFaviconAndTitle(tabId, addCounter) {
-	if ($("#" + tabId)[0]) {
+	let t = document.getElementById(tabId);
+	if (t != null) {
 		chrome.tabs.get(parseInt(tabId), function(tab) {
 			if (tab){
 				let title = tab.title ? tab.title : tab.url;
+				let tHeader = t.childNodes[3];
+				let tTitle = tHeader.childNodes[1];
 				if (tab.status == "complete") {
-					$("#" + tabId).removeClass("loading");
+					t.classList.remove("loading");
 					// change title
-					$("#tab_title" + tab.id)[0].textContent = title;
-					$("#tab_header" + tab.id).attr("title", title);
-					$("#"+tabId).data("title", title);
-					
+					tTitle.textContent = title;
+					tHeader.title = title;
+					tHeader.setAttribute("tabTitle", title);
 					// compatibility with various Tab suspender extensions
 					if (tab.favIconUrl != undefined && tab.favIconUrl.match("data:image/png;base64") != null) {
-						$("#tab_header" + tab.id).css({ "background-image": "url(" + tab.favIconUrl + ")" });
+						tHeader.style.backgroundImage = "url(" + tab.favIconUrl + ")";
 					} else {
 						// case for internal pages, favicons don't have access, but can be loaded from url
 						if (tab.url.match("opera://|vivaldi://|browser://|chrome://|chrome-extension://") != null) {
-							$("#tab_header" + tab.id).css({ "background-image": "url(chrome://favicon/" + tab.url + ")" });
+							tHeader.style.backgroundImage = "url(chrome://favicon/" + tab.url + ")";
 						} else {
 							// change favicon
-							var img = new Image();
+							let img = new Image();
 							img.src = tab.favIconUrl;
 							img.onload = function() {
-								$("#tab_header" + tab.id).css({ "background-image": "url(" + tab.favIconUrl + ")" });
+								tHeader.style.backgroundImage = "url(" + tab.favIconUrl + ")";
 							};
 							img.onerror = function() {
-								$("#tab_header" + tab.id).css({ "background-image": ((tab.url == "" || browserId == "F") ? "url(./theme/icon_empty.svg)" : ("url(chrome://favicon/" + tab.url + ")")) });
-								// $("#tab_header" + tab.id).css({ "background-image": "url(" + tab.url + ")" });
+								tHeader.style.backgroundImage = ((tab.url == "" || browserId == "F") ? "url(./theme/icon_empty.svg)" : ("url(chrome://favicon/" + tab.url + ")"));
+								// "url(" + tab.url + ")"
 							}
 						}
 					}
 				}
 				if (tab.status == "loading") {
-					$("#tab_header" + tab.id).css({ "background-image": "" });
-					$("#" + tabId).addClass("loading");
 					title = tab.title ? tab.title : caption_loading;
-					$("#tab_title" + tab.id)[0].textContent = title;
-					$("#tab_header" + tab.id).attr("title", title);
-					$("#"+tabId).data("title", title);
+					t.classList.add("loading");
+					tHeader.style.backgroundImage = "";
+					tHeader.title = caption_loading;
+					tHeader.setAttribute("tabTitle", caption_loading);
+					tTitle.textContent = caption_loading;
 					setTimeout(function() {
-						if ($("#" + tabId)[0]) GetFaviconAndTitle(tabId, addCounter);
+						if (document.getElementById(tab.id) != null) GetFaviconAndTitle(tab.id, addCounter);
 					}, 1000);
 				}
 				if (addCounter && (opt.show_counter_tabs || opt.show_counter_tabs_hints)) {
 					RefreshTabCounter(tabId);
 				}
-		
 			}
 		});
 	}
@@ -168,22 +194,23 @@ function GetFaviconAndTitle(tabId, addCounter) {
 
 // refresh open closed trees states
 function RefreshExpandStates() {
-	$(".folder:visible").each(function() {
-		if ($("#ch"+this.id).children().length == 0 && $("#cf"+this.id).children().length == 0) {
-			$(this).removeClass("o").removeClass("c").addClass("n");
+	document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
+		if (s.childNodes[4].children.length == 0 && s.childNodes[5].children.length == 0) {
+			s.classList.remove("o");
+			s.classList.remove("c");
 		} else {
-			if ($(this).is(":not(.o, .c)")) {
-				$(this).addClass("o").removeClass("n");
+			if (s.classList.contains("o") == false && s.classList.contains("c") == false) {
+				s.classList.add("o");
 			}
 		}
 	});
-
-	$(".tab:visible").each(function() {
-		if ($("#ch"+this.id).children().length == 0) {
-			$(this).removeClass("o").removeClass("c").addClass("n");
+	document.querySelectorAll("#"+active_group+" .tab").forEach(function(s){
+		if (s.childNodes[4].children.length == 0) {
+			s.classList.remove("o");
+			s.classList.remove("c");
 		} else {
-			if ($(this).is(":not(.o, .c)")) {
-				$(this).addClass("o").removeClass("n");
+			if (s.classList.contains("o") == false && s.classList.contains("c") == false) {
+				s.classList.add("o");
 			}
 		}
 	});
@@ -191,48 +218,50 @@ function RefreshExpandStates() {
 
 function RefreshCounters() {
 	if (opt.show_counter_tabs || opt.show_counter_tabs_hints) {
-		$(".tab.n:visible").each(function() {
-			if ($("#tab_title"+this.id)[0]) {
-				$("#tab_title"+this.id)[0].textContent = $(this).data("title");
-				$("#tab_header"+this.id).attr("title", $(this).data("title"));
+		document.querySelectorAll("#"+active_group+" .tab").forEach(function(s){
+			let title = s.childNodes[3].getAttribute("tabTitle");
+			if (title != null) {
+				s.childNodes[3].title = title;
+				s.childNodes[3].childNodes[1].textContent =title;
 			}
 		});
-		$(".tab.c:visible, .tab.o:visible").each(function() {
-			if (opt.show_counter_tabs) {
-				$("#tab_title"+this.id)[0].textContent = ("("+$("#"+this.id+" .tab").length+") ") + $(this).data("title");
+		document.querySelectorAll("#"+active_group+" .o.tab, #"+active_group+" .c.tab").forEach(function(s){
+			let title = s.childNodes[3].getAttribute("tabTitle");
+
+			if (opt.show_counter_tabs && title != null) {
+				s.childNodes[3].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
 			}
 			if (opt.show_counter_tabs_hints) {
-				$("#tab_header"+this.id).attr("title", ("("+$("#"+this.id+" .tab").length+") ") + $(this).data("title"));
+				s.childNodes[3].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
 			}
 		});
-		$(".folder:visible").each(function() {
-			if (opt.show_counter_tabs) {
-				$("#folder_title"+this.id)[0].textContent = ("("+$("#"+this.id+" .tab").length+") ") + bgfolders[this.id].name;
+		
+		
+		document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
+			if (opt.show_counter_tabs && bgfolders[s.id]) {
+				s.childNodes[3].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + bgfolders[s.id].name;
 			}
-			if (opt.show_counter_tabs_hints) {
-				$("#folder_header"+this.id).attr("title", ("("+$("#"+this.id+" .tab").length+") ") + bgfolders[this.id].name);
+			if (opt.show_counter_tabs_hints && bgfolders[s.id]) {
+				s.childNodes[3].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + bgfolders[s.id].name;
 			}
 		});
 	}
 }
 
 function RefreshTabCounter(tabId) {
-	if (opt.show_counter_tabs || opt.show_counter_tabs_hints) {
-		if ($("#"+tabId).data("title")) {
+	let t = document.getElementById(tabId);
+	let title = t.childNodes[3].getAttribute("tabTitle");
+	if (t != null && title != null) {
+		if (t.classList.contains("o") || t.classList.contains("c")) {
 			if (opt.show_counter_tabs) {
-				if ($(".c#"+tabId+", .o#"+tabId)[0]) {
-					$("#tab_title"+tabId)[0].textContent = ("("+$("#ch"+tabId+" .tab").length+") ") + $("#"+tabId).data("title");
-				} else {
-					$("#tab_title"+tabId)[0].textContent = $("#"+tabId).data("title");
-				}
+				t.childNodes[3].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
 			}
 			if (opt.show_counter_tabs_hints) {
-				if ($(".c#"+tabId+", .o#"+tabId)[0]) {
-					$("#tab_header"+tabId).attr("title", ("("+$("#ch"+tabId+" .tab").length+") ") + $("#"+tabId).data("title"));
-				} else {
-					$("#tab_header"+tabId).attr("title", $("#"+tabId).data("title"));
-				}
+				t.childNodes[3].title = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
 			}
+		} else {
+				t.childNodes[3].title = title;
+				t.childNodes[3].childNodes[1].textContent = title;
 		}
 	}
 }

scripts/toolbar.js

@@ -4,366 +4,572 @@
 
 // **********             TOOLBAR           ***************
 
+// RESTORE LAST USED SEARCH TYPE (URL OR TITLE) IN TOOLBAR SEARCH
 function RestoreToolbarSearchFilter() {
 	chrome.runtime.sendMessage({command: "get_search_filter", windowId: CurrentWindowId}, function(response) {
+		let ButtonFilter = document.getElementById("button_filter_type");
 		if (response == "url") {
-			$("#button_filter_type").addClass("url").removeClass("title");
+			ButtonFilter.classList.add("url");
+			ButtonFilter.classList.remove("title");
 		} else {
-			$("#button_filter_type").addClass("title").removeClass("url");
+			ButtonFilter.classList.add("title");
+			ButtonFilter.classList.remove("url");
 		}
 	});
 }	
 
+// RESTORE LAST ACTIVE SHELF (SEARCH, TOOLS, GROUPS, SESSION OR FOLDER) IN TOOLBAR
 function RestoreToolbarShelf() {
 	chrome.runtime.sendMessage({command: "get_active_shelf", windowId: CurrentWindowId}, function(response) {
-		$("#filter_box").attr("placeholder", caption_searchbox);
-		$("#filter_box").css({"opacity": 1});
-		$(".on").removeClass("on");
-		$(".toolbar_shelf").addClass("hidden");
-		if (response == "search" && $("#button_search").length != 0) {
-			$("#toolbar_search").removeClass("hidden");
-			$("#button_search").addClass("on");
+		let filterBox = document.getElementById("filter_box");
+		filterBox.setAttribute("placeholder", caption_searchbox);
+		filterBox.style.opacity = "1";
+		
+		document.querySelectorAll(".on").forEach(function(s){
+			s.classList.remove("on");
+		});
+		document.querySelectorAll(".toolbar_shelf").forEach(function(s){
+			s.classList.add("hidden");
+		});
+
+		if (response == "search" && document.getElementById("button_search") != null) {
+			document.getElementById("toolbar_search").classList.remove("hidden");
+			document.getElementById("button_search").classList.add("on");
 		}
-		if (response == "tools" && $("#button_tools").length != 0) {
-			$("#toolbar_shelf_tools").removeClass("hidden");
-			$("#button_tools").addClass("on");
+
+		if (response == "tools" && document.getElementById("button_tools") != null) {
+			document.getElementById("toolbar_shelf_tools").classList.remove("hidden");
+			document.getElementById("button_tools").classList.add("on");
 		}
-		if (response == "groups" && $("#button_groups").length != 0) {
-			$("#toolbar_shelf_groups").removeClass("hidden");
-			$("#button_groups").addClass("on");
+
+		if (response == "groups" && document.getElementById("button_groups") != null) {
+			document.getElementById("toolbar_shelf_groups").classList.remove("hidden");
+			document.getElementById("button_groups").classList.add("on");
 		}
-		if (response == "backup" && $("#button_backup").length != 0) {
-			$("#toolbar_shelf_backup").removeClass("hidden");
-			$("#button_backup").addClass("on");
+
+		if (response == "backup" && document.getElementById("button_backup") != null) {
+			document.getElementById("toolbar_shelf_backup").classList.remove("hidden");
+			document.getElementById("button_backup").classList.add("on");
 		}
-		if (response == "folders" && $("#button_folders").length != 0) {
-			$("#toolbar_shelf_folders").removeClass("hidden");
-			$("#button_folders").addClass("on");
+
+		if (response == "folders" && document.getElementById("button_folders") != null) {
+			document.getElementById("toolbar_shelf_folders").classList.remove("hidden");
+			document.getElementById("button_folders").classList.add("on");
 		}
 		
 		if (browserId != "F") {
-			let bak1 = LoadData("windows_BAK1", []);
-			let bak2 = LoadData("windows_BAK2", []);
-			let bak3 = LoadData("windows_BAK3", []);
+			chrome.storage.local.get(null, function(storage) {
+				let bak1 = storage["windows_BAK1"] ? storage["windows_BAK1"] : [];
+				let bak2 = storage["windows_BAK2"] ? storage["windows_BAK2"] : [];
+				let bak3 = storage["windows_BAK3"] ? storage["windows_BAK3"] : [];
 
-			if (bak1.length && $(".button#button_load_bak1")[0]) {
-				$(".button#button_load_bak1").removeClass("disabled");
-			} else {
-				$(".button#button_load_bak1").addClass("disabled");
-			}
+				if (bak1.length && document.getElementById("#button_load_bak1") != null) {
+					document.getElementById("button_load_bak1").classList.remove("disabled");
+				} else {
+					document.getElementById("button_load_bak1").classList.add("disabled");
+				}
 				
-			if (bak2.length && $(".button#button_load_bak2")[0]) {
-				$(".button#button_load_bak2").removeClass("disabled");
-			} else {
-				$(".button#button_load_bak2").addClass("disabled");
-			}
+				if (bak2.length && document.getElementById("#button_load_bak2") != null) {
+					document.getElementById("button_load_bak2").classList.remove("disabled");
+				} else {
+					document.getElementById("button_load_bak2").classList.add("disabled");
+				}
 
-			if (bak3.length && $(".button#button_load_bak3")[0]) {
-				$(".button#button_load_bak3").removeClass("disabled");
-			} else {
-				$(".button#button_load_bak3").addClass("disabled");
-			}
+				if (bak3.length && document.getElementById("#button_load_bak3") != null) {
+					document.getElementById("button_load_bak3").classList.remove("disabled");
+				} else {
+					document.getElementById("button_load_bak3").classList.add("disabled");
+				}
+
+			});
 		}
 		
 		RefreshGUI();
 	});
 }
 
-function SetToolbarShelfToggle(click_type) {
-	// tools and search buttons toggle
-	$(document).on(click_type, "#button_tools, #button_search, #button_groups, #button_backup, #button_folders", function(event) {
-		if (event.button == 0) {
-			if ($(this).is(".on")) {
-				$(".on").removeClass("on");
-				$(".toolbar_shelf").addClass("hidden");
-				chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "", windowId: CurrentWindowId});
-			} else {
-				$(".toolbar_shelf").addClass("hidden");
-				if ($(this).is("#button_tools")) {
-					$("#toolbar_shelf_tools").removeClass("hidden");
-					chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "tools", windowId: CurrentWindowId});
-				}
-				if ($(this).is("#button_search")) {
-					$("#toolbar_search").removeClass("hidden");
-					chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "search", windowId: CurrentWindowId});
-				}
-				if ($(this).is("#button_groups")) {
-					$("#toolbar_shelf_groups").removeClass("hidden");
-					chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "groups", windowId: CurrentWindowId});
-				}
-				if ($(this).is("#button_backup")) {
-					$("#toolbar_shelf_backup").removeClass("hidden");
-					chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "backup", windowId: CurrentWindowId});
-				}
-				if ($(this).is("#button_folders")) {
-					$("#toolbar_shelf_folders").removeClass("hidden");
-					chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "folders", windowId: CurrentWindowId});
-				}
-				$(".button").removeClass("on");
-				$(this).addClass("on");
-			}
-			RefreshGUI();
+// FUNCTION TO TOGGLE SHELFS AND SAVE IT
+function ShelfToggle(mousebutton, button, toolbarId, SendMessage) {
+	if (mousebutton == 1) {
+		if (button.classList.contains("on")) {
+			document.querySelectorAll(".on").forEach(function(s){
+				s.classList.remove("on");
+			});
+			document.querySelectorAll(".toolbar_shelf").forEach(function(s){
+				s.classList.add("hidden");
+			});
+		} else {
+			document.querySelectorAll(".toolbar_shelf:not(#"+toolbarId+")").forEach(function(s){
+				s.classList.add("hidden");
+			});
+			document.getElementById(toolbarId).classList.remove("hidden");
+			chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: SendMessage, windowId: CurrentWindowId});
+			document.querySelectorAll(".on:not(#"+button.id+")").forEach(function(s){
+				s.classList.remove("on");
+			});
+			button.classList.add("on");
 		}
-	});
+		RefreshGUI();
+	}
 }
 
+// ASSIGN MOUSE EVENTS FOR TOOLBAR BUTTONS, Buttons AND ToolbarShelfToggle, PARAMETERS DECIDE IF BUTTONS ARE CLICKABLE
+// IN OPTIONS PAGE - TOOLBAR BUTTONS SAMPLES, MUST NOT CALL FUNCTIONS ON CLICKS, BUT STILL SHELFS BUTTONS MUST TOGGLE AND MOREOVER ON CLICK AND NOT ON MOUSEDOWN THIS IS WHERE ToolbarShelfToggleClickType="Click" IS NECESSARY
+function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, ToolbarShelfToggleClickType) {
 
-function SetToolbarEvents() {
-	// go to previous or next search result
-	$(document).on("mousedown", "#filter_search_go_prev, #filter_search_go_next", function(event) {
-		if (event.button != 0 || $(".tab.filtered").length == 0) {
-			return;
-		}
+	let ClearSearch = document.getElementById("button_filter_clear");
+	let FilterBox = document.getElementById("filter_box");
 	
-		$(".highlighted_search").removeClass("highlighted_search");
-		if ($(this).is("#filter_search_go_prev")){
-			if (SearchIndex == 0) {
-				SearchIndex = $(".tab.filtered").length-1;
-			} else {
-				SearchIndex--;
+	if (ClearSearch != null && FilterBox != null) {
+		if (CleanPreviousBindings) {
+			FilterBox.removeEventListener("oninput", function(){});
+			ClearSearch.removeEventListener("onmousedown", function(){});
+		}	
+		if (Buttons) {
+			// FILTER ON INPUT
+			FilterBox.oninput = function(event) {
+				FindTab(this.value);
 			}
-		} else {
-			if (SearchIndex == $(".tab.filtered").length-1) {
-				SearchIndex = 0;
-			} else {
-				SearchIndex++;
-			}
-		}
-		ScrollToTab($(".tab.filtered")[SearchIndex].id);
-		$($(".tab.filtered")[SearchIndex]).addClass("highlighted_search");
-	});
-	// new tab
-	$(document).on("mousedown", "#button_new", function(event) {
-		if (event.button == 1 && $(".active_tab:visible")[0]) {
-			chrome.tabs.duplicate(parseInt($(".active_tab:visible")[0].id), function(tab) {
-				setTimeout(function() {
-					$("#"+tab.id).insertAfter($(".active_tab:visible")[0]);
-					RefreshExpandStates();
-					schedule_update_data++;
-					RefreshCounters();
-				}, 100);
-			});
-		}
-		if (event.button == 2 && $("#"+active_group+" .active_tab")[0]) {
-			ScrollToTab($("#"+active_group+" .active_tab")[0].id);
-		}
-	});
-	$(document).on("click", "#button_new", function(event) {
-		if (event.button == 0) {
-				chrome.tabs.create({});
-		}
-	});
-	// pin tab
-	$(document).on("mousedown", "#button_pin", function(event) {
-		if (event.button == 0) {
-			$(".active_tab:visible, .selected_tab:visible").each(function() {
-				chrome.tabs.update(parseInt(this.id), { pinned: ($(this).is(".pin") ? false : true) });
-			});
-		}
-	});
-	// undo close
-	$(document).on("mousedown", "#button_undo", function(event) {
-		if (event.button == 0) {
-			chrome.sessions.getRecentlyClosed( null, function(sessions) {
-				if (sessions.length > 0) {
-					chrome.sessions.restore(null, function(restored) {
-						// if (browserId == "F") {
-							// if (restored.tab != undefined) {
-								// let t = Promise.resolve(browser.sessions.getTabValue(restored.tab.id, "TTId")).then(function(TTId) {
-									// TODO RESTORE TREE IF POSSIBLE
-									// console.log(TTId);
-								// });
-							// }
-						// }
-					});
-				}
-			});
-		}
-	});
-	// move tab to new window (detach)
-	$(document).on("mousedown", "#button_move", function(event) {
-		if (event.button == 0) {
-			if ($("#"+active_group+" .selected_tab")[0]){
-				let detach = GetSelectedTabs();
-				DetachTabs(detach.TabsIds, {});
-			} else {
-				if ($("#"+active_group+" .selected_folder")[0]){
-					let detach = GetSelectedFolders();
-					DetachTabs(detach.TabsIds, detach.Folders);
+			// CLEAR FILTER BUTTON
+			ClearSearch.onmousedown = function(event) {
+				if (event.which == 1) {
+					this.style.opacity = "0";
+					this.style.opacity = "0";
+					this.setAttribute("title", "");
+					FindTab("");
 				}
 			}
 		}
-	});
-	// move tab to new window (detach)
-	$(document).on("mousedown", "#repeat_search", function(event) {
-		if (event.button == 0) {
-			FindTab($("#filter_box")[0].value);
-		}
-	});
-	// filter on input
-	$("#filter_box").on("input", function() {
-		FindTab($("#filter_box")[0].value);
-	});
-	// change filtering type
-	$(document).on("mousedown", "#button_filter_type", function(event) {
-		if (event.button == 0) {
-			if ($("#button_filter_type").is(".url")) {
-				$("#button_filter_type").removeClass("url").addClass("title");
-			} else {
-				$("#button_filter_type").addClass("url").removeClass("title");
-			}
-			FindTab($("#filter_box")[0].value);
-			chrome.runtime.sendMessage({command: "set_search_filter", search_filter:  ($(this).is(".url") ? "url" : "title"), windowId: CurrentWindowId});
-		}
-	});
-	// clear filter button
-	$(document).on("mousedown", "#button_filter_clear", function(event) {
-		if (event.button == 0) {
-			$("#button_filter_clear").css({"opacity": "0"}).attr("title", "");
-			FindTab("");
-		}
-	});
-	// sort tabs
-	// $(document).on("mousedown", "#button_sort", function(event) {
-		// if (event.button == 0) {
-			// SortTabs();
-		// }
-	// });
-	// vertical tabs options
-	$(document).on("mousedown", "#button_options", function(event) {
-		if (event.button == 0) {
-			chrome.tabs.create({url: "options.html" });
-		}
-	});
-	// new group
-	$(document).on("mousedown", "#button_new_group", function(event) {
-		if (event.button == 0) {
-			AddNewGroup({});
-		}
-	});
-	// remove group
-	$(document).on("mousedown", "#button_remove_group", function(event) {
-		let close_tabs = event.shiftKey;
-		if (event.button == 0) {
-			if (active_group != "tab_list") {
-				GroupRemove(active_group, close_tabs);
-			}
-		}
-	});
-	// edit group
-	$(document).on("mousedown", "#button_edit_group", function(event) {
-		if (event.button == 0 && active_group != "tab_list") {
-			menuItemId = active_group;
-			ShowGroupEditWindow();
-		}
-	});
-	// import-export group
-	$(document).on("mousedown", "#button_export_group", function(event) {
-		if (event.button == 0) {
-			ExportGroup(bggroups[active_group].name+".tt_group");
-		}
-	});
-	$(document).on("mousedown", "#button_import_group", function(event) {
-		if (event.button == 0) {
-			ShowOpenFileDialog("file_import_group", ".tt_group");
-		}
-	});
-	$(document).on("change", "#file_import_group", function(event) {
-		ImportGroup();
-	});
-
-
-	// new folder
-	$(document).on("mousedown", "#button_new_folder", function(event) {
-		if (event.button == 0) {
-			AddNewFolder({});
-		}
-	});
-	// rename folder
-	$(document).on("mousedown", "#button_edit_folder", function(event) {
-		if (event.button == 0 && $(".selected_folder:visible")[0]) {
-			ShowRenameFolderDialog($(".selected_folder:visible")[0].id);
-		}
-	});
-	// remove folder
-	$(document).on("mousedown", "#button_remove_folder", function(event) {
-		// let close_tabs = event.shiftKey;
-		if (event.button == 0 && $(".selected_folder:visible")[0]) {
-			$("#"+active_group+" .selected_folder").each(function() {
-				RemoveFolder(this.id);
-			});
-			// RemoveFolder($(".selected_folder:visible")[0].id);
-		}
-	});
-	// discard tabs
-	$(document).on("mousedown", "#button_discard", function(event) {
-		if (event.button == 0) {
-			DiscardTabs($(".selected_tab")[0] ? ($(".selected_tab").map(function() { return parseInt(this.id); }).toArray()) : ($(".pin, .tab").map(function() { return parseInt(this.id); }).toArray())       );
-		}
-	});
-
-	if (browserId != "F") {
-		// bookmarks
-		$(document).on("mousedown", "#button_bookmarks", function(event) {
-			if (event.button == 0) {
-				chrome.tabs.create({url: "chrome://bookmarks/"});
-			}
-		});
-		// downloads
-		$(document).on("mousedown", "#button_downloads", function(event) {
-			if (event.button == 0) {
-				chrome.tabs.create({url: "chrome://downloads/"});
-			}
-		});
-		// history
-		$(document).on("mousedown", "#button_history", function(event) {
-			if (event.button == 0) {
-				chrome.tabs.create({url: "chrome://history/"});
-			}
-		});
-		// extensions
-		$(document).on("mousedown", "#button_extensions", function(event) {
-			if (event.button == 0) {
-				chrome.tabs.create({url: "chrome://extensions"});
-			}
-		});
-		// settings
-		$(document).on("mousedown", "#button_settings", function(event) {
-			if (event.button == 0) {
-				chrome.tabs.create({url: "chrome://settings/"});
-			}
-		});
-		// load backups
-		$(document).on("mousedown", "#button_load_bak1:not(.disabled), #button_load_bak2:not(.disabled), #button_load_bak3:not(.disabled)", function(event) {
-			if (event.button == 0) {
-				let BakN = (this.id).substr(15);
-				chrome.storage.local.get(null, function(items) {
-					if (Object.keys(items["windows_BAK"+BakN]).length > 0) { chrome.storage.local.set({"windows": items["windows_BAK"+BakN]}); }
-					if (Object.keys(items["tabs_BAK"+BakN]).length > 0) { chrome.storage.local.set({"tabs": items["tabs_BAK"+BakN]}); alert("Loaded backup"); }
-					chrome.runtime.sendMessage({command: "reload"}); chrome.runtime.sendMessage({command: "reload_sidebar"}); location.reload();
-				});
-			}
-		});
 	}
 
-	// import-export backups
-	$(document).on("mousedown", "#button_export_bak", function(event) {
-		ExportSession("Session.tt_session");
-	});
+	document.querySelectorAll(".button").forEach(function(s){
 		
-	$(document).on("mousedown", "#button_import_bak", function(event) {
-		ShowOpenFileDialog("file_import_backup", ".tt_session");
-	});
-	$(document).on("change", "#file_import_backup", function(event) {
-		ImportSession();
-	});
+		if (CleanPreviousBindings) {
+			s.removeEventListener("onmousedown", function(){});
+			s.removeEventListener("onclick", function(){});
+			s.removeEventListener("click", function(){});
+		}	
+			
+		if (ToolbarShelfToggle) {
+			if (s.id == "button_search") {
+				s.addEventListener(ToolbarShelfToggleClickType, function(event) {
+					if (event.which == 1) {
+						ShelfToggle(event.which, this, "toolbar_search", "search");
+					}
+				});
+			}
+			if (s.id == "button_tools") {
+				s.addEventListener(ToolbarShelfToggleClickType, function(event) {
+					if (event.which == 1) {
+						ShelfToggle(event.which, this, "toolbar_shelf_tools", "tools");
+					}
+				});
+			}
+			if (s.id == "button_groups") {
+				s.addEventListener(ToolbarShelfToggleClickType, function(event) {
+					if (event.which == 1) {
+						ShelfToggle(event.which, this, "toolbar_shelf_groups", "groups");
+					}
+				});
+			}
+			if (s.id == "button_backup") {
+				s.addEventListener(ToolbarShelfToggleClickType, function(event) {
+					if (event.which == 1) {
+						ShelfToggle(event.which, this, "toolbar_shelf_backup", "backup");
+					}
+				});
+			}
+			if (s.id == "button_folders") {
+				s.addEventListener(ToolbarShelfToggleClickType, function(event) {
+					if (event.which == 1) {
+						ShelfToggle(event.which, this, "toolbar_shelf_folders", "folders");
+					}
+				});
+			}
+		}
+		
+		if (Buttons) {
+			// NEW TAB
+			if (s.id == "button_new") {
+				s.onclick = function(event) {
+					if (event.which == 1) {
+						OpenNewTab();
+					}
+				}
+				s.onmousedown = function(event) {
+					// DUPLICATE TAB
+					if (event.which == 2) {
+						event.preventDefault();
+						let activeTab = document.querySelector("#"+active_group+" .active_tab") != null ? document.querySelector("#"+active_group+" .active_tab") : document.querySelector(".pin.active_tab") != null ? document.querySelector(".pin.active_tab") : null;
+						if (activeTab != null) {
+							chrome.tabs.duplicate(parseInt(activeTab.id), function(tab) {
+								setTimeout(function() {
+									if (activeTab.nextSibling != null) {
+										activeTab.parentNode.insertBefore(document.getElementById(tab.id), activeTab.nextSibling);
+									} else {
+										activeTab.parentNode.appendChild(document.getElementById(tab.id));
+									}							
+									RefreshExpandStates();
+									schedule_update_data++;
+									RefreshCounters();
+								}, 300);
+							});
+					}
+					}
+					// SCROLL TO TAB
+					if (event.which == 3) {
+						let activeTab = document.querySelector("#"+active_group+" .active_tab") != null ? document.querySelector("#"+active_group+" .active_tab") : document.querySelector(".pin.active_tab") != null ? document.querySelector(".pin.active_tab") : null;
+						if (activeTab != null) {
+							ScrollToTab(activeTab.id);
+						}
+					}
+				}
+			}
+			// PIN TAB
+			if (s.id == "button_pin") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						let Tabs = document.querySelectorAll(".pin.active_tab, .pin.selected_tab, #"+active_group+" .active_tab, #"+active_group+" .selected_tab");
+						Tabs.forEach(function(s){
+							chrome.tabs.update(parseInt(s.id), { pinned: Tabs[0].classList.contains("tab") });
+						})
+					}
+				}				
+			}
+			// VERTICAL TABS OPTIONS
+			if (s.id == "button_options") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						chrome.tabs.create({url: "options.html"});
+					}
+				}
+			}
+
+			// UNDO CLOSE
+			if (s.id == "button_undo") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						chrome.sessions.getRecentlyClosed( null, function(sessions) {
+							if (sessions.length > 0) {
+								chrome.sessions.restore(null, function(restored) {});
+							}
+						});
+					}
+				}
+			}
+
+			// MOVE TAB TO NEW WINDOW (DETACH)
+			if (s.id == "button_detach" || s.id == "button_move") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						if (document.querySelectorAll("#"+active_group+" .selected_folder").length > 0){
+							let detach = GetSelectedFolders();
+							Detach(detach.TabsIds, detach.Folders);
+						} else {
+							let tabsArr = [];
+							document.querySelectorAll(".pin.selected_tab, .pin.active_tab, #"+active_group+" .selected_tab, #"+active_group+" .active_tab").forEach(function(s){
+								tabsArr.push(parseInt(s.id));
+								if (s.childNodes[4].childNodes.length > 0) {
+									document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+										tabsArr.push(parseInt(t.id));
+									});
+								}
+							});
+							Detach(tabsArr);
+						}
+					}
+				}
+			}
+
+			// SHOW/HIDE GROUPS TOOLBAR
+			if (s.id == "button_groups_toolbar_hide") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						GroupsToolbarToggle();
+					}
+				}
+			}
+
+			// GO TO PREVIOUS SEARCH RESULT
+			if (s.id == "filter_search_go_prev") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						let filtered = document.querySelectorAll("#"+active_group+" .tab.filtered");
+						if (filtered.length > 0) {
+							document.querySelectorAll(".highlighted_search").forEach(function(s){
+								s.classList.remove("highlighted_search");
+							});
+							if (SearchIndex == 0) {
+								SearchIndex = filtered.length-1;
+							} else {
+								SearchIndex--;
+							}
+							filtered[SearchIndex].classList.add("highlighted_search");
+							ScrollToTab(filtered[SearchIndex].id);
+						}
+					}
+				}
+			}
+	
+			// GO TO NEXT SEARCH RESULT
+			if (s.id == "filter_search_go_next") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						let filtered = document.querySelectorAll("#"+active_group+" .tab.filtered");
+						if (filtered.length > 0) {
+							document.querySelectorAll(".highlighted_search").forEach(function(s){
+								s.classList.remove("highlighted_search");
+							});
+							if (SearchIndex == filtered.length-1) {
+								SearchIndex = 0;
+							} else {
+								SearchIndex++;
+							}
+							filtered[SearchIndex].classList.add("highlighted_search");
+							ScrollToTab(filtered[SearchIndex].id);
+						}
+					}
+				}
+			}
+				
+			// NEW GROUP
+			if (s.id == "button_new_group") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						AddNewGroup();
+					}
+				}
+			}
+
+			// REMOVE GROUP
+			if (s.id == "button_remove_group") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						if (active_group != "tab_list") {
+							GroupRemove(active_group, event.shiftKey);
+						}
+					}
+				}
+			}
 
 			
-	$(document).on("mousedown", "#button_import_merge_bak", function(event) {
-		ShowOpenFileDialog("file_import_merge_backup", ".tt_session");
-	});
-	$(document).on("change", "#file_import_merge_backup", function(event) {
-		ImportMergeTabs();
+			
+			// EDIT GROUP
+			if (s.id == "button_edit_group") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						if (active_group != "tab_list") {
+							ShowGroupEditWindow(active_group);
+						}
+					}
+				}
+			}
+			
+			// EXPORT GROUP
+			if (s.id == "button_export_group") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						ExportGroup(bggroups[active_group].name+".tt_group");
+					}
+				}
+			}
+			
+			// IMPORT GROUP
+			if (s.id == "button_import_group") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						let inputFile = ShowOpenFileDialog("file_import_group", ".tt_group");
+						inputFile.onchange = function(event) {
+							ImportGroup();
+							// this.parentNode.removeChild(this);
+						}
+					}
+				}
+			}
+
+			// NEW FOLDER
+			if (s.id == "button_new_folder") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						AddNewFolder();
+					}
+				}
+			}
+			
+			// RENAME FOLDER
+			if (s.id == "button_edit_folder") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						if (document.querySelectorAll("#"+active_group+" .selected_folder").length > 0) {
+							ShowRenameFolderDialog(document.querySelectorAll("#"+active_group+" .selected_folder")[0].id);
+						}
+					}
+				}
+			}
+			// REMOVE FOLDERS
+			if (s.id == "button_remove_folder") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						document.querySelectorAll("#"+active_group+" .selected_folder").forEach(function(s){
+							RemoveFolder(s.id);
+						});
+					}
+				}
+			}
+			// DISCARD TABS
+			if (s.id == "button_unload" || s.id == "button_discard") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						if (document.querySelectorAll(".pin.selected_tab:not(.active_tab), #"+active_group+" .selected_tab:not(.active_tab)").length > 0) {
+							DiscardTabs(
+								Array.prototype.map.call(document.querySelectorAll(".pin:not(.active_tab), #"+active_group+" .selected_tab:not(.active_tab)"), function(s){
+									return parseInt(s.id);
+								})
+							);
+						} else {
+							DiscardTabs(
+								Array.prototype.map.call(document.querySelectorAll(".pin:not(.active_tab), .tab:not(.active_tab)"), function(s){
+									return parseInt(s.id);
+								})
+							);
+						}
+					}
+				}
+			}
+			// IMPORT BACKUP
+			if (s.id == "button_import_bak") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						let inputFile = ShowOpenFileDialog("file_import_backup", ".tt_session");
+						inputFile.onchange = function(event) {
+							ImportSession();
+							// this.remove();
+						}
+					}
+				}
+			}
+			// EXPORT BACKUP
+			if (s.id == "button_export_bak") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						ExportSession("Session.tt_session");
+					}
+				}
+			}
+			// MERGE BACKUP
+			if (s.id == "button_import_merge_bak") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						let inputFile = ShowOpenFileDialog("file_import_merge_backup", ".tt_session");
+						inputFile.onchange = function(event) {
+							ImportMergeTabs();
+							// this.remove();
+						}						
+					}
+				}
+			}
+
+			// CHANGE FILTERING TYPE
+			if (s.id == "button_filter_type") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						if (this.classList.contains("url")) {
+							this.classList.remove("url");
+							this.classList.add("title");
+							chrome.runtime.sendMessage({command: "set_search_filter", search_filter: "title", windowId: CurrentWindowId});
+						} else {
+							this.classList.remove("title");
+							this.classList.add("url");
+							chrome.runtime.sendMessage({command: "set_search_filter", search_filter: "url", windowId: CurrentWindowId});
+						}
+						FindTab(document.getElementById("filter_box").value);
+					}
+				}
+			}
+			
+			// SORT TABS
+			// if (s.id == "button_sort") {
+				// s.onmousedown = function(event) {
+					// if (event.which == 1) {
+						// SortTabs();
+					// }
+				// }
+			// }
+			// REPEAT SEARCH
+			// if (s.id == "repeat_search") {
+				// s.onmousedown = function(event) {
+					// if (event.which == 1) {
+						// FindTab(document.getElementById("filter_box").value);
+					// }
+				// }
+			// }
+
+			
+			if (browserId != "F") {
+				// BOOKMARKS
+				if (s.id == "button_bookmarks") {
+					s.onmousedown = function(event) {
+						if (event.which == 1) {
+							chrome.tabs.create({url: "chrome://bookmarks/"});
+						}
+					}
+				}
+				
+				// DOWNLOADS
+				if (s.id == "button_downloads") {
+					s.onmousedown = function(event) {
+						if (event.which == 1) {
+							chrome.tabs.create({url: "chrome://downloads/"});
+						}
+					}
+				}
+				
+				// HISTORY
+				if (s.id == "button_history") {
+					s.onmousedown = function(event) {
+						if (event.which == 1) {
+							chrome.tabs.create({url: "chrome://history/"});
+						}
+					}
+				}
+				
+				// EXTENSIONS
+				if (s.id == "button_extensions") {
+					s.onmousedown = function(event) {
+						if (event.which == 1) {
+							chrome.tabs.create({url: "chrome://extensions"});
+						}
+					}
+				}
+				
+				// SETTINGS
+				if (s.id == "button_settings") {
+					s.onmousedown = function(event) {
+						if (event.which == 1) {
+							chrome.tabs.create({url: "chrome://settings/"});
+						}
+					}
+				}
+				
+				// LOAD BACKUPS
+				if (s.id == "button_load_bak1" || s.id == "button_load_bak2" || s.id == "button_load_bak3") {
+					s.onmousedown = function(event) {
+						if (event.which == 1 && this.classList.contains("disabled") == false) {
+							let BakN = (this.id).substr(15);
+							chrome.storage.local.get(null, function(items) {
+								if (Object.keys(items["windows_BAK"+BakN]).length > 0) { chrome.storage.local.set({"windows": items["windows_BAK"+BakN]}); }
+								if (Object.keys(items["tabs_BAK"+BakN]).length > 0) { chrome.storage.local.set({"tabs": items["tabs_BAK"+BakN]}); alert("Loaded backup"); }
+								chrome.runtime.sendMessage({command: "reload"}); chrome.runtime.sendMessage({command: "reload_sidebar"}); location.reload();
+							});
+						}
+					}
+				}
+				
+				
+			}
+		
+		}
+
 	});
 
 }

scripts/utils.js

@@ -3,112 +3,282 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 
-// sort tabs main function
-function SortTabs(){
-	if ($(".tab").find(":visible:first")[0]){
-		chrome.tabs.query({windowId: vt.windowId}, function(tabs){
-			tabs.sort(function(tab_a, tab_b){
-				return SplitUrl(tab_a).localeCompare(     SplitUrl(tab_b)      );
-			});
-			var first_tabId;
-			if ($(".selected:visible")[0]){
-				first_tabId = parseInt($(".selected:visible")[0].id);
-			} else {
-				first_tabId = parseInt($(".tab").find(":visible:first")[0].parentNode.id);
-			}
-			chrome.tabs.get(first_tabId, function(tab){
-				var new_index = tab.index;
-				tabs.forEach(function(Tab){
-					// sort selected when more than 1 tab is selected
-					if (($(".selected:visible").length > 1 && $("#"+Tab.id).is(":visible") && !Tab.pinned && $("#"+Tab.id).is(".selected")) || ($(".selected:visible").length < 2 && $("#"+Tab.id).is(":visible") && !Tab.pinned)){
-						chrome.tabs.move(Tab.id, {"index": new_index});
-						new_index++;
-					}
-				});
-			});
-			if (bg.opt.scroll_to_active){
-				setTimeout(function(){
-					ScrollTabList($(".active:visible")[0].id);
-				},1000);
-			}
+function HideRenameDialogs() {
+	document.querySelectorAll(".edit_dialog").forEach(function(s){
+		s.style.display = "none";
+		s.style.top = "-500px";
+		s.style.left = "-500px";
+	});
+}
+function GetParentsByClass(Node, Class) {
+	let Parents = [];
+	let ParentNode = Node;
+	while (ParentNode.parentNode != null) {
+		if (ParentNode.parentNode.classList != undefined && ParentNode.parentNode.classList.contains(Class)) {
+			Parents.push(ParentNode.parentNode);
+		}
+		ParentNode = ParentNode.parentNode;
+	}
+	return Parents;
+}
+function GetParentsBy2Classes(Node, ClassA, ClassB) {
+	let Parents = [];
+	let ParentNode = Node;
+	while (ParentNode.parentNode != null) {
+		if (ParentNode.parentNode.classList != undefined && ParentNode.parentNode.classList.contains(ClassA) && ParentNode.parentNode.classList.contains(ClassB)) {
+			Parents.push(ParentNode.parentNode);
+		}
+		ParentNode = ParentNode.parentNode;
+	}
+	return Parents;
+}
+
+
+function GetSelectedFolders() {
+	if (opt.debug) console.log("function: GetSelectedFolders");
+	let res = {Folders: {}, FoldersSelected: [], TabsIds: [], TabsIdsParents: []};
+	document.querySelectorAll("#"+active_group+" .selected_folder").forEach(function(s){
+		res.FoldersSelected.push(s.id);
+		res.Folders[s.id] = Object.assign({}, bgfolders[s.id]);
+		let Fchildren = document.querySelectorAll("#cf"+s.id+" .folder");
+		Fchildren.forEach(function(fc){
+			res.Folders[fc.id] = Object.assign({}, bgfolders[fc.id]);
 		});
-	}
+		let Tchildren = document.querySelectorAll("#ct"+s.id+" .tab");
+		Tchildren.forEach(function(tc){
+			res.TabsIds.push(parseInt(tc.id));
+			res.TabsIdsParents.push(tc.parentNode.id);
+		});
+	});
+	if (opt.debug) console.log(res);
+	return res;
 }
 
-// sort tabs sub function
-function SplitUrl(tab){
-	var tmp_url = new URL(tab.url);
-	if (tmp_url.protocol != "http:"){
-		tmp_url.protocol == "http:";
-	}
-	var url_parts = [];
-	if (tab.pinned){
-		url_parts.push("#"+tab.index);
+function GetSelectedTabs() {
+	if (opt.debug) console.log("function: GetSelectedTabs");
+	// let res = {urls: [], TabsIds: [], TabsIdsParents: [], TabsIdsSelected: []};
+	let res = {TabsIds: [], TabsIdsParents: [], TabsIdsSelected: []};
+	document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
+		// chrome.tabs.get(parseInt(s.id), function(tab) {
+			// res.urls.push(tab.url);
+		// });
+		
+		res.TabsIds.push(parseInt(s.id));
+		res.TabsIdsParents.push(s.parentNode.id);
+		res.TabsIdsSelected.push(parseInt(s.id));
+		let Tchildren = document.querySelectorAll("#ct"+s.id+" .tab");
+		Tchildren.forEach(function(tc){
+			
+			// chrome.tabs.get(parseInt(tc.id), function(tab) {
+				// res.urls.push(tab.url);
+			// });
+			
+			res.TabsIds.push(parseInt(tc.id));
+			res.TabsIdsParents.push(tc.parentNode.id);
+		});
+	});
+	if (opt.debug) console.log(res);
+	return res;
+}
+
+
+
+
+
+function FindTab(input) { // find and select tabs
+	let ButtonFilterClear = document.getElementById("button_filter_clear");
+	document.querySelectorAll(".filtered, .highlighted_search").forEach(function(s){
+		s.classList.remove("filtered");
+		s.classList.remove("selected_tab");
+		s.classList.remove("selected_last");
+		s.classList.remove("highlighted_search");
+	})
+	if (input.length == 0) {
+		document.getElementById("filter_box").value = "";
+		ButtonFilterClear.style.opacity = "0";
+		ButtonFilterClear.title = "";
+		return;
 	} else {
-		url_parts.push("~");
+		ButtonFilterClear.style.opacity = "1";
+		ButtonFilterClear.title = caption_clear_filter;
 	}
-	var parts = tmp_url.host.split(".");
-	parts.reverse();
-	if (parts.length > 1){
-		parts = parts.slice(1);
-	}
-	parts.join(".");
-	url_parts.push(parts);
-	url_parts.push(tab.title.toLowerCase());
-	return url_parts.join(" ! ");
-}
-
-
-// bookmark main function
-function BookmarkTabs(tabs_array, FolderName){
-	var rootId;
-	var vertical_tabs_folderId;
-	chrome.bookmarks.getRootByName("bookmarks_bar", function(tree){
-		rootId = tree.id;
-		chrome.bookmarks.search("VerticalTabs", function(list){
-			for (var elem in list) {
-				if (list[elem].parentId == rootId){
-					vertical_tabs_folderId = list[elem].id;
-					break;
+	SearchIndex = 0;
+	let FilterType = document.getElementById("button_filter_type");
+	let searchUrl = FilterType.classList.contains("url");
+	let searchTitle = FilterType.classList.contains("title");
+	chrome.tabs.query({windowId: CurrentWindowId, pinned: false}, function(tabs) {
+		tabs.forEach(function(Tab) {
+			if (searchUrl) {
+				if (Tab.url.toLowerCase().match(input.toLowerCase())) {
+					document.getElementById(Tab.id).classList.add("filtered");
+					document.getElementById(Tab.id).classList.add("selected_tab");
 				}
 			}
-			if (vertical_tabs_folderId == undefined){
-				chrome.bookmarks.create({parentId: rootId, title: "VerticalTabs"}, function(vertical_tabs_new){
-					vertical_tabs_folderId = vertical_tabs_new.id;
-				});
-			}
-			chrome.bookmarks.search(FolderName, function(list){
-				for (var elem in list) {
-					if (list[elem].parentId == vertical_tabs_folderId){
-						SlowlyBookmarkTabs(tabs_array, list[elem].id);
-						return;
-					}
+			if (searchTitle) {
+				if (Tab.title.toLowerCase().match(input.toLowerCase())) {
+					document.getElementById(Tab.id).classList.add("filtered");
+					document.getElementById(Tab.id).classList.add("selected_tab");
 				}
-				chrome.bookmarks.create({parentId: vertical_tabs_folderId, title: FolderName}, function(active_group_folderId_new){
-					SlowlyBookmarkTabs(tabs_array, active_group_folderId_new.id);
-				});
-			});
+			}
 		});
 	});
 }
+// sort tabs main function
+// function SortTabs() {
+	// if ($(".tab").find(":visible:first")[0]){
+		// chrome.tabs.query({windowId: vt.windowId}, function(tabs){
+			// tabs.sort(function(tab_a, tab_b){
+				// return SplitUrl(tab_a).localeCompare(     SplitUrl(tab_b)      );
+			// });
+			// var first_tabId;
+			// if ($(".selected:visible")[0]){
+				// first_tabId = parseInt($(".selected:visible")[0].id);
+			// } else {
+				// first_tabId = parseInt($(".tab").find(":visible:first")[0].parentNode.id);
+			// }
+			// chrome.tabs.get(first_tabId, function(tab){
+				// var new_index = tab.index;
+				// tabs.forEach(function(Tab){
+					// // sort selected when more than 1 tab is selected
+					// if (($(".selected:visible").length > 1 && $("#"+Tab.id).is(":visible") && !Tab.pinned && $("#"+Tab.id).is(".selected")) || ($(".selected:visible").length < 2 && $("#"+Tab.id).is(":visible") && !Tab.pinned)){
+						// chrome.tabs.move(Tab.id, {"index": new_index});
+						// new_index++;
+					// }
+				// });
+			// });
+			// if (bg.opt.scroll_to_active){
+				// setTimeout(function(){
+					// ScrollTabList($(".active:visible")[0].id);
+				// },1000);
+			// }
+		// }); 
+	// }
+// }
 
-// bookmark sub function
-function SlowlyBookmarkTabs(tabs_array, group_folderId){
-	if (tabs_array.length > 0){
-		chrome.tabs.get(tabs_array[0], function(tab){
-			chrome.bookmarks.search({url: tab.url}, function(list){
-				tabs_array.splice(0, 1);
-				setTimeout(function(){
-					SlowlyBookmarkTabs(tabs_array, group_folderId);
-				},10);
-				for (var elem in list){
-					if (list[elem].parentId == group_folderId){
-						bookmarkId = list[elem].id;
-						return;
-					}
+// sort tabs sub function
+// function SplitUrl(tab) {
+	// var tmp_url = new URL(tab.url);
+	// if (tmp_url.protocol != "http:"){
+		// tmp_url.protocol == "http:";
+	// }
+	// var url_parts = [];
+	// if (tab.pinned){
+		// url_parts.push("#"+tab.index);
+	// } else {
+		// url_parts.push("~");
+	// }
+	// var parts = tmp_url.host.split(".");
+	// parts.reverse();
+	// if (parts.length > 1){
+		// parts = parts.slice(1);
+	// }
+	// parts.join(".");
+	// url_parts.push(parts);
+	// url_parts.push(tab.title.toLowerCase());
+	// return url_parts.join(" ! ");
+// }
+
+function Bookmark(rootNode) {
+	let ToolbarId = browserId == "F" ? "toolbar_____" : "1";
+	chrome.bookmarks.get(ToolbarId, function(list) {
+		chrome.bookmarks.search("TreeTabs", function(list) {
+			let TreeTabsId;
+			for (var elem in list) {
+				if (list[elem].parentId == ToolbarId) {
+					TreeTabsId = list[elem].id;
+					break;
 				}
-				chrome.bookmarks.create({parentId: group_folderId, title: tab.title, url: tab.url});
-			});
+			}
+			if (TreeTabsId == undefined) {
+				chrome.bookmarks.create({parentId: ToolbarId, title: "TreeTabs"}, function(TreeTabsNew) {
+					TreeTabsId = TreeTabsNew.id;
+				});
+				Bookmark(rootNode);
+				return;
+			} else {
+				if (rootNode.classList.contains("tab")) {
+					chrome.tabs.get(parseInt(rootNode.id), function(tab) {
+						if (tab) {
+							chrome.bookmarks.create({parentId: TreeTabsId, title: tab.title}, function(root) {
+								document.querySelectorAll("[id='"+rootNode.id+"'], [id='"+rootNode.id+"'] .tab").forEach(function(s){
+									chrome.tabs.get(parseInt(s.id), function(tab){
+										if (tab) {
+											chrome.bookmarks.create({parentId: root.id, title: tab.title, url: tab.url });
+										}
+									});
+								});
+							});
+						}
+					});
+				}
+				
+				if (rootNode.classList.contains("folder") || rootNode.classList.contains("group")) {
+					let rootName = caption_noname_group;
+					if (rootNode.classList.contains("folder") && bgfolders[rootNode.id]) {
+						rootName = bgfolders[rootNode.id].name;
+					}
+					if (rootNode.classList.contains("group") && bggroups[rootNode.id]) {
+						rootName = bggroups[rootNode.id].name;
+					}
+
+					chrome.bookmarks.create({parentId: TreeTabsId, title: rootName}, function(root) {
+						let foldersRefs = {};
+						
+						let folders = document.querySelectorAll("#cf"+rootNode.id+" .folder");
+						folders.forEach(function(s){
+							if (bgfolders[s.id]) {
+								let ttId = s.id;
+								chrome.bookmarks.create({parentId: root.id, title: bgfolders[ttId].name}, function(Bkfolder) {
+									foldersRefs[ttId] = {ttid: ttId, id: Bkfolder.id, ttparent: bgfolders[ttId].parent, parent: root.id};
+									
+									let elemInd = 0;
+									if (ttId == folders[folders.length-1].id) {
+										for (var elem in foldersRefs) {
+											let FolderTTId = foldersRefs[elem].ttid;
+											let BookmarkFolderId = foldersRefs[elem].id;
+											let TTParentId = foldersRefs[elem].ttparent;
+											if (foldersRefs[TTParentId]) {
+												foldersRefs[FolderTTId].parent = foldersRefs[TTParentId].id;
+											}
+											
+											elemInd++;
+											
+											if (elemInd == Object.keys(foldersRefs).length) {
+												elemInd = 0;
+												for (var elem in foldersRefs) {
+													let BookmarkFolderId = foldersRefs[elem].id;
+													let BookmarkFolderParentId = foldersRefs[elem].parent;
+													chrome.bookmarks.move(BookmarkFolderId, {parentId: BookmarkFolderParentId}, function(BkFinalfolder) {
+														document.querySelectorAll("#ct"+foldersRefs[elem].ttid+" .tab").forEach(function(s){
+															chrome.tabs.get(parseInt(s.id), function(tab){
+																if (tab) {
+																	chrome.bookmarks.create({parentId: BkFinalfolder.id, title: tab.title, url: tab.url });
+																}
+															});
+														});
+														
+														elemInd++;
+														
+													});
+												}
+											}
+										}
+									}
+								});
+							}
+						});
+						
+						document.querySelectorAll("#ct"+rootNode.id+" .tab").forEach(function(s){
+							chrome.tabs.get(parseInt(s.id), function(tab){
+								if (tab) {
+									chrome.bookmarks.create({parentId: root.id, title: tab.title, url: tab.url });
+								}
+							});
+						});															
+						
+					});
+				}
+			}
 		});
-	}
+	});
 }

sidebar.html

@@ -23,36 +23,29 @@
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_2.css" id="sizes_preset_2" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_3.css" id="sizes_preset_3" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_size_preset_4.css" id="sizes_preset_4" />
+		
+		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_tabs_margin_0.css" id="tabs_margin_0" />
+		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_tabs_margin_1.css" id="tabs_margin_1" />
+		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_tabs_margin_2.css" id="tabs_margin_2" />
+
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme_colors.css" id="theme_colors" />
 		<link type="text/css" rel="stylesheet" media="all" href="../theme/theme.css" id="theme" />
-		<script type="text/javascript" src="../lib_jquery/jquery-3.2.1.min.js"></script>
 	</head>
 	<body id="body" class="sidebar_body">
 
 		<div id="DragImage" style="display: none; width:0px; height:0px;"></div>
 		
-		<div class="toolbar" id="toolbar">
-		</div>
+		<div class="toolbar" id="toolbar"></div>
 		
 		<div id="toolbar_groups">
-			<div class="scroll_group" id="scroll_group_up">
-			</div>
-			<div class="group_list" id="group_list">
-			</div>
-			<div class="scroll_group" id="scroll_group_down">
-			</div>
+			<div class="scroll_group" id="scroll_group_up"></div>
+			<div class="group_list" id="group_list"></div>
+			<div class="scroll_group" id="scroll_group_down"></div>
 		</div>
 		
 		
-		<div class="pin_list" id="pin_list">
-		</div>
-		
-		<div id="groups">
-			<div class="group" id="tab_list">
-				<div class="children_folders" id="cftab_list"></div>
-				<div class="children_tabs" id="chtab_list"></div>
-			</div>
-		</div>
+		<div class="pin_list" id="pin_list"></div>
+		<div id="groups"></div>
 		
 		<input type="color" id="color_picker" style="position:absolute; left:-1000px; top:-1000px; width:1px; height:1px; overflow:hidden;">
 
@@ -71,100 +64,82 @@
 			<div class="edit_dialog_confirm" id="folder_edit_confirm"><span class="edit_dialog_button" id="folder_edit_button_confirm"></span></div>
 		</ul>
 	
-		<ul class="menu" id="pins_menu">
-			<li data-action="tab_pin" class="menu_item" id="tabs_menu_unpin"></li>
-			<div class="separator"></div>
-			<li data-action="tab_clone" class="menu_item" id="tabs_menu_clone"></li>
-			<div class="separator"></div>
-			<li data-action="tab_move" class="menu_item" id="tabs_menu_move"></li>
-			<li data-action="tab_reload" class="menu_item" id="tabs_menu_reload"></li>
-			<li data-action="tab_discard" class="menu_item" id="tabs_menu_discard"></li>
-			<div class="separator"></div>
-			<li data-action="tab_close" class="menu_item" id="tabs_menu_close"></li>
-			<div class="separator"></div>
-			<li data-action="tab_mute" class="menu_item" id="tabs_menu_mute"></li>
-			<li data-action="tab_unmute" class="menu_item" id="tabs_menu_unmute"></li>
-			<div class="separator"></div>
-			<li data-action="tab_mute_other" class="menu_item" id="tabs_menu_mute_other"></li>
-			<li data-action="tab_unmute_other" class="menu_item" id="tabs_menu_unmute_other"></li>
-			<div class="separator"></div>
-			<li data-action="tab_undo_close" class="menu_item" id="tabs_menu_undo"></li>
-			<div class="separator"></div>
-			<li data-action="tab_settings" class="menu_item" id="tabs_menu_settings"></li>
-		</ul>
-		<ul class="menu" id="tabs_menu">
-			<li data-action="tab_new" class="menu_item" id="tabs_menu_new"></li>
-			<div class="separator"></div>
-			<li data-action="tab_pin" class="menu_item" id="tabs_menu_pin"></li>
-			<div class="separator"></div>
-			<li data-action="folder_new" class="menu_item" id="folders_menu_new_folder"></li>
-			<li data-action="group_new" class="menu_item" id="groups_menu_new_group"></li>
-			<div class="separator"></div>
-			<li data-action="tab_clone" class="menu_item" id="tabs_menu_clone"></li>
-			<div class="separator"></div>
-			<li data-action="tab_expand_all" class="menu_item" id="tabs_menu_expand_all"></li>
-			<li data-action="tab_collapse_all" class="menu_item" id="tabs_menu_collapse_all"></li>
-			<div class="separator"></div>
-			<li data-action="tab_move" class="menu_item" id="tabs_menu_move"></li>
-			<li data-action="tab_reload" class="menu_item" id="tabs_menu_reload"></li>
-			<li data-action="tab_discard" class="menu_item" id="tabs_menu_discard"></li>
-			<div class="separator"></div>
-			<li data-action="tab_close" class="menu_item" id="tabs_menu_close"></li>
-			<li data-action="tab_close_tree" class="menu_item" id="tabs_menu_close_tree"></li>
-			<li data-action="tab_close_other" class="menu_item" id="tabs_menu_close_other"></li>
-			<div class="separator"></div>
-			<li data-action="tab_mute" class="menu_item" id="tabs_menu_mute"></li>
-			<li data-action="tab_unmute" class="menu_item" id="tabs_menu_unmute"></li>
-			<div class="separator"></div>
-			<li data-action="tab_mute_other" class="menu_item" id="tabs_menu_mute_other"></li>
-			<li data-action="tab_unmute_other" class="menu_item" id="tabs_menu_unmute_other"></li>
-			<div class="separator"></div>
-			<li data-action="tab_undo_close" class="menu_item" id="tabs_menu_undo"></li>
-			<div class="separator"></div>
-			<li data-action="tab_settings" class="menu_item" id="tabs_menu_settings"></li>
+		<ul class="menu" id="main_menu">
+			<li class="menu_item" id="menu_new_pin"></li>
+			<div class="separator" id="separator_newt"></div>
+			<li class="menu_item" id="menu_new_tab"></li>
+			<div class="separator" id="separator_unpt"></div>
+			<li class="menu_item" id="menu_unpin_tab"></li>
+			<div class="separator" id="separator_pit"></div>
+			<li class="menu_item" id="menu_pin_tab"></li>
+			<div class="separator" id="separator_newf"></div>
+			<li class="menu_item" id="menu_new_folder"></li>
+			<div class="separator" id="separator_renf"></div>
+			<li class="menu_item" id="menu_rename_folder"></li>
+			<div class="separator" id="separator_delf"></div>
+			<li class="menu_item" id="menu_delete_folder"></li>
+			<div class="separator" id="separator_dupt"></div>
+			<li class="menu_item" id="menu_duplicate_tab"></li>
+			<div class="separator" id="separator_undclo"></div>
+			<li class="menu_item" id="menu_undo_close_tab"></li>
+			<div class="separator" id="separator_bkt"></div>
+			<li class="menu_item" id="menu_bookmark_tree"></li>
+			<div class="separator" id="separator_expat"></div>
+			<li class="menu_item" id="menu_expand_tree"></li>
+			<div class="separator" id="separator_collt"></div>
+			<li class="menu_item" id="menu_collapse_tree"></li>
+			<div class="separator" id="separator_expaa"></div>
+			<li class="menu_item" id="menu_expand_all"></li>
+			<div class="separator" id="separator_colla"></div>
+			<li class="menu_item" id="menu_collapse_all"></li>
+			<div class="separator" id="separator_deta"></div>
+			<li class="menu_item" id="menu_detach_tab"></li>
+			<div class="separator" id="separator_rel"></div>
+			<li class="menu_item" id="menu_reload_tab"></li>
+			<div class="separator" id="separator_unlo"></div>
+			<li class="menu_item" id="menu_unload"></li>
+			<div class="separator" id="separator_clo"></div>
+			<li class="menu_item" id="menu_close"></li>
+			<div class="separator" id="separator_clot"></div>
+			<li class="menu_item" id="menu_close_tree"></li>
+			<div class="separator" id="separator_cloo"></div>
+			<li class="menu_item" id="menu_close_other"></li>
+			<div class="separator" id="separator_mut"></div>
+			<li class="menu_item" id="menu_mute_tab"></li>
+			<div class="separator" id="separator_mutt"></div>
+			<li class="menu_item" id="menu_mute_tree"></li>
+			<div class="separator" id="separator_unmu"></div>
+			<li class="menu_item" id="menu_unmute_tab"></li>
+			<div class="separator" id="separator_unmut"></div>
+			<li class="menu_item" id="menu_unmute_tree"></li>
+			<div class="separator" id="separator_mutot"></div>
+			<li class="menu_item" id="menu_mute_other"></li>
+			<div class="separator" id="separator_unmutot"></div>
+			<li class="menu_item" id="menu_unmute_other"></li>
+			<div class="separator" id="separator_newg"></div>
+			<li class="menu_item" id="menu_new_group"></li>
+			<div class="separator" id="separator_reng"></div>
+			<li class="menu_item" id="menu_rename_group"></li>
+			<div class="separator" id="separator_delg"></div>
+			<li class="menu_item" id="menu_delete_group"></li>
+			<div class="separator" id="separator_delgclo"></div>
+			<li class="menu_item" id="menu_delete_group_tabs_close"></li>
+			<div class="separator" id="separator_gunlo"></div>
+			<li class="menu_item" id="groups_menu_unload"></li>
+			<div class="separator" id="separator_gbk"></div>
+			<li class="menu_item" id="menu_bookmark_group"></li>
+			<div class="separator" id="separator_tts"></div>
+			<li class="menu_item" id="menu_treetabs_settings"></li>
 		</ul>
 
-		<ul class="menu" id="folders_menu">
-			<li data-action="tab_new" class="menu_item" id="tabs_menu_new"></li>
-			<li data-action="folder_new" class="menu_item" id="folders_menu_new_folder"></li>
-			<li data-action="group_new" class="menu_item" id="groups_menu_new_group"></li>
-			<div class="separator"></div>
-			<li data-action="folder_rename" class="menu_item" id="folders_menu_rename_folder"></li>
-			<div class="separator"></div>
-			<li data-action="folder_delete" class="menu_item" id="folders_menu_delete"></li>
-			<div class="separator"></div>
-			<li data-action="tab_settings" class="menu_item" id="tabs_menu_settings"></li>
-		</ul>
-
-		<ul class="menu" id="global_menu">
-			<li data-action="tab_new" class="menu_item" id="tabs_menu_new"></li>
-			<li data-action="folder_new" class="menu_item" id="folders_menu_new_folder"></li>
-			<li data-action="group_new" class="menu_item" id="groups_menu_new_group"></li>
-			<div class="separator"></div>
-			<li data-action="tab_expand_all" class="menu_item" id="tabs_menu_expand_all"></li>
-			<li data-action="tab_collapse_all" class="menu_item" id="tabs_menu_collapse_all"></li>
-			<div class="separator"></div>
-			<li data-action="tab_undo_close" class="menu_item" id="tabs_menu_undo"></li>
-			<div class="separator"></div>
-			<li data-action="tab_settings" class="menu_item" id="tabs_menu_settings"></li>
-		</ul>
-
-		<ul class="menu" id="groups_menu">
-			<li data-action="group_new" class="menu_item" id="groups_menu_new_group"></li>
-			<li data-action="group_rename" class="menu_item" id="groups_menu_rename"></li>
-			<li data-action="group_delete" class="menu_item" id="groups_menu_delete"></li>
-			<li data-action="group_delete_tabs_close" class="menu_item" id="groups_menu_delete_tabs_close"></li>
-			<div class="separator"></div>
-			<li data-action="group_unload" class="menu_item" id="groups_menu_unload"></li>
-		</ul>
 
 <!--
 		<ul class="menu" id="move_to_group_menu">
-			<li data-action="move_to_new_group" class="menu_item" id="tabs_menu_move_to_new_group"></li>
+			<li data-action="move_to_new_group" class="menu_item" id="menu_detach_tab_to_new_group"></li>
 			<div class="separator"></div>
 		</ul>
 		<ul class="menu" id="groups_menu">
-			<li data-action="group_bookmark" class="groups_menu_item" id="groups_menu_bookmark"></li>
+			<li data-action="group_bookmark" class="groups_menu_item" id="menu_bookmark_group"></li>
 			<div class="separator"></div>
 			<li data-action="group_mute" class="groups_menu_item" id="groups_menu_mute"></li>
 			<li data-action="group_unmute" class="groups_menu_item" id="groups_menu_unmute"></li>
@@ -177,6 +152,8 @@
 			<div class="separator"></div>
 		</ul>
 		
+		<div id="DATA" style="display: none; width:0px; height:0px;">
+		</div>
 -->
 		
 		<script type="text/javascript" src="../scripts/global.js"></script>
@@ -186,15 +163,14 @@
 		<script type="text/javascript" src="../scripts/refresh.js"></script>
 		<script type="text/javascript" src="../scripts/utils.js"></script>
 		
-		<script type="text/javascript" src="../scripts/drag_and_drop.js"></script>
 		<script type="text/javascript" src="../scripts/backup.js"></script>
 		<script type="text/javascript" src="../scripts/tabs.js"></script>
 		<script type="text/javascript" src="../scripts/folders.js"></script>
 		<script type="text/javascript" src="../scripts/groups.js"></script>
-		<script type="text/javascript" src="../scripts/IO.js"></script>
 		<script type="text/javascript" src="../scripts/menu.js"></script>
 
 		<script type="text/javascript" src="sidebar.js"></script>
+		<script type="text/javascript" src="../scripts/events.js"></script>
 		
 
 	</body>

sidebar.js

@@ -5,23 +5,22 @@
 document.addEventListener("DOMContentLoaded", Run(), false);
 function Loadi18n() {
 	// toolbar labels
-	$(".button").each(function() {
-		$(this).attr("title", chrome.i18n.getMessage(this.id));
+	document.querySelectorAll(".button").forEach(function(s){
+		s.title = chrome.i18n.getMessage(s.id);
 	});
-	// menu labels
-	$(".menu_item").each(function() {
-		$(this).text(chrome.i18n.getMessage(this.id));
-	});
-	// edit group dialog labels
-	$(".edit_dialog_button").each(function() {
-		$(this)[0].textContent = chrome.i18n.getMessage(this.id);
+	// menu labels and edit group dialog labels
+	document.querySelectorAll(".menu_item, .edit_dialog_button").forEach(function(s){
+		s.textContent = chrome.i18n.getMessage(s.id);
 	});
 }
 function RestorePinListRowSettings() {
+	plist = document.getElementById("pin_list");
 	if (opt.pin_list_multi_row) {
-		$("#pin_list").css({"white-space": "normal", "overflow-x": "hidden"});
+		plist.style.whiteSpace = "normal";
+		plist.style.overflowX = "hidden";
 	} else {
-		$("#pin_list").css({"white-space": "", "overflow-x": ""});
+		plist.style.whiteSpace = "";
+		plist.style.overflowX = "";
 	}
 	RefreshGUI();
 }
@@ -66,41 +65,51 @@ function Initialize() {
 		// APPEND TABS
 		let tc = tabs.length;
 		for (var ti = 0; ti < tc; ti++) {
-			AppendTab({tab: tabs[ti], Append: true, SkipSetActive: true});
+			AppendTab(tabs[ti], false, false, false, true, false, true, false, true, false, false);
 		}
 		for (var ti = 0; ti < tc; ti++) {
 			if (bgtabs[tabs[ti].id] && !tabs[ti].pinned) {
-				if ($("#"+bgtabs[tabs[ti].id].parent).length > 0 && $("#"+tabs[ti].id).find($("#ch"+bgtabs[tabs[ti].id].parent)).length == 0) {
-					$("#ch"+bgtabs[tabs[ti].id].parent).append($("#"+tabs[ti].id));
+				let TabParent = document.getElementById("ct"+bgtabs[tabs[ti].id].parent) ;
+
+				if (TabParent != null && document.querySelector("[id='"+tabs[ti].id+"'] #ct"+bgtabs[tabs[ti].id].parent) == null) {
+					TabParent.appendChild(document.getElementById(tabs[ti].id));
 				}
 			}
 		}
 		for (var ti = 0; ti < tc; ti++) {
-			if (bgtabs[tabs[ti].id] && !tabs[ti].pinned) {
-				$("#"+tabs[ti].id).addClass(bgtabs[tabs[ti].id].expand);
+			if (bgtabs[tabs[ti].id] && !tabs[ti].pinned && bgtabs[tabs[ti].id].expand != "") {
+				document.getElementById(tabs[ti].id).classList.add(bgtabs[tabs[ti].id].expand);
 			}
 		}
 		// SET ACTIVE TAB FOR EACH GROUP
-		for (var group in bggroups) {
-			if ($("#"+group+" #"+bggroups[group].active_tab)[0]) {
-				$("#"+bggroups[group].active_tab).addClass("active_tab");
-			}
-		}				
-		chrome.runtime.sendMessage({command: "get_active_group", windowId: CurrentWindowId}, function(response) {
-			SetActiveGroup(response, false, true);
+		chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
+			chrome.runtime.sendMessage({command: "get_active_group", windowId: CurrentWindowId}, function(response) {
+				for (var group in bggroups) {
+					if (response && tabs[0].pinned && response == group) {
+						SetActiveTab(tabs[0].id);
+						continue;
+					}
+					let activeInGroup = document.querySelector("#"+group+" [id='"+bggroups[group].active_tab+"']");
+					if (activeInGroup != null) {
+						activeInGroup.classList.add("active_tab");
+					}
+				}
+				if (response) {
+					SetActiveGroup(response, true, true);
+				} else {
+					SetActiveGroup("tab_list", true, true);
+				}
+			});
 		});
 		RearrangeTreeTabs(tabs, bgtabs, true);
 		RearrangeFolders(true);
-		SetToolbarShelfToggle("mousedown");
 		StartChromeListeners();
-		SetIOEvents();
-		SetToolbarEvents();
-		SetTRefreshEvents();
-		SetGroupEvents();
-		SetTabEvents();
-		SetFolderEvents();
 		SetMenu();
-		SetDragAndDropEvents();
+		SetEvents();
+		HideMenus();
+		if (opt.switch_with_scroll) {
+			BindTabsSwitchingToMouseWheel("pin_list");
+		}
 		if (opt.syncro_tabbar_tabs_order || opt.syncro_tabbar_groups_tabs_order) {
 			RearrangeBrowserTabs();
 		}
@@ -108,22 +117,10 @@ function Initialize() {
 		if (browserId == "V") {
 			VivaldiRefreshMediaIcons();
 		}
-		
-		var SetActiveLoop = setInterval(function() {
-			log("SetActiveTab");
-			chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
-				if (tabs[0].pinned && $("#"+active_group+" .active_tab")[0]) {
-					SetActiveTab(tabs[0].id);
-				} else {
-					clearInterval(SetActiveLoop);
-				}
-			});
-		}, 1000);
-
 		setTimeout(function() {
 			RefreshExpandStates();
 			RefreshCounters();
-		}, 1000);
+		}, 3000);
 		setTimeout(function() {
 			UpdateData();
 			delete bgtabs;
@@ -131,9 +128,9 @@ function Initialize() {
 		}, 5000);
 		if (browserId != "F") {
 			chrome.storage.local.get(null, function(items) {
-				if (Object.keys(items["windows_BAK1"]).length > 0) { $("#button_load_bak1").removeClass("disabled"); }
-				if (Object.keys(items["windows_BAK2"]).length > 0) { $("#button_load_bak2").removeClass("disabled"); }
-				if (Object.keys(items["windows_BAK3"]).length > 0) { $("#button_load_bak3").removeClass("disabled"); }
+				if (Object.keys(items["windows_BAK1"]).length > 0 && document.getElementById("button_load_bak1") != null) { document.getElementById("button_load_bak1").classList.remove("disabled"); }
+				if (Object.keys(items["windows_BAK2"]).length > 0 && document.getElementById("button_load_bak2") != null) { document.getElementById("button_load_bak2").classList.remove("disabled"); }
+				if (Object.keys(items["windows_BAK3"]).length > 0 && document.getElementById("button_load_bak3") != null) { document.getElementById("button_load_bak3").classList.remove("disabled"); }
 			});
 		}
 	});			

theme/icon_audio.svg

@@ -15,7 +15,7 @@
    width="32"
    height="32"
    viewBox="0 0 32 32"
-   sodipodi:docname="icon_audio.svg">
+   sodipodi:docname="icon_audio_prev.svg">
   <metadata
      id="metadata3353">
     <rdf:RDF>
@@ -43,9 +43,9 @@
      inkscape:window-height="1058"
      id="namedview3349"
      showgrid="false"
-     inkscape:zoom="22.627418"
-     inkscape:cx="26.09653"
-     inkscape:cy="12.511364"
+     inkscape:zoom="11.313708"
+     inkscape:cx="30.368457"
+     inkscape:cy="15.916913"
      inkscape:window-x="1912"
      inkscape:window-y="-8"
      inkscape:window-maximized="1"
@@ -61,18 +61,9 @@
      inkscape:object-paths="true"
      inkscape:snap-smooth-nodes="true"
      inkscape:object-nodes="true"
-     inkscape:snap-intersection-paths="true" />
-  <circle
-     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#e7e7e7;fill-opacity:1;fill-rule:evenodd;stroke:#747474;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     id="path4367"
-     cx="16"
-     cy="16"
-     r="15.5" />
-  <path
-     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#747474;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-     d="m 19.822266,4.0009397 c -0.625024,0.01859 -1.306528,0.3134121 -1.885254,1.0019749 l -5.025879,4.9966908 -2.411133,0 c -0.831,0 -1.5,0.6690136 -1.5,1.5000316 l 0,9.000195 c 0,0.831018 0.669,1.500032 1.5,1.500032 l 2.411133,0 5.025879,4.99669 C 19.48028,28.832722 21.75,27.874085 21.75,26.318316 l 0,-20.6371641 c 0,-0.9723541 -0.88603,-1.7111944 -1.927734,-1.6802122 z"
-     id="path4363"
-     inkscape:connector-curvature="0" />
+     inkscape:snap-intersection-paths="true"
+     inkscape:snap-global="false"
+     showguides="false" />
   <circle
      style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#e7e7e7;fill-opacity:1;fill-rule:evenodd;stroke:#484848;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      id="path4367-3"
@@ -84,4 +75,127 @@
      style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#303030;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      d="m 66.303216,20.605411 c -0.225509,-0.102094 -0.495003,-0.362337 -0.588623,-0.568416 -0.11076,-0.243808 -0.11375,-0.680744 -0.0063,-0.90738 0.04467,-0.09413 0.292516,-0.382316 0.550781,-0.640411 0.51028,-0.509948 0.737221,-0.819847 0.985761,-1.346109 0.259965,-0.550451 0.327078,-0.870101 0.322535,-1.53619 -0.0034,-0.506294 -0.02163,-0.640094 -0.133799,-0.984374 -0.237499,-0.729013 -0.494106,-1.127977 -1.175815,-1.828126 -0.263574,-0.270702 -0.513301,-0.559694 -0.55495,-0.642203 -0.044,-0.08718 -0.07572,-0.264947 -0.07572,-0.424391 0,-0.681928 0.572223,-1.199134 1.229117,-1.110941 0.277004,0.03719 0.765098,0.369614 1.232371,0.83933 0.778247,0.782315 1.268599,1.656516 1.552552,2.767894 0.160972,0.630041 0.204648,1.758965 0.09289,2.401104 -0.157395,0.904373 -0.522568,1.779381 -1.045997,2.50636 -0.311231,0.432261 -0.963328,1.076335 -1.349017,1.332418 -0.235034,0.156054 -0.311177,0.181368 -0.581042,0.193169 -0.193063,0.0085 -0.365145,-0.01113 -0.45483,-0.05174 z m 2.605205,4.114373 c -0.718996,-0.310949 -0.905938,-1.291431 -0.344136,-1.80494 0.07326,-0.06696 0.312497,-0.256091 0.531636,-0.420287 1.390626,-1.041951 2.497218,-2.643242 3.018195,-4.367466 0.278134,-0.920516 0.332662,-1.335382 0.331239,-2.520186 -0.0011,-0.962797 -0.01219,-1.105824 -0.126576,-1.641626 -0.464149,-2.174031 -1.622081,-3.9891005 -3.373891,-5.2886095 -0.487395,-0.361554 -0.614982,-0.522675 -0.697715,-0.881088 -0.147449,-0.638785 0.387329,-1.295818 1.054702,-1.295818 0.310709,0 0.564314,0.11453 1.036234,0.467972 2.00977,1.505203 3.448923,3.6933425 4.054802,6.1650645 0.226209,0.922836 0.295459,1.642879 0.269143,2.798493 -0.01886,0.828481 -0.0452,1.127341 -0.145537,1.651351 -0.437652,2.285744 -1.503415,4.265256 -3.151939,5.854304 -0.560462,0.540242 -1.269621,1.096555 -1.588969,1.246496 -0.273428,0.128383 -0.620709,0.142935 -0.867188,0.03633 z M 61.489605,3.6490955 c -0.625024,0.01859 -1.306528,0.313412 -1.885254,1.001975 l -5.025879,4.99669 -2.411133,0 c -0.831,0 -1.5,0.6690135 -1.5,1.5000315 l 0,9.000195 c 0,0.831018 0.669,1.500032 1.5,1.500032 l 2.411133,0 5.025879,4.99669 c 1.543268,1.836168 3.812988,0.877531 3.812988,-0.678238 l 0,-20.6371635 c 0,-0.972354 -0.88603,-1.711194 -1.927734,-1.680212 z"
      inkscape:connector-curvature="0" />
+  <path
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.43689348;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 110.71219,48.520527 c 0,3.40533 -2.16344,6.165894 -4.83217,6.165894 -1.39044,0 -2.64371,-0.749358 -3.52531,-1.948843 -0.83169,-3.90027 -0.46907,-6.109475 -0.025,-8.399899 0.88282,-1.219424 2.14665,-1.983045 3.55026,-1.983045 2.66873,-10e-7 4.83217,2.760564 4.83217,6.165892 z"
+     id="path4168"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ssccss" />
+  <ellipse
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#4f4f4f;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     id="path4136"
+     cx="88.538574"
+     cy="51.091621"
+     rx="7.2154284"
+     ry="10.220811" />
+  <g
+     id="g4272"
+     transform="matrix(0.76013176,-0.43886228,0.5,0.8660254,46.675534,44.473101)">
+    <path
+       sodipodi:nodetypes="cccccc"
+       inkscape:connector-curvature="0"
+       id="path4168-2"
+       d="M 5.184762,9.6912006 C 2.460064,9.6889006 0.250238,12.588346 0.25,16.166081 c 2.38e-4,3.577735 2.210064,6.477234 4.934762,6.474879 l 3.543557,0 0,-12.9497594 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#383838;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <ellipse
+       ry="16.032595"
+       rx="12.192926"
+       cy="16.00983"
+       cx="16.680971"
+       id="path4136-9-6"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#494949;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156"
+       d="m 15.813341,17.634107 8.747858,6.678301 -2.813723,3.445319 -6.527806,-8.653254 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5c5c5c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156-9"
+       d="m 15.901729,16.560502 10.265625,3.315483 -1.944544,4.795272 -8.487594,-6.967594 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#686868;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156-9-3"
+       d="m 15.985021,15.801433 10.204885,0.234245 -0.773073,4.070509 -9.456589,-3.394718 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#7d7d7d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156-9-3-2"
+       d="m 15.948084,14.759404 10.481425,-3.252983 0.342177,5.567099 -10.7562,-1.20253 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#969696;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156-9-3-8"
+       d="m 15.781115,13.987627 8.704561,-5.7894826 1.391735,3.6314386 -9.746858,3.029893 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#7d7d7d;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156-9-2"
+       d="m 15.253197,13.200174 6.850356,-8.1246186 2.530869,3.3154731 -8.804211,5.6737375 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#686868;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       sodipodi:nodetypes="ccccc"
+       inkscape:connector-curvature="0"
+       id="rect4156-5"
+       d="m 14.487168,12.709922 4.995637,-9.6976349 2.793296,2.4425429 -6.97871,7.775014 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#5c5c5c;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       d="M 25.714234,16.00983 A 9.4735865,13.258021 0 0 1 16.240647,29.267851 9.4735865,13.258021 0 0 1 6.7670611,16.00983 9.4735865,13.258021 0 0 1 16.240647,2.75181 9.4735865,13.258021 0 0 1 25.714234,16.00983 Z m 2.427606,0 A 11.210869,14.809993 0 0 1 16.930971,30.819823 11.210869,14.809993 0 0 1 5.7201023,16.00983 11.210869,14.809993 0 0 1 16.930971,1.1998377 11.210869,14.809993 0 0 1 28.14184,16.00983 Z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#cacaca;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path4269" />
+    <ellipse
+       ry="3.5550549"
+       rx="2.3850598"
+       cy="16.00983"
+       cx="13.9192"
+       id="path4136-4"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#cdcdcd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  </g>
+  <g
+     id="g4342"
+     transform="translate(66.125,-20)">
+    <circle
+       r="15.5"
+       cy="36"
+       cx="-50.125"
+       id="path4367-4"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#e7e7e7;fill-opacity:1;fill-rule:evenodd;stroke:#191919;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4363-92"
+       d="m -46.302732,24.00094 c -0.62502,0.01859 -1.30653,0.313412 -1.88525,1.001975 l -5.02588,4.99669 -2.41113,0 c -0.831004,0 -1.500004,0.669014 -1.500004,1.500032 l 0,9.000195 c 0,0.831018 0.669,1.500032 1.500004,1.500032 l 2.41113,0 5.02588,4.99669 c 1.54327,1.836168 3.81299,0.877531 3.81299,-0.678238 l 0,-20.637164 c 0,-0.972354 -0.88603,-1.711195 -1.92774,-1.680212 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#747474;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  </g>
+  <g
+     id="g4336"
+     transform="translate(7.4246212,54.270445)">
+    <path
+       sodipodi:nodetypes="sccssssccsss"
+       inkscape:connector-curvature="0"
+       id="path4363"
+       d="m 14.429681,0.00125275 c -0.83336,0.0247867 -1.742039,0.41788277 -2.513666,1.33596645 L 6,10.064007 l -3.9999954,0 C 0.8919997,10.064007 0,10.956024 0,12.064048 l 0,7.871602 c 0,1.108024 0.7212337,2.000043 2.0000046,2.000043 l 3.9999954,0 5.916015,8.726379 C 13.973708,33.110296 17,31.832113 17,29.757754 L 17,2.2415356 C 17,0.94506352 15.818627,-0.04005684 14.429681,0.00125275 Z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#bcbcbc;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <g
+       transform="translate(0.75000049,-32.497107)"
+       id="g4330">
+      <path
+         inkscape:connector-curvature="0"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#303030;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 22.885877,53.457256 c -0.225509,-0.102094 -0.495003,-0.362337 -0.588623,-0.568416 -0.11076,-0.243808 -0.11375,-0.680744 -0.0063,-0.90738 0.04467,-0.09413 0.292516,-0.382316 0.550781,-0.640411 0.51028,-0.509948 0.737221,-0.819847 0.985761,-1.346109 0.259965,-0.550451 0.327078,-0.870101 0.322535,-1.53619 -0.0034,-0.506294 -0.02163,-0.640094 -0.133799,-0.984374 -0.237499,-0.729013 -0.494106,-1.127977 -1.175815,-1.828126 -0.263574,-0.270702 -0.513301,-0.559694 -0.55495,-0.642203 -0.044,-0.08718 -0.07572,-0.264947 -0.07572,-0.424391 0,-0.681928 0.572223,-1.199134 1.229117,-1.110941 0.277004,0.03719 0.765098,0.369614 1.232371,0.83933 0.778247,0.782315 1.268599,1.656516 1.552552,2.767894 0.160972,0.630041 0.204648,1.758965 0.09289,2.401104 -0.157395,0.904373 -0.522568,1.779381 -1.045997,2.50636 -0.311231,0.432261 -0.963328,1.076335 -1.349017,1.332418 -0.235034,0.156054 -0.311177,0.181368 -0.581042,0.193169 -0.193063,0.0085 -0.365145,-0.01113 -0.45483,-0.05174 z"
+         id="path4328" />
+      <path
+         inkscape:connector-curvature="0"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#303030;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 25.491082,57.571629 c -0.718996,-0.310949 -0.905938,-1.291431 -0.344136,-1.80494 0.07326,-0.06696 0.312497,-0.256091 0.531636,-0.420287 1.390626,-1.041951 2.497218,-2.643242 3.018195,-4.367466 0.278134,-0.920516 0.332662,-1.335382 0.331239,-2.520186 -0.0011,-0.962797 -0.01219,-1.105824 -0.126576,-1.641626 -0.464149,-2.174031 -1.622081,-3.989101 -3.373891,-5.28861 -0.487395,-0.361554 -0.614982,-0.522675 -0.697715,-0.881088 -0.147449,-0.638785 0.387329,-1.295818 1.054702,-1.295818 0.310709,0 0.564314,0.11453 1.036234,0.467972 2.00977,1.505203 3.448923,3.693343 4.054802,6.165065 0.226209,0.922836 0.295459,1.642879 0.269143,2.798493 -0.01886,0.828481 -0.0452,1.127341 -0.145537,1.651351 -0.437652,2.285744 -1.503415,4.265256 -3.151939,5.854304 -0.560462,0.540242 -1.269621,1.096555 -1.588969,1.246496 -0.273428,0.128383 -0.620709,0.142935 -0.867188,0.03633 z"
+         id="path4326" />
+    </g>
+  </g>
 </svg>

theme/icon_audio_muted.svg

@@ -39,16 +39,16 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1058"
+     inkscape:window-width="1086"
+     inkscape:window-height="898"
      id="namedview3349"
      showgrid="false"
-     inkscape:zoom="16"
-     inkscape:cx="12.977065"
-     inkscape:cy="17.431941"
-     inkscape:window-x="1912"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
+     inkscape:zoom="4"
+     inkscape:cx="32.162029"
+     inkscape:cy="23.740633"
+     inkscape:window-x="50"
+     inkscape:window-y="50"
+     inkscape:window-maximized="0"
      inkscape:current-layer="svg3347"
      inkscape:snap-page="true"
      inkscape:snap-center="true"
@@ -63,7 +63,7 @@
      inkscape:object-nodes="true"
      inkscape:snap-intersection-paths="true" />
   <circle
-     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#e7e7e7;fill-opacity:1;fill-rule:evenodd;stroke:#747474;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#e7e7e7;fill-opacity:1;fill-rule:evenodd;stroke:#191919;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
      id="path4367"
      cx="16"
      cy="16"
@@ -92,4 +92,19 @@
      x="-20.479692"
      y="21.479692"
      transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)" />
+  <g
+     id="g4342"
+     transform="translate(96.617271,20.925514)">
+    <circle
+       r="15.5"
+       cy="36"
+       cx="-50.125"
+       id="path4367-4"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#e7e7e7;fill-opacity:1;fill-rule:evenodd;stroke:#191919;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4363-92"
+       d="m -46.302732,24.00094 c -0.62502,0.01859 -1.30653,0.313412 -1.88525,1.001975 l -5.02588,4.99669 -2.41113,0 c -0.831004,0 -1.500004,0.669014 -1.500004,1.500032 l 0,9.000195 c 0,0.831018 0.669,1.500032 1.500004,1.500032 l 2.41113,0 5.02588,4.99669 c 1.54327,1.836168 3.81299,0.877531 3.81299,-0.678238 l 0,-20.637164 c 0,-0.972354 -0.88603,-1.711195 -1.92774,-1.680212 z"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#747474;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+  </g>
 </svg>

theme/icon_folder_closed.svg

@@ -12,10 +12,10 @@
    id="svg3347"
    version="1.1"
    inkscape:version="0.91 r13725"
-   width="16"
-   height="16"
-   viewBox="0 0 16 16"
-   sodipodi:docname="folder_closed.svg">
+   width="17"
+   height="17"
+   viewBox="0 0 17 17"
+   sodipodi:docname="icon_folder_closed.svg">
   <metadata
      id="metadata3353">
     <rdf:RDF>
@@ -24,7 +24,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -40,13 +40,13 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1920"
-     inkscape:window-height="1058"
+     inkscape:window-height="1028"
      id="namedview3349"
      showgrid="false"
-     inkscape:zoom="11.313709"
-     inkscape:cx="-2.4116637"
-     inkscape:cy="6.1185819"
-     inkscape:window-x="1912"
+     inkscape:zoom="32.000001"
+     inkscape:cx="10.984766"
+     inkscape:cy="7.9380668"
+     inkscape:window-x="-8"
      inkscape:window-y="-8"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg3347"
@@ -61,14 +61,14 @@
      inkscape:object-paths="true" />
   <path
      style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="M 0,5 0,15 13,15 13,5 Z"
+     d="m 0,7 0,8 13,0 0,-8 z"
      id="path4138"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="ccccc" />
   <path
-     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 12.499937,5.5 1.25e-4,-2 -6.156187,0 L 5.71875,1.5 0.5,1.5 0.5,15"
-     id="path4149"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 11.999937,7 12.000062,6 7,6 5,4 1,4 1,15 0,15 0,3 5.5,3 7.5,4.9867932 13,5 13,7 Z"
+     id="path4149-6"
      inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccc" />
+     sodipodi:nodetypes="ccccccccccccc" />
 </svg>

theme/icon_folder_open.svg

@@ -12,10 +12,10 @@
    id="svg3347"
    version="1.1"
    inkscape:version="0.91 r13725"
-   width="16"
-   height="16"
-   viewBox="0 0 16 16"
-   sodipodi:docname="folder_open.svg">
+   width="17"
+   height="17"
+   viewBox="0 0 17 17"
+   sodipodi:docname="icon_folder_open.svg">
   <metadata
      id="metadata3353">
     <rdf:RDF>
@@ -40,13 +40,13 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:window-width="1920"
-     inkscape:window-height="1058"
+     inkscape:window-height="1028"
      id="namedview3349"
      showgrid="false"
-     inkscape:zoom="11.313709"
-     inkscape:cx="-3.2022799"
-     inkscape:cy="9.440858"
-     inkscape:window-x="1912"
+     inkscape:zoom="22.627418"
+     inkscape:cx="-1.6798683"
+     inkscape:cy="5.5115922"
+     inkscape:window-x="-8"
      inkscape:window-y="-8"
      inkscape:window-maximized="1"
      inkscape:current-layer="svg3347"
@@ -61,14 +61,14 @@
      inkscape:object-paths="true" />
   <path
      style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="M 3,5 0,15 13,15 16,5 Z"
+     d="m 3,7 -3,8 13,0 3,-8 z"
      id="path4138"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="ccccc" />
   <path
-     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-     d="m 12.499937,5.5 1.25e-4,-2 -6.156187,0 L 5.71875,1.5 0.5,1.5 0.5,15"
+     style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     d="M 11.999937,7 12.000062,6 7,6 5,4 1,4 1,15 0,15 0,3 5.5,3 7.5,4.9867932 13,5 13,7 Z"
      id="path4149"
      inkscape:connector-curvature="0"
-     sodipodi:nodetypes="cccccc" />
+     sodipodi:nodetypes="ccccccccccccc" />
 </svg>

theme/theme.css

@@ -32,7 +32,6 @@ div {
 	background-color: var(--tab_list_background);
 }
 
-
 /* MAIN TOOLBAR */
 
 #toolbar {
@@ -124,11 +123,20 @@ div {
 	mask-image: url(../theme/toolbar_settings.svg);
 }
 
-#button_move .button_img {
-	-webkit-mask-image: url(../theme/toolbar_move.svg);
-	mask-image: url(../theme/toolbar_move.svg);
+#button_detach .button_img {
+	-webkit-mask-image: url(../theme/toolbar_detach.svg);
+	mask-image: url(../theme/toolbar_detach.svg);
 }
 
+
+/* FOR LEGACY (CHANGED NAME TO DETACH) */
+#button_move .button_img {
+	-webkit-mask-image: url(../theme/toolbar_detach.svg);
+	mask-image: url(../theme/toolbar_detach.svg);
+}
+
+
+
 #button_pin>.button_img {
 	-webkit-mask-image: url(../theme/toolbar_pin.svg);
 	mask-image: url(../theme/toolbar_pin.svg);
@@ -154,9 +162,14 @@ div {
 	mask-image: url(../theme/toolbar_extensions.svg);
 }
 
+/* FOR LEGACY (CHANGED NAME TO UNLOAD) */
 #button_discard>.button_img {
-	-webkit-mask-image: url(../theme/toolbar_discard.svg);
-	mask-image: url(../theme/toolbar_discard.svg);
+	-webkit-mask-image: url(../theme/toolbar_unload.svg);
+	mask-image: url(../theme/toolbar_unload.svg);
+}
+#button_unload>.button_img {
+	-webkit-mask-image: url(../theme/toolbar_unload.svg);
+	mask-image: url(../theme/toolbar_unload.svg);
 }
 
 #button_new>.button_img {
@@ -351,16 +364,20 @@ div {
 	left: 0px;
 	overflow-x: auto;
 	overflow-y: hidden;
-	padding-right: 2px;
-	padding-bottom: 1px;
+	padding-top: var(--pin_list_padding_top);
+	padding-bottom: var(--pin_list_padding_bottom);
+	padding-left: var(--pin_list_padding_left);
 	background-color: var(--pin_list_background);
 	border-bottom: 1px solid var(--pin_list_border_bottom);
 }
 
 #groups {
+	z-index: 10;
 	position: absolute;
 	display: inline-block;
 	width: 100%;
+	height: 100%;
+	background-color: var(--tab_list_background);
 }
 
 
@@ -421,14 +438,43 @@ div {
 .group_button {
 	position: relative;
 	margin-left: 1px;
-	width: 16px;
+	width: 18px;
 	height: 300px;
 	border: 1px solid transparent;
 	background-color: transparent;
 }
 
+.drop_target.group_button_drag_entered_top {
+	z-index: 3;
+	position: absolute;
+	width: 110%;
+	height: 50%;
+	left: -1px;
+	top: -1px;
+	border-top: 1px solid transparent;
+	background-color: transparent;
+}
+.drop_target.group_button_drag_entered_top.highlighted_drop_target {
+	border-top: 1px solid var(--drag_indicator);
+}
 
-.group_drag_box {
+.drop_target.group_button_drag_entered_bottom {
+	z-index: 4;
+	position: absolute;
+	width: 110%;
+	height: 50%;
+	left: -1px;
+	bottom: -2px;
+	border-bottom: 1px solid transparent;
+	background-color: transparent;
+}
+.drop_target.group_button_drag_entered_bottom.highlighted_drop_target {
+	border-bottom: 1px solid var(--drag_indicator);
+}
+
+
+.drop_target.group_drag_box {
+	z-index: 5;
 	position: absolute;
 	width: 100%;
 	height: 100%;
@@ -436,16 +482,16 @@ div {
 	top: -1px;
 	background-color: transparent;
 }
-.group_drag_box.highlighted_drop_target {
+.drop_target.group_drag_box.highlighted_drop_target {
 	border: 1px solid var(--drag_indicator);
 }
 
 .group_button:hover:not(.active_group) {
+	width: 16px;
 	background-color: var(--group_list_button_hover_background);
 }
 
 .group_button.active_group {
-	width: 20px;
 	border: 1px solid var(--group_list_borders);
 	background-color: var(--tab_list_background);
 }
@@ -455,7 +501,7 @@ div {
 /* GROUP AND FOLDER EDIT DIALOG */
 
 .edit_dialog {
-	z-index: 1000;
+	z-index: 88888;
 	position: absolute;
 	overflow: hidden;
 	width: calc(100% - 28px);
@@ -575,7 +621,7 @@ div {
 .selected_tab>.tab_header_hover{
 	border:1px solid var(--tab_selected_hover_border);
 	background-color:var(--tab_selected_hover_background);
-	}
+}
 .tab.selected_tab>.tab_header_hover>.tab_title{
 	color:var(--tab_selected_hover_title_font_color);
 	font-style:var(--tab_selected_hover_title_font_style);
@@ -825,14 +871,6 @@ div {
 
 
 
-
-
-
-
-
-
-
-
 /* TABS */
 
 /* regular tab title */
@@ -854,17 +892,19 @@ div {
 	left: 0px;
 	height: auto;
 	width: auto;
-	border-top: 1px solid transparent;
+	/* border-top: 1px solid transparent; */
+	margin-top: var(--margin_top_tab);
 }
+
 .tab>.tab_header {
 	/* tab size is here, all the rest is automatically calculated, adjust line-height to fix title vertical position */
 	z-index: 10;
 	position: relative;
 	top: 0px;
-	left: 1px;
+	left: var(--tab_header_left);
 	height: var(--tab_height);
 	line-height: var(--tab_height_line);
-	width: calc(100% - 4px);
+	width: var(--tab_header_width);
 	background-image: url(../theme/icon_empty.svg);
 	background-size: var(--favicon_width) var(--favicon_height);
 	background-position: var(--favicon_left), center;
@@ -875,79 +915,65 @@ div {
 
 .drop_target {
 	position: absolute;
-	pointer-events: none;
+	/* pointer-events: none; */
 }
 
-.tab>.drag_enter_center {
+.tab>.drop_target.drag_enter_center {
 	border-radius: var(--tab_header_border_radius);
-	z-index: 11;
-	top: -1px;
-	left: 1px;
-	height: calc(var(--tab_height) + 2px);
-	width: calc(100% - 4px);
+	z-index: -1;
+	top: 0px;
+	left: var(--tab_drag_enter_center_left);
+	height: var(--tab_height);
+	width: var(--tab_drag_enter_center_width);
 	border: 1px solid transparent;
 }
 
-.tab>.drag_enter_center.highlighted_drop_target {
+.tab>.drop_target.drag_enter_center.highlighted_drop_target {
 	border: 1px solid var(--drag_indicator);
 }
 
-.tab>.drag_entered_top {
+.tab>.drop_target.drag_entered_top {
 	border-radius: var(--tab_header_border_radius);
-	z-index: 15;
-	top: -1px;
-	left: 1px;
-	width: calc(100% - 2px);
+	z-index: -1;
+	top: var(--tab_drag_entered_top);
+	left: var(--tab_drag_entered_left);
+	width: var(--tab_drag_entered_tb_width);
 	height: var(--drag_area_top);
 	border-top: 1px solid transparent;
 }
-.tab>.drag_entered_top.highlighted_drop_target {
+.tab>.drop_target.drag_entered_top.highlighted_drop_target {
 	border-top: 1px solid var(--drag_indicator);
 }
 
-.tab>.drag_entered_bottom {
+.tab>.drop_target.drag_entered_bottom {
 	border-radius: var(--tab_header_border_radius);
-	z-index: 20;
-	bottom: -1px;
-	left: 1px;
-	width: calc(100% - 2px);
+	z-index: -1;
+	bottom: var(--tab_drag_entered_bottom);
+	left: var(--tab_drag_entered_left);
+	width: var(--tab_drag_entered_tb_width);
 	height: var(--drag_area_bottom);
 	border-bottom: 1px solid transparent;
 }
-.tab>.drag_entered_bottom.highlighted_drop_target {
-	bottom: -1px;
+.tab>.drop_target.drag_entered_bottom.highlighted_drop_target {
 	border-bottom: 1px solid var(--drag_indicator);
 }
-
-.tab>.children>.tab:last-child>.drag_entered_bottom {
-	z-index: 19;
-	bottom: 3px;
-	border-bottom: 1px solid transparent;
-}
-.tab>.children>.tab:last-child>.drag_entered_bottom.highlighted_drop_target {
-	bottom: -1px;
-	height: calc(var(--drag_area_bottom) + 4px);
-	border-bottom: 1px solid var(--drag_indicator);
+.group>:first-child {
+	margin-top: var(--margin_top_first_tab);
 }
 
-
-
-
-/* .group>.tab:last-child { */
-.group>:last-child {
+.group>.children_tabs>:last-child {
 	margin-bottom: 12px;
 }
 
 
 /* TABS WITH CHILDREN, OPEN AND CLOSED */
 .expand {
-	z-index: 200;
+	z-index: -1;
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	height: var(--expand_height);
 	width:  var(--expand_width);
-	
 	-webkit-mask-position: var(--expand_mask_left) var(--expand_mask_top);
 	-webkit-mask-size: var(--expand_mask_width) var(--expand_mask_height);
 	mask-size: var(--expand_mask_width) var(--expand_mask_height);
@@ -955,16 +981,16 @@ div {
 }
 
 /* CHILDREN TABS */
-.tab>.children {
+.tab>.children_tabs {
 	position: relative;
 	padding-left: var(--children_padding_left);
 }
 
-.tab.o>.children {
+.tab.o>.children_tabs {
 	height: auto;
 }
 
-.tab.c>.children {
+.tab.c>.children_tabs {
 	display: none;
 	height: 0px;
 }
@@ -975,12 +1001,14 @@ div {
 }
 
 .tab.c>.tab_header>.expand {
+	z-index: 200;
 	background-color: var(--expand_closed_background);
 	mask-image: url(../theme/expand_closed.svg);
 	-webkit-mask-image: url(../theme/expand_c.svg);
 }
 
 .tab.o>.tab_header>.expand {
+	z-index: 200;
 	background-color: var(--expand_open_background);
 	mask-image: url(../theme/expand_open.svg);
 	-webkit-mask-image: url(../theme/expand_o.svg);
@@ -991,13 +1019,8 @@ div {
 	padding-left: var(--tab_title_text_padding_exp_left);
 }
 
-
 /* FOLDERS */
 
-/* .group>.children_folders{
-	background-color: var(--folder_list_background);
-} */
-
 .folder_title {
 	z-index: 5;
 	font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
@@ -1008,7 +1031,6 @@ div {
 	padding-right: 3px;
 	padding-left: var(--tab_title_text_padding_left);
 	font-size: var(--title_font_size);
-
 	color:var(--tab_title_font_color);
 	font-style:var(--tab_title_font_style);
 	font-weight:var(--tab_title_font_weight);
@@ -1020,81 +1042,72 @@ div {
 	left: 0px;
 	height: auto;
 	width: auto;
-	border-top: 1px solid transparent;
+	margin-top: var(--margin_top_tab);
 }
 .folder>.folder_header {
 	z-index: 10;
 	position: relative;
 	top: 0px;
-	left: 1px;
+	left: var(--tab_header_left);
 	height: var(--tab_height);
 	line-height: var(--tab_height_line);
-	width: calc(100% - 4px);
+	width: var(--tab_header_width);
 	border-radius:var(--tab_header_border_radius);
 	border:1px solid var(--tab_border);
 	background-color:var(--tab_background);
 }
-.folder>.drag_enter_center {
+.folder>.drop_target.drag_enter_center {
 	border-radius: var(--tab_header_border_radius);
-	z-index: 11;
-	top: -1px;
-	left: 1px;
-	height: calc(var(--tab_height) + 2px);
-	width: calc(100% - 4px);
+	z-index: -1;
+	top: 0px;
+	left: var(--tab_drag_enter_center_left);
+	height: var(--tab_height);
+	width: var(--tab_drag_enter_center_width);
 	border: 1px solid transparent;
 }
 
-.folder>.drag_enter_center.highlighted_drop_target {
+.folder>.drop_target.drag_enter_center.highlighted_drop_target {
 	border: 1px solid var(--drag_indicator);
 }
 
-.folder>.drag_entered_top {
+.folder>.drop_target.drag_entered_top {
 	border-radius: var(--tab_header_border_radius);
-	z-index: 15;
-	top: -1px;
-	left: 1px;
-	width: calc(100% - 2px);
+	z-index: -1;
+	top: var(--tab_drag_entered_top);
+	left: var(--tab_drag_entered_left);
+	width: var(--tab_drag_entered_tb_width);
 	height: var(--drag_area_top);
 	border-top: 1px solid transparent;
 }
-.folder>.drag_entered_top.highlighted_drop_target {
+.folder>.drop_target.drag_entered_top.highlighted_drop_target {
 	border-top: 1px solid var(--drag_indicator);
 }
 
-.folder>.drag_entered_bottom {
+.folder>.drop_target.drag_entered_bottom {
 	border-radius: var(--tab_header_border_radius);
-	z-index: 20;
-	bottom: -1px;
-	left: 1px;
-	width: calc(100% - 2px);
+	z-index: -1;
+	bottom: var(--tab_drag_entered_bottom);
+	left: var(--tab_drag_entered_left);
+	width: var(--tab_drag_entered_tb_width);
 	height: var(--drag_area_bottom);
 	border-bottom: 1px solid transparent;
 }
-.folder>.drag_entered_bottom.highlighted_drop_target {
-	bottom: -1px;
+.folder>.drop_target.drag_entered_bottom.highlighted_drop_target {
 	border-bottom: 1px solid var(--drag_indicator);
 }
 
-
-.folder>.children>.folder:last-child>.drag_entered_bottom {
-	z-index: 19;
-	bottom: 3px;
-	border-bottom: 1px solid transparent;
-}
-.folder>.children>.folder:last-child>.drag_entered_bottom.highlighted_drop_target {
-	bottom: -1px;
-	height: calc(var(--drag_area_bottom) + 4px);
-	border-bottom: 1px solid var(--drag_indicator);
-}
-.folder>.children {
+.folder>.children_folders,
+.folder>.children_tabs {
 	position: relative;
 	padding-left: var(--children_padding_left);
 }
-.folder.o>.children {
+.folder.o>.children_folders,
+.folder.o>.children_tabs {
 	height: auto;
 }
 
-.folder.c>.children {
+.folder.c>.children_folders,
+.folder.c>.children_tabs {
 	display: none;
 	height: 0px;
 }
@@ -1122,9 +1135,7 @@ div {
 }
 
 .folder>.folder_header>.folder_icon,
-.folder.n>.folder_header>.folder_icon,
 .folder.c>.folder_header>.folder_icon {
-	/* background-color: #b2b2b2; */
 	background-color: var(--expand_closed_background);
 	-webkit-mask-image: url(../theme/icon_folder_closed.svg);
 	mask-image: url(../theme/icon_folder_closed.svg);
@@ -1166,16 +1177,23 @@ div {
 
 
 
-.children_folders>:last-child {
+/* .children_folders>:last-child {
 	margin-bottom: 1px;
-}
+} */
 
+.selected_folder>.folder_header
+.active_folder>.folder_header {
+	z-index: 900;
+}
+/* .children_folders>:last-child {
+	margin-bottom: 12px;
+} */
 
 
 /* PINS */
 
 @keyframes blinking {
-	0%  {background-color:  var(--tab_background); border:1px solid var(--tab_border);}
+	0% {background-color:  var(--tab_background); border:1px solid var(--tab_border);}
 	50% {background-color: var(--attention_background); border:1px solid var(--attention_border);}
 	80% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
 	100% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
@@ -1188,79 +1206,114 @@ div {
 	position: relative;
 	display: inline-block;
 	vertical-align: top;
-	top: 1px;
-	left: 1px;
+	margin-left: var(--pin_margin_left);
+	margin-bottom: var(--pin_margin_bottom);
 	height: var(--pin_height);
 	width: var(--pin_width);
 	/* border: 1px solid red; */
 }
 
-.pin>.tab_header>.tab_title,
-.pin>.tab_header>.expand {
-	display: none;
-}
+/* #pin_list>:first-child {
+	background-color: red;
 
+}
+#pin_list>:first-child>.tab_header {
+	opacity: 0.1;
+} */
+
+.pin>.tab_header>.tab_title,
+.pin>.tab_header>.expand,
+.pin>.tab_header>.close,
+.pin>.tab_header>.close.close_hover,
+.pin>.tab_header>.close>.close_img {
+	display: none;
+	top: 0px;
+	height: 0px;
+	width: 0px;
+}
 .pin>.tab_header {
-	height: calc(100% - 3px);
-	width: calc(100% - 3px);
+	z-index: 10;
+	position: relative;
+	top: 0px;
+	height: calc(100% - 2px);
+	width: calc(100% - 2px);
+	line-height: 0px;
 	background-image: url(../theme/icon_empty.svg);
 	background-size: var(--favicon_width) var(--favicon_height);
 	background-position: center, center;
 }
 
-.pin>.drag_entered_top {
-	z-index: 20;
+.pin>.drop_target.drag_entered_top {
+	z-index: -1;
 	position: absolute;
-	top: 1px;
-	left: -1px;
-	height: calc(100% - 4px);
+	top: 0px;
+	left: var(--pin_drag_entered_top_left);
+	height: 100%;
 	width: 50%;
 	border-left: 1px solid transparent;
 }
 
-.pin>.drag_entered_top.highlighted_drop_target {
+.pin>.drop_target.drag_entered_top.highlighted_drop_target {
 	border-left: 1px solid var(--drag_indicator);
 }
 
-.pin>.drag_entered_bottom {
-	z-index: 21;
+.pin>.drop_target.drag_entered_bottom {
+	z-index: -1;
 	position: absolute;
-	top: 1px;
-	left: calc(50% - 2px);
-	height: calc(100% - 4px);
+	top: 0px;
+	left: var(--pin_drag_entered_bottom_right);
+	height: 100%;
 	width: 50%;
 	border-left: 1px solid transparent;
 }
 
-.pin>.drag_entered_bottom.highlighted_drop_target {
+.pin>.drop_target.drag_entered_bottom.highlighted_drop_target {
 	border-right: 1px solid var(--drag_indicator);
 }
 
-.pin>.drag_enter_center {
-	z-index: 2;
+.pin>.drop_target.drag_enter_center {
+	z-index: -1;
+	display: none;
+	position: absolute;
+	top: 0px;
+	height: 0px;
+	width: 0px;
+}
+.pin>.children_tabs {
+	display: none;
 	position: absolute;
 	top: 0px;
 	height: 0px;
 	width: 0px;
-	/* border: 1px solid yellow; */
 }
 
+.pin.selected_tab,
+.pin.active_tab {
+	z-index: 800;
+}
+#pin_list>:last-child {
+	margin-right: var(--pin_last_margin_right);
+}
 
 
 /* MEDIA */
 
-/* .tab.c>.tab_header>.tab_mediaicon,
-.tab.o>.tab_header>.tab_mediaicon {
-	left: calc(var(--pin_width) - 4px);
-} */
+@keyframes blinking2 {
+	0% {opacity:  0}
+	30% {opacity:  1}
+	70% {opacity:  1}
+	100% {opacity:  0}
+}
 .tab_mediaicon {
+	animation: blinking2 1.5s infinite;
 	position: absolute;
 	display: inline-block;
 	vertical-align: top;
 	z-index: 999;
-	bottom: 2px;
-	left: var(--tab_mediaicon_left);
-	bottom: var(--tab_mediaicon_bottom);
+	bottom: 0px;
+	left: 0px;
+/* 	left: var(--tab_mediaicon_left);
+	bottom: var(--tab_mediaicon_bottom); */
 	height: 0px;
 	width: 0px;
 	background-size: 0px 0px;
@@ -1273,6 +1326,7 @@ div {
 	background-size: var(--tab_mediaicon_width) var(--tab_mediaicon_height);
 }
 .audible>.tab_header>.tab_mediaicon:hover {
+	animation: none;
 	background-image: url(../theme/icon_audio_hover.svg);
 }
 
@@ -1283,6 +1337,7 @@ div {
 	background-size: var(--tab_mediaicon_width) var(--tab_mediaicon_height);
 }
 .muted>.tab_header>.tab_mediaicon:hover {
+	animation: none;
 	background-image: url(../theme/icon_audio_muted_hover.svg);
 }
 
@@ -1322,7 +1377,8 @@ div {
 	mask-position: center, center;
 }
 
-.close_show>.tab_title {
+.close_show>.tab_title,
+.close_show>.folder_title {
 	padding-right: var(--tab_title_text_padding_right_with_close_button);
 }
 
@@ -1342,7 +1398,41 @@ div {
 
 .pin>.tab_header>.close {
 	display: none;
-	z-index: 0;
+	height: 0px;
+	width: 0px;
+	border: none;
+}
+
+.folder_header.folder_header_hover,
+.tab_header.tab_header_hover {
+	z-index: 9999;
+}
+
+
+
+
+
+
+
+/* 
+
+@keyframes blinking {
+	0% {background-color:  var(--tab_background); border:1px solid var(--tab_border);}
+	50% {background-color: var(--attention_background); border:1px solid var(--attention_border);}
+	80% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
+	100% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
+}
+
+ */
+.dragged_selected>.folder_header,
+.dragged_selected>.tab_header,
+.dragged_tree>.folder_header,
+.dragged_tree>.tab_header {
+	/* animation: blinking 2.5s infinite; */
+	
+	border:1px solid var(--tab_selected_border);
+	background-color:var(--tab_selected_background);
+	
 }
 
 
@@ -1354,7 +1444,7 @@ div {
 	display: none;
 	word-wrap: normal;
 	white-space: initial;
-	z-index: 1000;
+	z-index: 99999;
 	font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
 	font-size: 12px;
 	border: 1px solid var(--tabs_menu_border);
@@ -1381,8 +1471,6 @@ div {
 	margin: 0px auto;
 }
 
-
-
 /* HIDE */
 
 .hidden {

theme/theme_size_preset_0.css

@@ -4,10 +4,10 @@ body {
 	--scrollbar_width: 16px;
 	--button_size: 22px;
 	
-	--pin_width: 20px;
-	--pin_height: 20px;
+	--pin_width: 22px;
+	--pin_height: 22px;
 
-	--tab_height: 15px;
+	--tab_height: 16px;
 	--tab_height_line: 17px;
 
 	--title_font_size: 10.5px;
@@ -16,8 +16,8 @@ body {
 	--tab_title_text_padding_exp_left: 25px;
 	--tab_title_text_padding_right_with_close_button: 20px;
 
-	--favicon_width: 13px;
-	--favicon_height: 13px;
+	--favicon_width: 14px;
+	--favicon_height: 14px;
 	--favicon_left: 1px;
 
 	--expand_height: 15px;
@@ -39,6 +39,4 @@ body {
 	
 	--tab_mediaicon_height: 8px;
 	--tab_mediaicon_width: 8px;
-	--tab_mediaicon_left: 1px;
-	--tab_mediaicon_bottom: 1px;
 }

theme/theme_size_preset_1.css

@@ -4,8 +4,8 @@ body {
 	--scrollbar_width: 16px;
 	--button_size: 22px;
 	
-	--pin_width: 22px;
-	--pin_height: 22px;
+	--pin_width: 21px;
+	--pin_height: 21px;
 
 	--tab_height: 17px;
 	--tab_height_line: 19px;
@@ -37,8 +37,6 @@ body {
 	--close_height: 11px;
 	--close_width: 11px;
 	
-	--tab_mediaicon_height: 11px;
-	--tab_mediaicon_width: 11px;
-	--tab_mediaicon_left: 1px;
-	--tab_mediaicon_bottom: 1px;
+	--tab_mediaicon_height: 9px;
+	--tab_mediaicon_width: 9px;
 }

theme/theme_size_preset_2.css

@@ -4,10 +4,10 @@ body {
 	--scrollbar_width: 16px;
 	--button_size: 22px;
 	
-	--pin_width: 25px;
-	--pin_height: 25px;
+	--pin_width: 24px;
+	--pin_height: 24px;
 
-	--tab_height: 19px;
+	--tab_height: 20px;
 	--tab_height_line: 22px;
 	
 	--title_font_size: 12px;
@@ -16,9 +16,9 @@ body {
 	--tab_title_text_padding_exp_left: 35px;
 	--tab_title_text_padding_right_with_close_button: 19px;
 
-	--favicon_width: 17px;
-	--favicon_height: 17px;
-	--favicon_left: 1px;
+	--favicon_width: 16px;
+	--favicon_height: 16px;
+	--favicon_left: 2px;
 
 	--expand_height: 19px;
 	--expand_width: 36px;
@@ -37,8 +37,6 @@ body {
 	--close_height: 13px;
 	--close_width: 13px;
 	
-	--tab_mediaicon_height: 11px;
-	--tab_mediaicon_width: 11px;
-	--tab_mediaicon_left: 1px;
-	--tab_mediaicon_bottom: 1px;
+	--tab_mediaicon_height: 10px;
+	--tab_mediaicon_width: 10px;
 }

theme/theme_size_preset_3.css

@@ -7,7 +7,7 @@ body {
 	--pin_width: 26px;
 	--pin_height: 26px;
 
-	--tab_height: 21px;
+	--tab_height: 22px;
 	--tab_height_line: 25px;
 	
 	--title_font_size: 12px;
@@ -16,9 +16,9 @@ body {
 	--tab_title_text_padding_exp_left: 37px;
 	--tab_title_text_padding_right_with_close_button: 24px;
 
-	--favicon_width: 17px;
-	--favicon_height: 17px;
-	--favicon_left: 2px;
+	--favicon_width: 16px;
+	--favicon_height: 16px;
+	--favicon_left: 3px;
 
 	--expand_height: 21px;
 	--expand_width: 38px;
@@ -37,8 +37,6 @@ body {
 	--close_height: 13px;
 	--close_width: 13px;
 	
-	--tab_mediaicon_height: 12px;
-	--tab_mediaicon_width: 12px;
-	--tab_mediaicon_left: 1px;
-	--tab_mediaicon_bottom: 1px;
+	--tab_mediaicon_height: 11px;
+	--tab_mediaicon_width: 11px;
 }

theme/theme_size_preset_4.css

@@ -4,10 +4,10 @@ body {
 	--scrollbar_width: 16px;
 	--button_size: 22px;
 	
-	--pin_width: 26px;
-	--pin_height: 27px;
+	--pin_width: 28px;
+	--pin_height: 28px;
 
-	--tab_height: 23px;
+	--tab_height: 24px;
 	--tab_height_line: 25px;
 
 	--title_font_size: 14px;
@@ -16,8 +16,8 @@ body {
 	--tab_title_text_padding_exp_left: 39px;
 	--tab_title_text_padding_right_with_close_button: 24px;
 
-	--favicon_width: 17px;
-	--favicon_height: 17px;
+	--favicon_width: 18px;
+	--favicon_height: 18px;
 	--favicon_left: 3px;
 
 	--expand_height: 23px;
@@ -39,6 +39,4 @@ body {
 	
 	--tab_mediaicon_height: 12px;
 	--tab_mediaicon_width: 12px;
-	--tab_mediaicon_left: 1px;
-	--tab_mediaicon_bottom: 1px;
 }

theme/theme_tabs_margin_0.css

@@ -0,0 +1,35 @@
+body {
+	/* vertical */
+	--margin_top_first_tab: 2px;
+	--margin_top_tab: -1px;
+	
+	/* drag_bottom vertical */
+	--tab_drag_entered_bottom: 0px;
+
+	/* drag_top vertical */
+	--tab_drag_entered_top: 0px;
+
+	/* horizontal */
+	--tab_header_left: 1px;
+	--tab_header_width: calc(100% - 4px);
+
+	/* drag_enter horizontal */
+	--tab_drag_enter_center_left: 1px;
+	--tab_drag_enter_center_width: calc(100% - 4px);
+
+	/* drag_top_bottom left */
+	--tab_drag_entered_left: 1px;
+	--tab_drag_entered_tb_width: calc(100% - 2px);
+	
+	--pin_list_padding_top: 1px;
+	--pin_list_padding_bottom: 2px;
+	--pin_list_padding_left: 2px;
+	
+	--pin_margin_left: -1px;
+	--pin_last_margin_right: 3px;
+	--pin_margin_bottom: -1px;
+	
+	
+	--pin_drag_entered_top_left: 0px;
+	--pin_drag_entered_bottom_right: calc(50% - 2px);
+}

theme/theme_tabs_margin_1.css

@@ -0,0 +1,35 @@
+body {
+	/* vertical */
+	--margin_top_first_tab: 1px;
+	--margin_top_tab: 0px;
+	
+	/* drag_bottom vertical */
+	--tab_drag_entered_bottom: 0px;
+
+	/* drag_top vertical */
+	--tab_drag_entered_top: -1px;
+
+	/* horizontal */
+	--tab_header_left: 1px;
+	--tab_header_width: calc(100% - 4px);
+
+	/* drag_enter horizontal */
+	--tab_drag_enter_center_left: 1px;
+	--tab_drag_enter_center_width: calc(100% - 4px);
+
+	/* drag_top_bottom left */
+	--tab_drag_entered_left: 1px;
+	--tab_drag_entered_tb_width: calc(100% - 2px);
+
+	--pin_list_padding_top: 1px;
+	--pin_list_padding_bottom: 1px;
+	--pin_list_padding_left: 1px;
+	
+	--pin_margin_left: 0px;
+	--pin_last_margin_right: 2px;
+	--pin_margin_bottom: 0px;
+	
+	
+	--pin_drag_entered_top_left: -1px;
+	--pin_drag_entered_bottom_right: calc(50% - 2px);
+}

theme/theme_tabs_margin_2.css

@@ -0,0 +1,35 @@
+body {
+	/* vertical */
+	--margin_top_first_tab: 1px;
+	--margin_top_tab: 1px;
+	
+	/* drag_bottom bottom vertical */
+	--tab_drag_entered_bottom: -1px;
+	
+	/* drag_top vertical */
+	--tab_drag_entered_top: -1px;
+
+	/* horizontal */
+	--tab_header_left: 1px;
+	--tab_header_width: calc(100% - 4px);
+
+	/* drag_enter horizontal */
+	--tab_drag_enter_center_left: 1px;
+	--tab_drag_enter_center_width: calc(100% - 4px);
+
+	/* drag_top_bottom left */
+	--tab_drag_entered_left: 1px;
+	--tab_drag_entered_tb_width: calc(100% - 2px);
+
+	--pin_list_padding_top: 1px;
+	--pin_list_padding_bottom: 0px;
+	--pin_list_padding_left: 0px;
+	
+	--pin_margin_left: 1px;
+	--pin_last_margin_right: 1px;
+	--pin_margin_bottom: 1px;
+	
+	
+	--pin_drag_entered_top_left: -1px;
+	--pin_drag_entered_bottom_right: calc(50% - 1px);
+}