bump to 1.6

..TODO/TODO.txt

@@ -1,5 +1,24 @@
+FIXES:
+deny Drag&drop tab to root of folders
+"Never show close button" option was breaking theme preview/editor
+closing pinned tabs did not resize area of pinned tabs, leaving empty space below
+added "bookmark" menu for single tab
+clone pinned tab was added as not pinned (only in Firefox)
+Shortcut changed to Ctrl+F2
+export session file has now date as a name
 
 
+
+
+
+
+instruction to add popup
+line for children hierarchy (like at the beggining)
+"undo close" as a possible action with middle click on empty space
+
+
+DRAG&DROP TO ANOTHER WINDOW OF THE ENTIRE GROUP
+
 undo close to restore trees (will work ONLY in firefox)
 Close tab on Middle mouse click and not On Middle mouse down
 Split Pin size in theme
@@ -23,8 +42,6 @@ menu: Unload other
 sort tabs/tree
 maybe filter tabs on search
 
-make tabs border width configurable, including size 0
-make tab spacing configurable, including 0 size
 
 font size
 hibernate group

..Themes/DarkMozVetTabTheme.tt_theme

@@ -0,0 +1 @@
+{"ToolbarShow":true,"ColorsSet":{"group_list_button_hover_background":"#000000","tab_list_background":"#000000","group_list_background":"#000000","attention_background":"#ffd6ce","pin_list_background":"#000000","tab_background":"#1e1e1e","tab_hover_border":"#878787","tab_border":"#bebebe","tab_title_font_style":"italic","tab_title_font_color":"#b7b7b7","close_x":"#7d7d7d","tab_hover_background":"#717171","tab_hover_title_font_color":"#ffffff","tab_discarded_background":"#4c4c4c","tab_discarded_title_font_color":"#b9b9b9"},"TabsSizeSetNumber":2,"TabsMargins":"2","theme_name":"Dark","theme_version":3,"toolbar":"<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><div class=button id=button_undo><div class=button_img></div></div><div class=button id=button_search><div class=button_img></div></div><div class=button id=button_tools><div class=button_img></div></div><div class=button id=button_groups><div class=button_img></div></div><div class=button id=button_backup><div class=button_img></div></div><div class=button id=button_folders><div class=button_img></div></div></div><div class=toolbar_shelf id=toolbar_search><div id=toolbar_search_input_box><input id=filter_box type=text placeholder=Search tabs...></input><div id=button_filter_clear style=\"opacity:0; position:absolute;\" type=reset></div></div><div id=toolbar_search_buttons><div class=button id=button_filter_type><div class=button_img></div></div><div class=button id=filter_search_go_prev><div class=button_img></div></div><div class=button id=filter_search_go_next><div class=button_img></div></div></div></div><div class=toolbar_shelf id=toolbar_shelf_tools><div class=button id=button_options><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><div class=button id=button_new_group><div class=button_img></div></div><div class=button id=button_remove_group><div class=button_img></div></div><div class=button id=button_edit_group><div class=button_img></div></div><div class=button id=button_import_group><div class=button_img></div></div><div class=button id=button_export_group><div class=button_img></div></div></div><div class=toolbar_shelf id=toolbar_shelf_backup><div class=button id=button_import_bak><div class=button_img></div></div><div class=button id=button_import_merge_bak><div class=button_img></div></div><div class=button id=button_export_bak><div class=button_img></div></div></div><div class=toolbar_shelf id=toolbar_shelf_folders><div class=button id=button_new_folder><div class=button_img></div></div><div class=button id=button_remove_folder><div class=button_img></div></div><div class=button id=button_edit_folder><div class=button_img></div></div></div>","unused_buttons":""}

..files_ForTesting/background.html

@@ -6,4 +6,5 @@
 	<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>
+	<script type="text/javascript" src="../init.js"></script>
 </html>

..files_ForTesting/init.js

@@ -0,0 +1,16 @@
+// 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/
+
+document.addEventListener("DOMContentLoaded", Init(), false);
+
+function Init() {
+	if (browserId == "F") {
+		FirefoxMessageListeners();
+		FirefoxStart(0);
+	} else {
+		// ConvertLegacyStorage();
+		ChromeMessageListeners();
+		ChromeLoadTabs(0);
+	}
+}

..files_ForTesting/manifest.json

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

..files_firefox/background.html

@@ -4,4 +4,5 @@
 	<body></body>
 	<script type="text/javascript" src="../scripts/global.js"></script>
 	<script type="text/javascript" src="../bg_ff.js"></script>
+	<script type="text/javascript" src="../init.js"></script>
 </html>

..files_firefox/init.js

@@ -0,0 +1,12 @@
+// 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/
+
+document.addEventListener("DOMContentLoaded", Init(), false);
+
+function Init() {
+	setTimeout(function() {
+		FirefoxMessageListeners();
+		FirefoxStart(0);
+	}, 500);
+}

..files_firefox/manifest.json

@@ -14,7 +14,7 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "unlimitedStorage", "bookmarks", "tabHide" ],
 	"sidebar_action": {
 		"default_icon": {
 			"16": "icons/16.png",
@@ -30,7 +30,7 @@
 	},
 	"commands": {
 		"_execute_browser_action": {
-			"suggested_key": { "default": "F2" },
+			"suggested_key": { "default": "Ctrl+F2" },
 			"description": "toggle Tree Tabs"
 		}
 	},
@@ -44,5 +44,5 @@
 		"page": "options.html",
 		"open_in_tab": true
 	},
-	"version": "1.5.1"
+	"version": "1.6.0"
 }

..files_opera/background.html

@@ -5,4 +5,5 @@
 	<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="../init.js"></script>
 </html>

..files_opera/init.js

@@ -0,0 +1,11 @@
+// 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/
+
+document.addEventListener("DOMContentLoaded", Init(), false);
+
+function Init() {
+	ConvertLegacyStorage();
+	ChromeMessageListeners();
+	ChromeLoadTabs(0);
+}

..files_opera/manifest.json

@@ -15,7 +15,7 @@
 		"19": "icons/16.png",
 		"16": "icons/16.png"
 	},
-	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "bookmarks" ],
+	"permissions": [ "tabs", "sessions", "<all_urls>", "storage", "unlimitedStorage", "bookmarks" ],
 	"sidebar_action": {
 		"default_icon": {
 			"19": "icons/16.png",
@@ -25,5 +25,5 @@
 		"default_title": "Tree Tabs"
 	},
 	"options_page": "options.html",
-	"version": "1.0"
+	"version": "1.6.0"
 }

..files_vivaldi/background.html

@@ -4,4 +4,5 @@
 	<body></body>
 	<script type="text/javascript" src="../scripts/global.js"></script>
 	<script type="text/javascript" src="../bg_ch.js"></script>
+	<script type="text/javascript" src="../init.js"></script>
 </html>

..files_vivaldi/init.js

@@ -0,0 +1,10 @@
+// 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/
+
+document.addEventListener("DOMContentLoaded", Init(), false);
+
+function Init() {
+	ChromeMessageListeners();
+	ChromeLoadTabs(0);
+}

..files_vivaldi/manifest.json

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

..legacy when needed/legacy.js

@@ -2,6 +2,13 @@
 // 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/
 
+
+if (localStorage.getItem("t0") != null){
+	LoadV015(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: ""};
@@ -77,23 +84,15 @@ function LoadV015(retry){
 			}
 		}
 
-		if (browserId == "F") {
+
-			// append ids to firefox tabs
+		// create new hashes
-			qtabs.forEach(function(Tab){
+		qtabs.forEach(function(Tab){
-				AppendTabTTId(Tab.id);
+			ChromeHashURL(Tab);
-			});
+		});
-			qtabs.forEach(function(Tab){
+		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});
+			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});
-			});
+		});
-		} 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++){
@@ -101,152 +100,7 @@ function LoadV015(retry){
 				localStorage.removeItem("t"+t);
 			}
 		}
-		window.location.reload();
+		ConvertLegacyStorage();
-	});
-}
-
-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: ""};
-						} else {
-							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) {
-							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);
-							}
-
-						}
-					});
-				}
-			});			
-		}
 	});
 }
 
@@ -272,62 +126,62 @@ function ConvertLegacyStorage() {
 			LSpreferences = LoadData("preferences", {});
 		}
 
-		if (browserId != "F") {
+		let LStabs = {};
-			let LStabs = {};
+		if (localStorage.getItem("tabs") != null) {
-			if (localStorage.getItem("tabs") != null) {
+			LStabs = LoadData("tabs", {});
-				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});
 		}
+		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});

_locales/en/messages.json

@@ -19,6 +19,9 @@
 	"button_undo": {
 		"message": "Reopen last closed"
 	},
+	"button_reboot": {
+		"message": "Reload Tree Tabs. Try this in case your tree hierarchy is lost after restart."
+	},
 	"button_detach": {
 		"message": "Detach tab"
 	},
@@ -118,20 +121,19 @@
 	"button_folders": {
 		"message": "Folders"
 	},
-
 	"button_new_folder": {
 		"message": "New folder"
 	},
-
 	"button_remove_folder": {
 		"message": "Remove selected folder/s"
 	},
-
 	"button_edit_folder": {
 		"message": "Rename folder"
 	},
 
 
+	
+	
 
 
 	"menu_expand_all": {
@@ -205,7 +207,7 @@
 	},
 
 	"menu_bookmark_tree": {
-		"message": "Bookmark tree"
+		"message": "Bookmark"
 	},
 
 
@@ -224,21 +226,24 @@
 		"message": "New group"
 	},
 	"menu_rename_group": {
-		"message": "Rename group"
+		"message": "Rename"
 	},
 	"menu_delete_group": {
-		"message": "Delete group"
+		"message": "Delete"
 	},
 	"menu_delete_group_tabs_close": {
-		"message": "Delete group with tabs"
+		"message": "Delete with tabs"
 	},
 
-	"groups_menu_unload": {
+	"menu_groups_unload": {
-		"message": "Unload group"
+		"message": "Unload"
 	},
 
 	"menu_bookmark_group": {
-		"message": "Bookmark group"
+		"message": "Bookmark"
+	},
+	"menu_groups_hibernate": {
+		"message": "Hibernate"
 	},
 
 
@@ -273,6 +278,37 @@
 		"message": "Switch tabs with mouse wheel"
 	},
 
+	"options_tab_group_regex": {
+		"message": "Tab group assignments (Items matching the given pattern will be moved to the designated group. Pattern accepts regular expressions.)"
+	},
+	"option_tab_match": {
+		"message": "Pattern"
+	},
+	"option_tab_group": {
+		"message": "Group"
+	},
+	"options_orphaned_tabs_to_ungrouped": {
+		"message": "Always place orphan tabs in the 'ungrouped' group"
+	},
+	"options_move_on_url_change": {
+		"message": "Move tabs that match regexes"
+	},
+	"options_move_on_url_change_never": {
+		"message": "never"
+	},
+	"options_move_on_url_change_from_empty": {
+		"message": "when URL changes in Home tab (only Home tab created externally, for example, ctrl+t shortcut)"
+	},
+	"options_move_on_url_change_from_empty_b": {
+		"message": "when URL changes in Home tab"
+	},
+	"options_move_on_url_change_all_new": {
+		"message": "when tab is created with a matching URL"
+	},
+	"options_move_on_url_change_always": {
+		"message": "always when URL changes to a matching pattern"
+	},
+
 	"options_always_show_close": {
 		"message": "Show close button on all tabs and folders"
 	},
@@ -326,6 +362,9 @@
 	"options_action_tab_activate_previous_active": {
 		"message": "go back to previous active tab (works only on unpinned tabs)"
 	},
+	"options_action_tab_undo_close": {
+		"message": "reopen last closed tab"
+	},
 
 
 
@@ -336,15 +375,18 @@
 	"options_dbclick_group": {
 		"message": "Action for double click on empty space on the left side or below the tabs"
 	},
-	"options_action__group_none": {
+	"options_action_group_none": {
 		"message": "nothing"
 	},
-	"options_action__group_new": {
+	"options_action_group_new": {
 		"message": "open new tab"
 	},
-	"options_action__group_activate_previous_active": {
+	"options_action_group_activate_previous_active": {
 		"message": "go back to previous active tab (works only on unpinned tabs)"
 	},
+	"options_action_group_undo_close_tab": {
+		"message": "reopen last closed tab"
+	},
 
 	
 	
@@ -443,6 +485,10 @@
 		"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_hide_other_groups_tabs_firefox": {
+		"message": "Show Firefox tabs from current group only. Requires change in about:config, find 'extensions.webextensions.tabhide.enabled' and set it to true."
+	},
+
 
 
 
@@ -537,16 +583,110 @@
 		"message": "Reset toolbar"
 	},
 
+	"options_export_debug": {
+		"message": "Export log file"
+	},
+	"options_print_debug": {
+		"message": "Load log from file"
+	},
 
 
 
 
 
+
+	"options_toolbar_look": {
+		"message": " Toolbar's look "
+	},
+
+	
+	
+	"button_background": {
+	 "message": "Toolbar buttons background"
+	},
+	"button_hover_background": {
+	 "message": "Toolbar buttons background, on mouse hover"
+	},
+	"button_on_background": {
+	 "message": "Toolbar active buttons background"
+	},
+	
+	
+	"button_icons": {
+	 "message": "Toolbar buttons icon color"
+	},
+	"button_icons_hover": {
+	 "message": "Toolbar buttons icon color, on mouse hover"
+	},
+	"button_on_icons": {
+	 "message": "Toolbar active buttons icon color"
+	},
+	"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_shelf_background": {
+	 "message": "Toolbar's shelf background color"
+	},
+	"toolbar_border_bottom": {
+	 "message": "Toolbar borders color"
+	},
+	
+	
+	
+	"button_shelf_background": {
+	 "message": "Toolbar's shelf buttons background color"
+	},
+	"button_shelf_hover_background": {
+	 "message": "Toolbar's shelf buttons background color, on mouse hover"
+	},
+	"button_shelf_icons": {
+	 "message": "Toolbar's shelf buttons icon color"
+	},
+	"button_shelf_icons_hover": {
+	 "message": "Toolbar's shelf buttons icon color, on mouse hover"
+	},
+	"button_shelf_border": {
+	 "message": "Toolbar's shelf buttons border color"
+	},
+	"button_shelf_hover_border": {
+	 "message": "Toolbar's shelf buttons border color, on mouse hover"
+	},
+	
+	
+	
+	
+	
+	
+	
+	
+	
 	"options_theme_tabs": {
 		"message": " Tabs look "
 	},
 
-
+	
 
 	"options_tabs_margin_overlap": {
 		"message": "Tabs spacing:\nOverlap 1px, best for themes with borders"
@@ -558,8 +698,48 @@
 		"message": "Tabs spacing:\nDefault, 1px between tabs"
 	},
 
+	
+	
 
+	"options_tab_list_scrollbar_width_down": {
+	 "message": "Decrease scrollbars width"
+	},
+	"options_tab_list_scrollbar_width_up": {
+	 "message": "Increase scrollbars width"
+	},
+	"options_tab_list_scrollbar_height_down": {
+	 "message": "Decrease scrollbars height"
+	},
+	"options_tab_list_scrollbar_height_up": {
+	 "message": "Increase scrollbars height"
+	},
 
+	
+	
+	"options_tabs_indentation_down": {
+	 "message": "Decrease tabs indentation"
+	},
+	"options_tabs_indentation_up": {
+	 "message": "Increase tabs indentation"
+	},
+	
+
+	"options_tabs_roundness_down": {
+	 "message": "Make tabs corners more square"
+	},
+	"options_tabs_roundness_up": {
+	 "message": "Make tabs rounder"
+	},
+	
+
+	"options_tabs_size_down": {
+	 "message": "Decrease tabs size"
+	},
+	"options_tabs_size_up": {
+	 "message": "Increase tabs size"
+	},
+
+	
 
 	"options_theme_tabs_sample_text_normal": {
 		"message": "Normal"
@@ -639,11 +819,8 @@
 	"options_theme_tabs_sample_text_search_result_highlighted_active_hover": {
 		"message": "Search result highlighted, active, mouse hover over"
 	},
-
-
-
-
 	
+
 	"options_theme_tabs_sample_text_search_result_highlighted_selected": {
 		"message": "Search result highlighted, selected"
 	},
@@ -660,64 +837,6 @@
 
 
 
-	
-	
-	
-
-
-
-
-	"close_x": {
-	 "message": "x inside the close button"
-	},
-	"close_hover_x": {
-	 "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": {
@@ -726,8 +845,6 @@
 	"attention_border": {
 	 "message": "Tabs blinking for attention, border color"
 	},
-	
-
 	"pin_list_border_bottom": {
 	 "message": "Pinned tabs list, border at the bottom color"
 	},
@@ -735,43 +852,112 @@
 	 "message": "Pinned tabs list, background color"
 	},
 	
-
+	
-	"options_color_pick_hover": {
+	"folder_icon_open": {
-	 "message": "On hover"
+	 "message": "Open folder icon"
+	},
+	"folder_icon_closed": {
+	 "message": "Empty or closed folder icon"
+	},
+	"folder_icon_hover": {
+	 "message": "Folder icon on mouse hover"
+	},
+	
+	
+	"expand_open_background": {
+	 "message": "Open tree indicator"
+	},
+	"expand_closed_background": {
+	 "message": "Closed tree indicator"
+	},
+	"expand_hover_background": {
+	 "message": "Tree indicator on mouse hover"
+	},
+	
+	
+	"group_list_button_hover_background": {
+	 "message": "Group on mouse hover"
+	},
+	"group_list_borders": {
+	 "message": "Group list border"
+	},
+	"group_list_default_font_color": {
+	 "message": "Group list default font color"
+	},
+	
+	"group_list_background": {
+	 "message": "Group list background color"
+	},
+	"tab_list_background": {
+	 "message": "Tabs background color"
+	},
+	
+	
+	"drag_indicator": {
+	 "message": "Drag&Drop indicator"
 	},
 	
 	
 	
-	"options_color_pick_border": {
-	 "message": "Border color"
-	},
-	"options_color_pick_background": {
-	 "message": "Fill color"
-	},
-	"options_color_pick_font": {
-	 "message": "Font color"
-	},
 	
-	"options_tabs_indentation_down": {
-	 "message": "Decrease tabs indentation"
-	},
-	"options_tabs_indentation_up": {
-	 "message": "Increase tabs indentation"
-	},
 	
-	"options_tabs_roundness_down": {
+
-	 "message": "Make tabs corners more square"
+	"close_x": {
+	 "message": "x inside the close button"
 	},
-	"options_tabs_roundness_up": {
+	"close_hover_x": {
-	 "message": "Make tabs rounder"
+	 "message": "x inside the close button, on mouse hover"
 	},
-	
+	"close_hover_border": {
-	"options_tabs_size_down": {
+	 "message": "close button border, on mouse hover"
-	 "message": "Decrease tabs size"
 	},
-	"options_tabs_size_up": {
+	"close_hover_background": {
-	 "message": "Increase tabs size"
+	 "message": "close button box color, on mouse hover"
 	},
+
+
+
+	"scrollbar_thumb": {
+	 "message": "Scrollbar thumb"
+	},
+	"scrollbar_thumb_hover": {
+	 "message": "Scrollbar thumb, on mouse hover"
+	},
+	"scrollbar_track": {
+	 "message": "Scrollbar track"
+	},
+
+
+
+
+
+	"options_example_menu_item": {
+		"message": "menu item"
+	},
+	"options_menu": {
+		"message": " Menu "
+	},
+
+
+	"tabs_menu_hover_border": {
+		"message": "menu item border, on mouse hover"
+	},
+	"tabs_menu_hover_background": {
+		"message": "menu item background, on mouse hover"
+	},
+	"tabs_menu_separator": {
+		"message": "menu separator"
+	},
+	"tabs_menu_font": {
+		"message": "menu text color"
+	},
+	"tabs_menu_border": {
+		"message": "menu border"
+	},
+	"tabs_menu_background": {
+		"message": "menu background"
+	},
+
 	
 
 
@@ -781,26 +967,6 @@
 
 
 
-	"options_tab_list_scrollbar_width_down": {
-	 "message": "Decrease scrollbars width"
-	},
-	"options_tab_list_scrollbar_width_up": {
-	 "message": "Increase scrollbars width"
-	},
-	"options_tab_list_scrollbar_height_down": {
-	 "message": "Decrease scrollbars height"
-	},
-	"options_tab_list_scrollbar_height_up": {
-	 "message": "Increase scrollbars height"
-	},
-
-	
-	
-
-
-
-
-
 
 	"options_there_is_a_theme_with_this_name": {
 		"message": "Theme with this name already exists, try a new name"
@@ -826,14 +992,6 @@
 	
 
 
-	"options_example_menu_item": {
-		"message": "menu item"
-	},
-	"options_menu": {
-		"message": " Menu "
-	},
-
-	
 
 
 	
@@ -887,14 +1045,23 @@
 	},
 	
 
-
+	"manager_window_button_label_import_group": {
-
+		"message": "Import group"
-
-	
-	
-	"warning_exporting_big_amount_of_tabs": {
-		"message": "Importing big amount of tabs can make your browser unresponsive even for hours! Consider dividing your tabs to groups and exporting each group separately."
 	},
+	
+	"manager_window_button_label_import_session": {
+		"message": "Import session"
+	},
+	"manager_window_button_label_save_current_session": {
+		"message": "Save current session"
+	},
+	
+
+
+
+
+	
+	
 	"caption_ungrouped_group": {
 		"message": "Ungrouped"
 	},
@@ -910,6 +1077,54 @@
 	},
 	"caption_searchbox": {
 		"message": " Search tabs..."
+	},
+	
+	"manager_window_header_title": {
+		"message": "Manager"
+	},
+	
+	"menu_manager_window": {
+		"message": "Open manager"
+	},
+	
+	"button_manager_window": {
+		"message": "Open manager window"
+	},
+
+	"manager_window_groups_button": {
+		"message": "Hibernated groups"
+	},
+	"manager_window_sessions_button": {
+		"message": "Saved sessions"
+	},
+	"manager_window_autosave_button": {
+		"message": "Auto saved sessions"
+	},
+	"manager_window_button_label_hibernate_group": {
+		"message": "Hibernate current group"
+	},
+	
+	"manager_window_autosessions_maximum_saves_label": {
+		"message": "Number of autosaves to keep:"
+	},
+	
+	"manager_window_autosessions_save_timer_label": {
+		"message": "Autosave every (minutes):"
+	},
+
+	"manager_window_delete_icon": {
+		"message": "Remove"
+	},
+	
+	"manager_window_savetofile_icon": {
+		"message": "Save to file"
+	},
+	"manager_window_merge_icon": {
+		"message": "Load and merge"
+	},
+	
+	"manager_window_load_icon": {
+		"message": "Load"
 	}
 	
 

background.html

@@ -6,4 +6,5 @@
 	<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>
+	<script type="text/javascript" src="../init.js"></script>
 </html>

bg_ch.js

@@ -2,55 +2,58 @@
 // 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/
 
-if (browserId != "F") {
+
-	// 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);
+			GetCurrentPreferences(storage);
-			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 = {};
+			let refTabs = {};
-			var tabs_matched = 0;
+			let tabs_matched = 0;
-			var w_count = storage.w_count ? storage.w_count : 0;
+			let w_count = storage.w_count ? storage.w_count : 0;
-			var t_count = storage.t_count ? storage.t_count : 0;
+			let t_count = storage.t_count ? storage.t_count : 0;
-			var LoadedWindows = storage.windows ? storage.windows : [];
+			let LoadedWindows = storage.windows ? storage.windows : [];
-			var LoadedTabs = storage.tabs ? storage.tabs : [];
+			let LoadedTabs = storage.tabs ? storage.tabs : [];
+
+			let bak = (1 + retry) <= 3 ? (1 + retry) : 3;
+
 			// if loaded tabs mismatch by 50%, then try to load back
-			if (LoadedTabs.length < t_count*0.5 || retry > 0) {
+			if (LoadedTabs.length < t_count*0.5) {
-				LoadedTabs = storage["tabs_BAK"+retry] ? storage["tabs_BAK"+retry] : [];
+				LoadedTabs = storage["tabs_BAK"+bak] ? storage["tabs_BAK"+bak] : [];
 			}
 			// if loaded windows mismatch, then try to load back
-			if (LoadedWindows.length < w_count || retry > 0) {
+			if (LoadedWindows.length < w_count) {
-				LoadedWindows =  storage["windows_BAK"+retry] ? storage["windows_BAK"+retry] : [];
+				LoadedWindows =  storage["windows_BAK"+bak] ? storage["windows_BAK"+bak] : [];
 			}
+
+			if (opt.debug == true) {
+				if (storage.debug_log != undefined) {
+					debug =  storage.debug_log;
+				}
+				if (retry == 0) {
+					pushlog("TreeTabs background start");
+				}
+			}
+
 			// CACHED COUNTS
-			var WinCount = w.length;
+			let WinCount = w.length;
-			var LoadedWinCount = LoadedWindows.length;
+			let LoadedWinCount = LoadedWindows.length;
-			var LoadedTabsCount = LoadedTabs.length;
+			let LoadedTabsCount = LoadedTabs.length;
-			for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+			
+			let CurrentTabsCount = 0;
+			for (let wIndex = 0; wIndex < w.length; wIndex++) {
+				CurrentTabsCount += w[wIndex].tabs.length;
+			}
+			
+			for (let wIndex = 0; wIndex < WinCount; wIndex++) {
 				if (w[wIndex].tabs[0].url != "chrome://videopopout/") { // this is for opera for their extra video popup, which is weirdly queried as a "normal" window
 					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, prev_active_tab: 0, name: caption_ungrouped_group, font: ""}}, folders: {}};
-					for (var LwIndex = 0; LwIndex < LoadedWinCount; LwIndex++) {
+					for (let 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; }
 							if (LoadedWindows[LwIndex].search_filter) { windows[winId].search_filter = LoadedWindows[LwIndex].search_filter; }
@@ -65,17 +68,18 @@ function ChromeLoadTabs(retry) {
 					}
 				}
 			}
-			for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+			for (let wIndex = 0; wIndex < WinCount; wIndex++) {
-				var TabsCount = w[wIndex].tabs.length;
+				let TabsCount = w[wIndex].tabs.length;
-				for (var tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
+				for (let tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
 					ChromeHashURL(w[wIndex].tabs[tabIndex]);
 				}
 			}
+
 			if (opt.skip_load == false && LoadedTabs.length > 0) { // compare saved tabs from storage to current session tabs, but can be skipped if set in options
-				for (var wIndex = 0; wIndex < WinCount; wIndex++) { // match loaded tabs
+				for (let wIndex = 0; wIndex < WinCount; wIndex++) { // match loaded tabs
-					var TabsCount = w[wIndex].tabs.length;
+					let TabsCount = w[wIndex].tabs.length;
-					for (var tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
+					for (let tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
-						for (var LtabIndex = 0; LtabIndex < LoadedTabsCount; LtabIndex++) {
+						for (let LtabIndex = 0; LtabIndex < LoadedTabsCount; LtabIndex++) {
 							let tabId = w[wIndex].tabs[tabIndex].id;
 							if (LoadedTabs[LtabIndex].hash == tabs[tabId].hash && refTabs[LoadedTabs[LtabIndex].id] == undefined) {
 								refTabs[LoadedTabs[LtabIndex].id] = tabId;
@@ -90,15 +94,15 @@ function ChromeLoadTabs(retry) {
 					}
 				}
 				// replace parents tabIds for new ones, for that purpose refTabs was made before
-				for (var tabId in tabs) {
+				for (let tabId in tabs) {
 					if (refTabs[tabs[tabId].parent] != undefined) {
 						tabs[tabId].parent = refTabs[tabs[tabId].parent];
 					}
 				}
 			}
 			// replace active tab ids for each group using refTabs
-			for (var windowId in windows) {
+			for (let windowId in windows) {
-				for (var group in windows[windowId].groups) {
+				for (let group in windows[windowId].groups) {
 					if (refTabs[windows[windowId].groups[group].active_tab]) {
 						windows[windowId].groups[group].active_tab = refTabs[windows[windowId].groups[group].active_tab];
 					}
@@ -107,19 +111,59 @@ function ChromeLoadTabs(retry) {
 					}
 				}
 			}
-			// will try to find tabs for 3 times
+
-			if (opt.skip_load == true || retry > 2 || (tabs_matched > t_count*0.5)) {
+			if (opt.debug){
-				schedule_save = 1;
+				pushlog("ChromeLoadTabs, retry: "+retry);
+				pushlog("Current windows count is: "+w.length);
+				pushlog("Saved windows count is: "+LoadedWindows.length);
+				pushlog("Current tabs count is: "+CurrentTabsCount);
+				pushlog("Loaded tabs count is: "+LoadedTabsCount);
+				pushlog("Matching tabs: "+tabs_matched);
+				pushlog("Current windows:");
+				pushlog(w);
+			}
+
+			// will loop trying to find tabs
+			if (opt.skip_load == true || retry >= 5 || (tabs_matched > t_count*0.5)) {
 				running = true;
 				ChromeAutoSaveData(0, 1000);
 				ChromeAutoSaveData(1, 300000);
 				ChromeAutoSaveData(2, 600000);
 				ChromeAutoSaveData(3, 1800000);
 				ChromeListeners();
+
+				delete schedule_update_data;
+				delete schedule_rearrange_tabs;
+				delete DragNodeClass;
+				delete DragOverTimer;
+				delete DragTreeDepth;
+				delete menuItemNode;
+				delete CurrentWindowId;
+				delete SearchIndex;
+				delete active_group;
+				delete browserId;
+				delete bggroups;
+				delete bgfolders;
+				delete caption_clear_filter;
+				delete caption_loading;
+				delete caption_searchbox;
+				delete DefaultToolbar;
+				delete DefaultTheme;
+				delete DefaultPreferences;
+
+				delete newTabUrl;
+				delete EmptyTabs;
+
+				delete tt_ids;
+
+				schedule_save = -1; // 2 operations must be made to start saving data
 			} else {
+				if (opt.debug){
+					pushlog("Attempt "+retry+" failed, matched tabs was below 50%");
+				}
 				setTimeout(function() {
 					ChromeLoadTabs(retry+1);
-				}, 2000);
+				}, 5000);
 			}
 		});
 	});
@@ -133,21 +177,21 @@ async function ChromeAutoSaveData(BAK, LoopTimer) {
 		}
 		if (running && schedule_save > 0 && Object.keys(tabs).length > 1) {
 			chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
-				var WinCount = w.length;
+				let WinCount = w.length;
-				var t_count = 0;
+				let t_count = 0;
-				var counter = 0;
+				let counter = 0;
-				var Windows = [];
+				let Windows = [];
-				var Tabs = [];
+				let Tabs = [];
-				for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+				for (let wIndex = 0; wIndex < WinCount; wIndex++) {
 					t_count += w[wIndex].tabs.length;
 				}
-				for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+				for (let wIndex = 0; wIndex < WinCount; wIndex++) {
 					let winId = w[wIndex].id;
 					if (windows[winId] != undefined && windows[winId].group_bar != undefined && windows[winId].search_filter != undefined && windows[winId].active_shelf != undefined && windows[winId].active_group != undefined && windows[winId].groups != undefined && windows[winId].folders != undefined) {
 						Windows.push({url1: w[wIndex].tabs[0].url, url2: w[wIndex].tabs[w[wIndex].tabs.length-1].url, group_bar: windows[winId].group_bar, search_filter: windows[winId].search_filter, active_shelf: windows[winId].active_shelf, active_group: windows[winId].active_group, groups: windows[winId].groups, folders: windows[winId].folders});
 					}
 					let TabsCount = w[wIndex].tabs.length;
-					for (var tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
+					for (let tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
 						let tabId = w[wIndex].tabs[tabIndex].id;
 						if (tabs[tabId] != undefined && tabs[tabId].hash != undefined && tabs[tabId].parent != undefined && tabs[tabId].index != undefined && tabs[tabId].expand != undefined) {
 							Tabs.push({id: tabId, hash: tabs[tabId].hash, parent: tabs[tabId].parent, index: tabs[tabId].index, expand: tabs[tabId].expand});
@@ -182,20 +226,25 @@ async function ChromeAutoSaveData(BAK, LoopTimer) {
 				schedule_save--;
 			});
 		}
+
+		if (opt.debug == true) {
+			chrome.storage.local.set({debug_log: debug});
+		}
+
 	}, LoopTimer);
 }
 function ChromeHashURL(tab) {
 	if (tabs[tab.id] == undefined) {
 		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;
+	let hash = 0;
-	for (var charIndex = 0; charIndex < tab.url.length; charIndex++) {
+	for (let charIndex = 0; charIndex < tab.url.length; charIndex++) {
 		hash += tab.url.charCodeAt(charIndex);
 	}
 	tabs[tab.id].hash = hash;
 }
 function ReplaceParents(oldTabId, newTabId) {
-	for (var tabId in tabs) {
+	for (let tabId in tabs) {
 		if (tabs[tabId].parent == oldTabId) {
 			tabs[tabId].parent = newTabId;
 		}
@@ -204,7 +253,7 @@ function ReplaceParents(oldTabId, newTabId) {
 function ChromeListeners() { // start all listeners
 	chrome.tabs.onCreated.addListener(function(tab) {
 		ChromeHashURL(tab);
-		chrome.runtime.sendMessage({command: "tab_created", windowId: tab.windowId, tab: tab, tabId: tab.id});
+		chrome.runtime.sendMessage({command: "tab_created", windowId: tab.windowId, tabId: tab.id});
 		schedule_save++;
 	});
 	chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
@@ -275,21 +324,11 @@ function ChromeListeners() { // start all listeners
 }	
 function ChromeMessageListeners() {
 	chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
-		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;
@@ -413,12 +452,8 @@ function ChromeMessageListeners() {
 			schedule_save++;
 			return;
 		}
-		if (message.command == "get_theme") {
+		if (message.command == "debug") {
-			sendResponse(theme);
+			pushlog(message.log);
-			return;
-		}
-		if (message.command == "reload_theme") {
-			GetCurrentTheme();
 			return;
 		}
 	});

bg_ff.js

@@ -2,18 +2,14 @@
 // 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/
 
-if (browserId == "F") {
-	FirefoxStart(0);
-	FirefoxMessageListeners();
-}
 function FirefoxStart(retry) {
 	chrome.windows.getAll({windowTypes: ["normal"], populate: true}, function(w) {
-		FirefoxLoadTabs(0);
 		if (w[0].tabs.length == 1 && (w[0].tabs[0].url == "about:blank" || w[0].tabs[0].url == "about:sessionrestore")) {
 			setTimeout(function() {
 				FirefoxStart(retry+1);
 			}, 2000);
 		} else {
+			FirefoxLoadTabs(0);
 			if (retry > 0) {
 				chrome.runtime.sendMessage({command: "reload_sidebar"});
 			}
@@ -27,31 +23,29 @@ function FirefoxLoadTabs(retry) {
 	chrome.windows.getAll({windowTypes: ["normal"], populate: true}, function(w) {
 		chrome.storage.local.get(null, function(storage) {
 			// LOAD PREFERENCES
-			opt = Object.assign({}, DefaultPreferences);
+			GetCurrentPreferences(storage);
-			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);
-			}
 			// CACHED COUNTS AND STUFF
-			// var tt_ids = {};
+			// let tt_ids = {};
-			var tabs_matched = 0;
+			let tabs_matched = 0;
-			var tabs_count = 0;
+			let tabs_count = 0;
-			for (var wIndex = 0; wIndex < w.length; wIndex++) {
+			for (let wIndex = 0; wIndex < w.length; wIndex++) {
 				tabs_count += w[wIndex].tabs.length;
 			}
-			var lastWinId = w[w.length-1].id;
+			let lastWinId = w[w.length-1].id;
-			var lastTabId = w[w.length-1].tabs[w[w.length-1].tabs.length-1].id;
+			let lastTabId = w[w.length-1].tabs[w[w.length-1].tabs.length-1].id;
-			var WinCount = w.length;
+			let WinCount = w.length;
-			for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+
+			if (opt.debug == true) {
+				if (storage.debug_log != undefined) {
+					debug =  storage.debug_log;
+				}
+				if (retry == 0) {
+					pushlog("TreeTabs background start");
+				}
+			}
+
+			for (let wIndex = 0; wIndex < WinCount; wIndex++) {
 				let winIndex = wIndex;
 				let winId = w[winIndex].id;
 				let tabsCount = w[winIndex].tabs.length;
@@ -63,7 +57,7 @@ function FirefoxLoadTabs(retry) {
 					} 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++) {
+					for (let tIndex = 0; tIndex < tabsCount; tIndex++) {
 						let tabIndex = tIndex;
 						let tabId = w[winIndex].tabs[tabIndex].id;
 						let tabPinned = w[winIndex].tabs[tabIndex].pinned;
@@ -78,26 +72,26 @@ function FirefoxLoadTabs(retry) {
 							}
 							// IF ON LAST TAB AND LAST WINDOW, START MATCHING LOADED DATA
 							if (tabId == lastTabId && winId == lastWinId) {
-								for (var ThisSessonWinId in windows) {
+								for (let ThisSessonWinId in windows) {
 									if (windows[ThisSessonWinId].ttid == "") {
 										AppendWinTTId(parseInt(ThisSessonWinId));
 									}
 								}
 								// OK, DONE WITH WINDOWS, START TABS LOOP
-								for (var ThisSessonTabId in tabs) {
+								for (let 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) {
+								for (let 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 (let ThisSessonWinId in windows) {
-									for (var group in windows[ThisSessonWinId].groups) {
+									for (let 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];
 										}
@@ -106,14 +100,48 @@ function FirefoxLoadTabs(retry) {
 										}
 									}
 								}
+
+								if (opt.debug){
+									pushlog("FirefoxLoadTabs, retry: "+retry);
+									pushlog("Current windows count is: "+w.length);
+									pushlog("Current tabs count is: "+tabs_count);
+									pushlog("Matching tabs: "+tabs_matched);
+									pushlog("Current windows:");
+									pushlog(w);
+								}
+
+
 								// 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();
+
+									delete schedule_update_data;
+									delete schedule_rearrange_tabs;
+									delete DragNodeClass;
+									delete DragOverTimer;
+									delete DragTreeDepth;
+									delete menuItemNode;
+									delete CurrentWindowId;
+									delete SearchIndex;
+									delete active_group;
+									delete browserId;
+									delete bggroups;
+									delete bgfolders;
+									delete caption_clear_filter;
+									delete caption_loading;
+									delete caption_searchbox;
+									delete DefaultToolbar;
+									delete DefaultTheme;
+									delete DefaultPreferences;
+									
+									delete newTabUrl;
+									delete EmptyTabs;
 								} else {
+									if (opt.debug){
+										pushlog("Attempt "+retry+" failed, matched tabs was below 50%");
+									}
 									setTimeout(function() {
 										FirefoxLoadTabs(retry+1);
 									}, 2000);
@@ -121,7 +149,7 @@ function FirefoxLoadTabs(retry) {
 							}
 						});
 					}
-				});			
+				});
 			}
 		});
 	});
@@ -134,14 +162,14 @@ async function FirefoxAutoSaveData() {
 		}
 		if (running && schedule_save > 0 && Object.keys(tabs).length > 1) {
 			chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
-				var WinCount = w.length;
+				let WinCount = w.length;
-				for (var wIndex = 0; wIndex < WinCount; wIndex++) {
+				for (let wIndex = 0; wIndex < WinCount; wIndex++) {
 					let winId = w[wIndex].id;
 					if (windows[winId] != undefined && windows[winId].ttid != undefined && windows[winId].group_bar != undefined && windows[winId].search_filter != undefined && windows[winId].active_shelf != undefined && windows[winId].active_group != undefined && windows[winId].groups != undefined && windows[winId].folders != undefined) {
 						browser.sessions.setWindowValue(winId, "TTdata", windows[winId]   );
 					}
 					let TabsCount = w[wIndex].tabs.length;
-					for (var tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
+					for (let tabIndex = 0; tabIndex < TabsCount; tabIndex++) {
 						let tabId = w[wIndex].tabs[tabIndex].id;
 						if (tabs[tabId] != undefined && tabs[tabId].ttid != undefined && tabs[tabId].parent != undefined && tabs[tabId].index != undefined && tabs[tabId].expand != undefined) {
 							browser.sessions.setTabValue( tabId, "TTdata", tabs[tabId] );
@@ -151,12 +179,15 @@ async function FirefoxAutoSaveData() {
 				schedule_save--;
 			});
 		}
+		if (opt.debug == true) {
+			chrome.storage.local.set({debug_log: debug});
+		}
 	}, 1000);
 }
 function GenerateNewWindowID() {
-	var newID = "w_"+GenerateRandomID();
+	let newID = "w_"+GenerateRandomID();
-	var newIdAvailable = true;
+	let newIdAvailable = true;
-	for (var windowId in windows) {
+	for (let windowId in windows) {
 		if (windows[windowId].ttid == newID) {
 			newIdAvailable = false;
 		}
@@ -168,9 +199,9 @@ function GenerateNewWindowID() {
 	}
 }
 function GenerateNewTabID() {
-	var newID = "t_"+GenerateRandomID();
+	let newID = "t_"+GenerateRandomID();
-	var newIdAvailable = true;
+	let newIdAvailable = true;
-	// for (var tabId in tabs) {
+	// for (let tabId in tabs) {
 		// if (tabs[tabId].ttid == newID) {
 			// newIdAvailable = false;
 		// }
@@ -206,13 +237,13 @@ function AppendWinTTId(windowId) {
 	// if (schedule_save > 0) browser.sessions.setWindowValue( windowId, "TTdata", windows[windowId] );
 }
 function ReplaceParents(oldTabId, newTabId) {
-	for (var tabId in tabs) {
+	for (let tabId in tabs) {
 		if (tabs[tabId].parent == oldTabId) {
 			tabs[tabId].parent = newTabId;
 		}
 	}
 }
-var DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA = {};					// MOZILLA BUG 1398272
+let DETACHED_TABS___Bug1398272___WTF_ARE_YOU_DOING_MOZILLA = {};					// MOZILLA BUG 1398272
 // start all listeners
 function FirefoxListeners() {
 	browser.browserAction.onClicked.addListener(function() {
@@ -220,18 +251,16 @@ function FirefoxListeners() {
 		browser.sidebarAction.open();
 	});
 	chrome.tabs.onCreated.addListener(function(tab) {
-		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(tab.id, "TTdata")).then(function(TabData) {
-			let t = Promise.resolve(browser.sessions.getTabValue(NewTab.id, "TTdata")).then(function(TabData) {
+			if (TabData != undefined) {
-				if (TabData != undefined) {
+				tabs[tab.id] = Object.assign({}, TabData);
-					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);
-					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: tab.windowId, tabId: tab.id, parentTabId: originalParent, index: TabData.index});
-					chrome.runtime.sendMessage({command: "tab_created", windowId: NewTab.windowId, tab: NewTab, tabId: NewTab.id, parentTabId: originalParent, index: TabData.index});
+			} else {
-				} else {
+				AppendTabTTId(tab.id);
-					AppendTabTTId(NewTab.id);
+				chrome.runtime.sendMessage({command: "tab_created", windowId: tab.windowId, tabId: tab.id});
-					chrome.runtime.sendMessage({command: "tab_created", windowId: NewTab.windowId, tab: NewTab, tabId: NewTab.id});
+			}
-				}
+			schedule_save++;
-				schedule_save++;
-			});
 		});
 	});
 	chrome.tabs.onAttached.addListener(function(tabId, attachInfo) {
@@ -320,24 +349,32 @@ function FirefoxListeners() {
 		// delete windows[windowId];
 		schedule_save++;
 	});
+	chrome.sessions.onChanged.addListener(function(session) {
+		chrome.windows.getAll({windowTypes: ['normal'], populate: false}, function(w) {
+			chrome.tabs.query({}, function(t) {
+				for (let wiInd = 0; wiInd < w.length; wiInd++) {
+					if (windows[w[wiInd].id] == undefined) {
+						chrome.runtime.sendMessage({command: "reload_sidebar"});
+						window.location.reload();
+					}
+				}
+				for (let tbInd = 0; tbInd < t.length; tbInd++) {
+					if (tabs[t[tbInd].id] == undefined) {
+						chrome.runtime.sendMessage({command: "reload_sidebar"});
+						window.location.reload();
+					}
+				}
+			});
+		});
+	});
 }
 function FirefoxMessageListeners() {
 	chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
-		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;
@@ -364,7 +401,7 @@ function FirefoxMessageListeners() {
 		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) {
+				for (let 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;
 					}
@@ -473,19 +510,15 @@ function FirefoxMessageListeners() {
 					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);
+						tabs[message.tabs[j].id].parent_ttid = "";
 					}
 				}
 			}
 			schedule_save++;
 			return;
 		}
-		if (message.command == "get_theme") {
+		if (message.command == "debug") {
-			sendResponse(theme);
+			pushlog(message.log);
-			return;
-		}
-		if (message.command == "reload_theme") {
-			GetCurrentTheme();
 			return;
 		}
 	});

download.html

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

download.js

@@ -1,18 +0,0 @@
-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);
-	}
-});

init.js

@@ -0,0 +1,16 @@
+// 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/
+
+document.addEventListener("DOMContentLoaded", Init(), false);
+
+function Init() {
+	if (browserId == "F") {
+		FirefoxMessageListeners();
+		FirefoxStart(0);
+	} else {
+		// ConvertLegacyStorage();
+		ChromeMessageListeners();
+		ChromeLoadTabs(0);
+	}
+}

legacy.js

@@ -2,6 +2,13 @@
 // 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/
 
+
+if (localStorage.getItem("t0") != null){
+	LoadV015(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: ""};
@@ -77,23 +84,15 @@ function LoadV015(retry){
 			}
 		}
 
-		if (browserId == "F") {
+
-			// append ids to firefox tabs
+		// create new hashes
-			qtabs.forEach(function(Tab){
+		qtabs.forEach(function(Tab){
-				AppendTabTTId(Tab.id);
+			ChromeHashURL(Tab);
-			});
+		});
-			qtabs.forEach(function(Tab){
+		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});
+			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});
-			});
+		});
-		} 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++){
@@ -101,152 +100,7 @@ function LoadV015(retry){
 				localStorage.removeItem("t"+t);
 			}
 		}
-		window.location.reload();
+		ConvertLegacyStorage();
-	});
-}
-
-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: ""};
-						} else {
-							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) {
-							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);
-							}
-
-						}
-					});
-				}
-			});			
-		}
 	});
 }
 
@@ -272,62 +126,62 @@ function ConvertLegacyStorage() {
 			LSpreferences = LoadData("preferences", {});
 		}
 
-		if (browserId != "F") {
+		let LStabs = {};
-			let LStabs = {};
+		if (localStorage.getItem("tabs") != null) {
-			if (localStorage.getItem("tabs") != null) {
+			LStabs = LoadData("tabs", {});
-				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});
 		}
+		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});

manifest.json

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

options.html

@@ -19,6 +19,10 @@
 		<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>
+
+		<link type="text/css" rel="stylesheet" media="all" href="../options/options overwrite.css" id="overwrite" />
+
+
 	</head>
 	<body id="body">
 	
@@ -76,22 +80,29 @@
 					<td style="position:relative;left:2px;width:3px;">-</td>
 					<td class="label" id="options_syncro_tabbar_groups_tabs_order"></td>
 				</tr>
+				<tr id="firefox_option_hide_other_groups_tabs_firefox">
+					<td><input type="checkbox" class="opt_checkbox bg_opt" id="hide_other_groups_tabs_firefox"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_hide_other_groups_tabs_firefox"></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_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_new" value="new_tab"></option>
-						<option class="bg_opt_drop_down_menu" id="options_action__group_activate_previous_active" value="activate_previous_active"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_group_undo_close_tab" value="undo_close_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_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_new" value="new_tab"></option>
-						<option class="bg_opt_drop_down_menu" id="options_action__group_activate_previous_active" value="activate_previous_active"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_group_undo_close_tab" value="undo_close_tab"></option>
+						<option class="bg_opt_drop_down_menu" id="options_action_group_activate_previous_active" value="activate_previous_active"></option>
 					</select>
 				</li>
 			</ul>
@@ -148,6 +159,7 @@
 						<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_undo_close" value="undo_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>
@@ -160,6 +172,7 @@
 						<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_undo_close" value="undo_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>
@@ -176,6 +189,11 @@
 					<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="orphaned_tabs_to_ungrouped"></input></td>
+					<td style="position:relative;left:2px;width:3px;">-</td>
+					<td class="label" id="options_orphaned_tabs_to_ungrouped"></td>
+				</tr>
 			</table>
 			<ul>
 				<li>
@@ -213,6 +231,27 @@
 						<option class="bg_opt_drop_down_menu" id="options_append_child_tab_after_limit_bottom" value="bottom"></option>
 					</select>
 				</li>
+				<li>
+					<label class="label" id="options_tab_group_regex"></label><br>
+					<br><span class="regexLabel">
+						<label class="label" id="option_tab_match"></label>
+					</span>
+					<span class="regexLabel">
+						<label class="label" id="option_tab_group" style="width:200px"></label>
+					</span>
+					<div id="tab_group_regexes"></div>
+					<input class="set_button theme_buttons" type="button" id="add_tab_group_regex" style="margin:6px;" value="Add">
+				</li>
+				<li>
+					<label class="label" id="options_move_on_url_change"></label>	
+					<select id="move_tabs_on_url_change">
+						<option class="bg_opt_drop_down_menu" id="options_move_on_url_change_never" value="never"></option>
+						<option class="bg_opt_drop_down_menu" id="options_move_on_url_change_from_empty" value="from_empty"></option>
+						<option class="bg_opt_drop_down_menu" id="options_move_on_url_change_from_empty_b" value="from_empty_b"></option>
+						<option class="bg_opt_drop_down_menu" id="options_move_on_url_change_all_new" value="all_new"></option>
+						<option class="bg_opt_drop_down_menu" id="options_move_on_url_change_always" value="always"></option>
+					</select>
+				</li>
 			</ul>
 			<table style="display:vinline-block;">
 				<tr>
@@ -289,6 +328,23 @@
 		</fieldset>		
 
 
+		<fieldset class="field" id="field_show_toolbar" style="position: relative; width:850px;">
+			<legend id="toolbar_legend">
+				<input type="checkbox" class="opt_checkbox bg_opt" style="position:relative; top:-1px;" id="show_toolbar"></input>
+				<label class="label" style="position:relative; top:-3px;" id="options_toolbar"></label>
+			</legend>
+
+			<label class="label" style="margin-top: 4px;" id="options_available_buttons"></label>	
+
+			<div id="sample_toolbar_block" style="position:relative; margin: 10px; width: 355px;">
+				<div id="toolbar_unused_buttons" style="position: relative; background-color: #b8ffbf; height: 30px; width: 788px;"></div>
+
+				<div class="toolbar_edit" id="toolbar" style="position: relative; top: 5px;  height: 26px; width: 788px; overflow:hidden;"></div>	
+			</div>
+
+			<button class="set_button" type="button" id="options_reset_toolbar_button" style="margin:10px; margin-top:20px;">Reset</button>
+
+		</fieldset>
 
 
 
@@ -298,81 +354,346 @@
 			<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 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_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>
+			<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;">
+
+			<fieldset class="field" id="options_toolbar_look" style="position: relative; width:816px;">
 				<legend id="toolbar_legend">
-					<input type="checkbox" style="position:relative; top:-1px;" id="show_toolbar"></input>
+					<label class="label" id="options_toolbar_look"></label>
-					<label class="label" style="position:relative; top:-3px;" id="options_toolbar"></label>
 				</legend>
-
+				<div id="sample_toolbar_block" style="position:relative; width: 788px; margin: 10px;">
-				<label class="label" style="margin-top: 4px;" id="options_available_buttons"></label>	
+					<div id="toolbar_colors_pick_block" style="position: relative; width: 788px; height: 26px;">
-
+					
-				<div id="sample_toolbar_block" style="position:relative; margin-top: 10px; width: 355px;">
+						<div class="pick_col color_bucket"        id="button_background"        ></div>
-					<div id="toolbar_unused_buttons" style="position: relative; background-color: #b8ffbf; height: 30px; width: 350px;"></div>
+						<div class="pick_col color_bucket"        id="button_hover_background"  ></div>
-					<div id="toolbar_colors_pick_block" style="position: relative; top: 5px;  width: 355px; height: 26px;">
+						<div class="pick_col color_bucket"        id="button_on_background"     ></div>
-						<div class="pick_col font_color" id="filter_box_font"></div>
+						<div class="spacer"></div>
-						<div class="pick_col color_x" id="filter_clear_icon"></div>
+						<div class="pick_col color_toolbar_icon"  id="button_icons"             ></div>
-						<div class="pick_col color_bucket" id="filter_box_background"></div>
+						<div class="pick_col color_toolbar_icon"  id="button_icons_hover"       ></div>
-						<div class="pick_col color_border" id="filter_box_border"></div>
+						<div class="pick_col color_toolbar_icon"  id="button_on_icons"          ></div>
-						<div class="pick_col color_bucket" id="button_background"></div>
+						<div class="spacer"></div>
-						<div class="pick_col color_bucket pick_col_hover" id="button_hover_background"></div>
+						<div class="pick_col color_border"        id="button_border"            ></div>
-						<div class="pick_col color_bucket" id="toolbar_background"></div>
+						<div class="pick_col color_border"        id="button_hover_border"      ></div>
-						<div class="pick_col color_border" id="toolbar_border_bottom"></div>
+						<div class="spacer"></div>
-						<div class="pick_col color_toolbar_icon" id="button_icons"></div>
+						<div class="spacer"></div>
-						<div class="pick_col color_toolbar_icon pick_col_hover" id="button_icons_hover"></div>
+						<div class="pick_col font_color"          id="filter_box_font"          ></div>
-						<div class="pick_col color_border" id="button_border"></div>
+						<div class="pick_col color_bucket"        id="filter_box_background"    ></div>
-						<div class="pick_col color_border pick_col_hover" id="button_hover_border"></div>
+						<div class="pick_col color_border"        id="filter_box_border"        ></div>
+						<div class="pick_col color_x"             id="filter_clear_icon"        ></div>
+						<div class="spacer"></div>
+						<div class="spacer"></div>
+						<div class="spacer"></div>
+						<div class="pick_col color_bucket"        id="toolbar_background"       ></div>
+						<div class="pick_col color_bucket"        id="toolbar_shelf_background" ></div>
+						<div class="pick_col color_border"        id="toolbar_border_bottom"    ></div>
+						<div class="spacer"></div>
+						<div class="spacer"></div>
+						<div class="spacer"></div>
+						<div class="pick_col color_bucket"        id="button_shelf_background"  ></div>
+						<div class="pick_col color_bucket"        id="button_shelf_hover_background"  ></div>
+						<div class="spacer"></div>
+						<div class="pick_col color_toolbar_icon"  id="button_shelf_icons"        ></div>
+						<div class="pick_col color_toolbar_icon"  id="button_shelf_icons_hover"  ></div>
+						<div class="spacer"></div>
+						<div class="pick_col color_border"        id="button_shelf_border"       ></div>
+						<div class="pick_col color_border"        id="button_shelf_hover_border" ></div>
 					</div>
-					<div class="toolbar" id="toolbar" style="position: relative; top: 5px;  height: 26px; width: 350px; overflow:hidden;"></div>	
+					<div class="toolbar" id="toolbar_theme" style="position: relative; top: 5px; height: 53px; width: 788px; overflow:hidden;">
+						<div id="toolbar_main_theme">
+							<div class="button_theme" id="button_theme_plus"><div class="button_img_theme" id="button_theme_plus_img"></div></div>
+							<div class="button_theme" id="button_theme_search"><div class="button_img_theme" id="button_theme_search_img"></div></div>
+						</div>
+						<div id="toolbar_search_input_box_theme">
+							<input id="filter_box_theme" type="text" placeholder="Search tabs..."></input>
+							<div id="button_filter_clear_theme" style="position:absolute;" type="reset"></div>
+							<div class="button_shelf_theme" id="button_theme_pen"><div class="button_img_shelf_theme" id="button_theme_pen_img"></div></div>
+						</div>
+					
+					</div>	
 				</div>
-
-				<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;">
+			<fieldset class="field" id="Tabs" style="position: relative; top: 6px; width:816px; height: 950px;">
 				<legend class="label" id="options_theme_tabs"></legend>
 				
-				
-				
 				<div id="tabs_options_block">
-					<!-- normal --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_title_font_color"></div><div class="font_weight_normal" id="tab_title_font_weight"></div><div class="font_weight_bold" id="tab_title_font_weight"></div><div class="font_style_normal" id="tab_title_font_style"></div><div class="font_style_italic" id="tab_title_font_style"></div><div class="pick_col color_bucket" id="tab_background"></div><div class="pick_col color_border" id="tab_border"></div></div>
+					<div id="ff_folder1" class="tab_color_options_row">
-					<!-- normal hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_hover_title_font_color"></div><div class="font_weight_normal" id="tab_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_hover_title_font_weight"></div><div class="font_style_normal" id="tab_hover_title_font_style"></div><div class="font_style_italic" id="tab_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_hover_background"></div><div class="pick_col color_border" id="tab_hover_border"></div><div class="pick_col color_x" id="close_x"></div></div>
+						<div class="pick_col color_bucket" id="folder_icon_open"></div>
-					<!-- normal selected --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_selected_title_font_color"></div><div class="font_weight_normal" id="tab_selected_title_font_weight"></div><div class="font_weight_bold" id="tab_selected_title_font_weight"></div><div class="font_style_normal" id="tab_selected_title_font_style"></div><div class="font_style_italic" id="tab_selected_title_font_style"></div><div class="pick_col color_bucket" id="tab_selected_background"></div><div class="pick_col color_border" id="tab_selected_border"></div></div>
+					</div>
-					<!-- normal selected hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_selected_hover_title_font_color"></div><div class="font_weight_normal" id="tab_selected_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_selected_hover_title_font_weight"></div><div class="font_style_normal" id="tab_selected_hover_title_font_style"></div><div class="font_style_italic" id="tab_selected_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_selected_hover_background"></div><div class="pick_col color_border" id="tab_selected_hover_border"></div><div class="pick_col color_x" id="close_hover_x"></div><div class="pick_col color_border" id="close_hover_border"></div><div class="pick_col color_bucket" id="close_hover_background"></div></div>
+					<div id="ff_folder2" class="tab_color_options_row">
-					<!-- normal active --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_active_title_font_color"></div><div class="font_weight_normal" id="tab_active_title_font_weight"></div><div class="font_weight_bold" id="tab_active_title_font_weight"></div><div class="font_style_normal" id="tab_active_title_font_style"></div><div class="font_style_italic" id="tab_active_title_font_style"></div><div class="pick_col color_bucket" id="tab_active_background"></div><div class="pick_col color_border" id="tab_active_border"></div></div>
+						<div class="pick_col color_bucket" id="folder_icon_closed"></div>
-					<!-- normal active hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_active_hover_title_font_color"></div><div class="font_weight_normal" id="tab_active_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_active_hover_title_font_weight"></div><div class="font_style_normal" id="tab_active_hover_title_font_style"></div><div class="font_style_italic" id="tab_active_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_active_hover_background"></div><div class="pick_col color_border" id="tab_active_hover_border"></div></div>
+					</div>
-					<!-- normal selected active --><div class="tab_color_options_row"><div class="pick_col color_bucket" id="expand_closed_background"></div><div class="pick_col font_color" id="tab_active_selected_title_font_color"></div><div class="font_weight_normal" id="tab_active_selected_title_font_weight"></div><div class="font_weight_bold" id="tab_active_selected_title_font_weight"></div><div class="font_style_normal" id="tab_active_selected_title_font_style"></div><div class="font_style_italic" id="tab_active_selected_title_font_style"></div><div class="pick_col color_bucket" id="tab_active_selected_background"></div><div class="pick_col color_border" id="tab_active_selected_border"></div></div>
+					<div id="ff_folder3" class="tab_color_options_row">
-					<!-- normal selected active hover --><div class="tab_color_options_row"><div class="pick_col color_bucket pick_col_hover" id="expand_hover_background"></div><div class="pick_col font_color" id="tab_selected_active_hover_title_font_color"></div><div class="font_weight_normal" id="tab_selected_active_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_selected_active_hover_title_font_weight"></div><div class="font_style_normal" id="tab_selected_active_hover_title_font_style"></div><div class="font_style_italic" id="tab_selected_active_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_selected_active_hover_background"></div><div class="pick_col color_border" id="tab_selected_active_hover_border"></div></div>
+						<div class="pick_col color_bucket" id="folder_icon_hover"></div>
-					<!-- unloaded --><div class="tab_color_options_row"><div class="pick_col color_bucket" id="expand_open_background"></div><div class="pick_col font_color" id="tab_discarded_title_font_color"></div><div class="font_weight_normal" id="tab_discarded_title_font_weight"></div><div class="font_weight_bold" id="tab_discarded_title_font_weight"></div><div class="font_style_normal" id="tab_discarded_title_font_style"></div><div class="font_style_italic" id="tab_discarded_title_font_style"></div><div class="pick_col color_bucket" id="tab_discarded_background"></div><div class="pick_col color_border" id="tab_discarded_border"></div></div>
+					</div>
-					<!-- unloaded hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_discarded_hover_title_font_color"></div><div class="font_weight_normal" id="tab_discarded_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_discarded_hover_title_font_weight"></div><div class="font_style_normal" id="tab_discarded_hover_title_font_style"></div><div class="font_style_italic" id="tab_discarded_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_discarded_hover_background"></div><div class="pick_col color_border" id="tab_discarded_hover_border"></div></div>
+					<div id="t2" class="tab_color_options_row">
-					<!-- unloaded selected --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_selected_discarded_title_font_color"></div><div class="font_weight_normal" id="tab_selected_discarded_title_font_weight"></div><div class="font_weight_bold" id="tab_selected_discarded_title_font_weight"></div><div class="font_style_normal" id="tab_selected_discarded_title_font_style"></div><div class="font_style_italic" id="tab_selected_discarded_title_font_style"></div><div class="pick_col color_bucket" id="tab_selected_discarded_background"></div><div class="pick_col color_border" id="tab_selected_discarded_border"></div><div class="pick_col color_bucket" id="drag_indicator"></div></div>
+						<div class="tab_col pick_col font_color" id="tab_title_font_color"></div>
-					<!-- unloaded selected hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_selected_discarded_hover_title_font_color"></div><div class="font_weight_normal" id="tab_selected_discarded_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_selected_discarded_hover_title_font_weight"></div><div class="font_style_normal" id="tab_selected_discarded_hover_title_font_style"></div><div class="font_style_italic" id="tab_selected_discarded_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_selected_discarded_hover_background"></div><div class="pick_col color_border" id="tab_selected_discarded_hover_border"></div></div>
+						<div class="tab_col font_weight_normal" id="tab_title_font_weight"></div>
-					<!-- search result --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_title_font_style"></div><div class="font_style_italic" id="tab_filtered_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_background"></div><div class="pick_col color_border" id="tab_filtered_border"></div></div>
+						<div class="tab_col font_weight_bold" id="tab_title_font_weight"></div>
-					<!-- search result hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_hover_background"></div><div class="pick_col color_border" id="tab_filtered_hover_border"></div></div>
+						<div class="tab_col font_style_normal" id="tab_title_font_style"></div>
-					<!-- search result active --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_active_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_active_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_active_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_active_title_font_style"></div><div class="font_style_italic" id="tab_filtered_active_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_active_background"></div><div class="pick_col color_border" id="tab_filtered_active_border"></div></div>
+						<div class="tab_col font_style_italic" id="tab_title_font_style"></div>
-					<!-- search result active hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_active_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_active_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_active_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_active_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_active_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_active_hover_background"></div><div class="pick_col color_border" id="tab_filtered_active_hover_border"></div></div>
+						<div class="tab_col pick_col color_bucket" id="tab_background"></div>
-					<!-- search result selected --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_background"></div><div class="pick_col color_border" id="tab_filtered_selected_border"></div></div>
+						<div class="tab_col pick_col color_border" id="tab_border"></div>
-					<!-- search result selected hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_hover_background"></div><div class="pick_col color_border" id="tab_filtered_selected_hover_border"></div></div>
+					</div>
-					<!-- search result active selected --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_active_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_active_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_active_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_active_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_active_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_active_background"></div><div class="pick_col color_border" id="tab_filtered_selected_active_border"></div></div>
+					<div id="t11" class="tab_color_options_row">
-					<!-- search result active selected hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_active_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_active_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_active_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_active_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_active_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_active_hover_background"></div><div class="pick_col color_border" id="tab_filtered_selected_active_hover_border"></div></div>
+						<div class="tab_col pick_col font_color" id="tab_hover_title_font_color"></div>
-					<!-- search result highlighted --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_highlighted_search_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_highlighted_search_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_highlighted_search_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_highlighted_search_title_font_style"></div><div class="font_style_italic" id="tab_filtered_highlighted_search_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_highlighted_search_background"></div><div class="pick_col color_border" id="tab_filtered_highlighted_search_border"></div></div>
+						<div class="tab_col font_weight_normal" id="tab_hover_title_font_weight"></div>
-					<!-- search result highlighted hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_highlighted_search_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_highlighted_search_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_highlighted_search_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_highlighted_search_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_highlighted_search_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_highlighted_search_hover_background"></div><div class="pick_col color_border" id="tab_filtered_highlighted_search_hover_border"></div></div>
+						<div class="tab_col font_weight_bold" id="tab_hover_title_font_weight"></div>
-					<!-- search result active highlighted --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_active_highlighted_search_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_active_highlighted_search_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_active_highlighted_search_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_active_highlighted_search_title_font_style"></div><div class="font_style_italic" id="tab_filtered_active_highlighted_search_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_active_highlighted_search_background"></div><div class="pick_col color_border" id="tab_filtered_active_highlighted_search_border"></div></div>
+						<div class="tab_col font_style_normal" id="tab_hover_title_font_style"></div>
-					<!-- search result active highlighted hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_active_highlighted_search_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_active_highlighted_search_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_active_highlighted_search_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_active_highlighted_search_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_active_highlighted_search_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_active_highlighted_search_hover_background"></div><div class="pick_col color_border" id="tab_filtered_active_highlighted_search_hover_border"></div></div>
+						<div class="tab_col font_style_italic" id="tab_hover_title_font_style"></div>
-					<!-- search result selected highlighted --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_highlighted_search_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_highlighted_search_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_highlighted_search_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_highlighted_search_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_highlighted_search_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_highlighted_search_background"></div><div class="pick_col color_border" id="tab_filtered_selected_highlighted_search_border"></div></div>
+						<div class="tab_col pick_col color_bucket" id="tab_hover_background"></div>
-					<!-- search result selected highlighted hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_highlighted_search_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_highlighted_search_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_highlighted_search_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_highlighted_search_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_highlighted_search_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_highlighted_search_hover_background"></div><div class="pick_col color_border" id="tab_filtered_selected_highlighted_search_hover_border"></div></div>
+						<div class="tab_col pick_col color_border" id="tab_hover_border"></div>
-					<!-- search result selected active highlighted --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_active_highlighted_search_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_active_highlighted_search_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_active_highlighted_search_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_active_highlighted_search_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_active_highlighted_search_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_active_highlighted_search_background"></div><div class="pick_col color_border" id="tab_filtered_selected_active_highlighted_search_border"></div></div>
+						<div class="pick_col color_x" id="close_x"></div>
-					<!-- search result selected active highlighted hover --><div class="tab_color_options_row"><div class="pick_col font_color" id="tab_filtered_selected_active_highlighted_search_hover_title_font_color"></div><div class="font_weight_normal" id="tab_filtered_selected_active_highlighted_search_hover_title_font_weight"></div><div class="font_weight_bold" id="tab_filtered_selected_active_highlighted_search_hover_title_font_weight"></div><div class="font_style_normal" id="tab_filtered_selected_active_highlighted_search_hover_title_font_style"></div><div class="font_style_italic" id="tab_filtered_selected_active_highlighted_search_hover_title_font_style"></div><div class="pick_col color_bucket" id="tab_filtered_selected_active_highlighted_search_hover_background"></div><div class="pick_col color_border" id="tab_filtered_selected_active_highlighted_search_hover_border"></div></div>
+					</div>
+					<div id="t12" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_selected_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_selected_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_selected_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_selected_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_selected_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_selected_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_selected_border"></div>
+					</div>
+					<div id="t13" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_selected_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_selected_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_selected_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_selected_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_selected_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_selected_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_selected_hover_border"></div>
+						<div class="pick_col color_x" id="close_hover_x"></div>
+						<div class="pick_col color_border" id="close_hover_border"></div>
+						<div class="pick_col color_bucket" id="close_hover_background"></div>
+					</div>
+					<div id="t3" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_active_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_active_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_active_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_active_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_active_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_active_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_active_border"></div>
+					</div>
+					<div id="t15" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_active_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_active_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_active_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_active_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_active_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_active_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_active_hover_border"></div>
+					</div>
+					<div id="t14" class="tab_color_options_row">
+						<div class="pick_col color_bucket" id="expand_closed_background"></div>
+						<div class="tab_col pick_col font_color" id="tab_active_selected_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_active_selected_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_active_selected_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_active_selected_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_active_selected_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_active_selected_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_active_selected_border"></div>
+					</div>
+					<div id="t16" class="tab_color_options_row">
+						<div class="pick_col color_bucket" id="expand_hover_background"></div>
+						<div class="tab_col pick_col font_color" id="tab_selected_active_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_selected_active_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_selected_active_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_selected_active_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_selected_active_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_selected_active_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_selected_active_hover_border"></div>
+					</div>
+					<div id="t5" class="tab_color_options_row">
+						<div class="pick_col color_bucket" id="expand_open_background"></div>
+						<div class="tab_col pick_col font_color" id="tab_discarded_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_discarded_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_discarded_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_discarded_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_discarded_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_discarded_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_discarded_border"></div>
+					</div>
+					<div id="t17" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_discarded_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_discarded_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_discarded_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_discarded_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_discarded_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_discarded_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_discarded_hover_border"></div>
+					</div>
+					<div id="t19" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_selected_discarded_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_selected_discarded_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_selected_discarded_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_selected_discarded_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_selected_discarded_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_selected_discarded_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_selected_discarded_border"></div>
+						<div class="pick_col color_bucket" id="drag_indicator"></div>
+					</div>
+					<div id="t20" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_selected_discarded_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_selected_discarded_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_selected_discarded_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_selected_discarded_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_selected_discarded_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_selected_discarded_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_selected_discarded_hover_border"></div>
+					</div>
+					<div id="t6" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_border"></div>
+					</div>
+					<div id="t21" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_hover_border"></div>
+					</div>
+					<div id="t22" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_active_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_active_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_active_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_active_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_active_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_active_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_active_border"></div>
+					</div>
+					<div id="t23" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_active_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_active_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_active_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_active_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_active_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_active_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_active_hover_border"></div>
+					</div>
+					<div id="t8" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_border"></div>
+					</div>
+					<div id="t18" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_hover_border"></div>
+					</div>
+					<div id="t25" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_active_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_active_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_active_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_active_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_active_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_active_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_active_border"></div>
+					</div>
+					<div id="t26" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_active_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_active_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_active_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_active_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_active_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_active_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_active_hover_border"></div>
+					</div>
+					<div id="t30" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_highlighted_search_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_highlighted_search_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_highlighted_search_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_highlighted_search_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_highlighted_search_border"></div>
+					</div>
+					<div id="t31" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_highlighted_search_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_highlighted_search_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_highlighted_search_hover_border"></div>
+					</div>
+					<div id="t32" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_active_highlighted_search_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_active_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_active_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_active_highlighted_search_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_active_highlighted_search_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_active_highlighted_search_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_active_highlighted_search_border"></div>
+					</div>
+					<div id="t33" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_active_highlighted_search_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_active_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_active_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_active_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_active_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_active_highlighted_search_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_active_highlighted_search_hover_border"></div>
+					</div>
+					<div id="t34" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_highlighted_search_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_highlighted_search_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_highlighted_search_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_highlighted_search_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_highlighted_search_border"></div>
+					</div>
+					<div id="t35" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_highlighted_search_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_highlighted_search_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_highlighted_search_hover_border"></div>
+					</div>
+					<div id="t36" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_active_highlighted_search_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_active_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_active_highlighted_search_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_active_highlighted_search_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_active_highlighted_search_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_active_highlighted_search_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_active_highlighted_search_border"></div>
+					</div>
+					<div id="t37" class="tab_color_options_row">
+						<div class="tab_col pick_col font_color" id="tab_filtered_selected_active_highlighted_search_hover_title_font_color"></div>
+						<div class="tab_col font_weight_normal" id="tab_filtered_selected_active_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_weight_bold" id="tab_filtered_selected_active_highlighted_search_hover_title_font_weight"></div>
+						<div class="tab_col font_style_normal" id="tab_filtered_selected_active_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col font_style_italic" id="tab_filtered_selected_active_highlighted_search_hover_title_font_style"></div>
+						<div class="tab_col pick_col color_bucket" id="tab_filtered_selected_active_highlighted_search_hover_background"></div>
+						<div class="tab_col pick_col color_border" id="tab_filtered_selected_active_highlighted_search_hover_border"></div>
+					</div>
 				</div>
 				
 				
@@ -461,11 +782,11 @@
 				</div>
 
 				<ul class="menu" id="tabs_menu" style="display:inline-block;position:relative;top:0px;left:10px;">
-					<li class="menu_item" id="menu_hover_sample" style="border: 1px solid var(--tabs_menu_hover_border); background-color: var(--tabs_menu_hover_background);"></li>
+					<li class="menu_item" id="menu_hover_sample"></li>
-					<div class="separator"></div>
+					<div class="separator" id="menu_separator1"></div>
-					<li class="menu_item"></li>
+					<li class="menu_item" id="menu_sample1"></li>
-					<div class="separator"></div>
+					<div class="separator" id="menu_separator2"></div>
-					<li class="menu_item"></li>
+					<li class="menu_item" id="menu_sample2"></li>
 				</ul>
 				
 
@@ -482,7 +803,9 @@
 					<td class="label" id="options_debug"></td>
 				</tr>
 			</table>
-
+			<br>
+			<button class="set_button" type="button" id="options_export_debug" style="position: relative; margin:10px;"></button>
+			<button class="set_button" type="button" id="options_print_debug" style="position: relative; margin:10px;"></button>
 		</fieldset>
 		
 		<button class="set_button" type="button" id="options_clear_data" style="margin:10px;"></button>
@@ -491,12 +814,14 @@
 		<div id="DragImage" style="display: none; width:0px; height:0px;"></div>
 
 		<script type="text/javascript" src="../scripts/global.js"></script>
+		<script type="text/javascript" src="../scripts/utils.js"></script>
 		<script type="text/javascript" src="../scripts/toolbar.js"></script>
 		<script type="text/javascript" src="../scripts/tabs.js"></script>
 		<script type="text/javascript" src="../scripts/groups.js"></script>
+		<script type="text/javascript" src="../scripts/folders.js"></script>
+		<script type="text/javascript" src="../scripts/theme.js"></script>
 		<script type="text/javascript" src="../options/refresh.js"></script>
 		<script type="text/javascript" src="../options/sample_tabs.js"></script>
-		<script type="text/javascript" src="../options/theme.js"></script>
 		<script type="text/javascript" src="../options/options.js"></script>
 
 

options/options overwrite.css

@@ -0,0 +1,224 @@
+
+
+/* OVERWRITE TOOLBAR COLORS */
+
+#toolbar {
+	background-color: #f2f2f2;
+	border-bottom: 1px solid #cccccc;
+}
+#toolbar_main {
+	border-bottom: 1px solid #cccccc;
+	background-color: #f2f2f2;
+}
+.toolbar_shelf {
+	border-bottom: 1px solid #cccccc;
+	background-color: #f2f2f2;
+}
+
+.toolbar_shelf .button_img,
+.button.on .button_img,
+.button_img {
+	background-color: #808080;
+}
+
+.toolbar_shelf .button:not(.on),
+.button:not(.on) {
+	background-color: #f2f2f2;
+	border: 1px solid #f2f2f2;
+}
+
+.button:hover:not(.on) {
+	background-color: #dcdcdc;
+	border: 1px solid #dcdcdc;
+}
+
+.toolbar_shelf .button:hover>.button_img,
+.button:hover:not(.on)>.button_img {
+	background-color: #808080;
+}
+
+.button.on {
+	background-color: #f2f2f2;
+	border: 1px solid #cccccc;
+}
+
+/* MAIN TOOLBAR SEARCHBOX */
+#filter_box {
+	background-color: #fafafa;
+	border: solid 1px #cccccc;
+	color: #808080;
+}
+#button_filter_clear {
+	background-color: #808080;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#menu_hover_sample {
+	border: 1px solid var(--tabs_menu_hover_border);
+	background-color: var(--tabs_menu_hover_background);
+}
+
+
+
+
+/* TOOLBAR THEME COLOR EDIT */
+
+/* toolbar main */
+#toolbar_theme {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	background-color: var(--toolbar_background);
+	border-bottom: 1px solid var(--toolbar_border_bottom);
+}
+
+#toolbar_main_theme {
+	position: relative;
+	width: 100%;
+	height: 26px;
+	top: 0px;
+	background-color: var(--toolbar_background);
+	border-bottom: 1px solid var(--toolbar_border_bottom);
+}
+
+/* toolbar shelf */
+#toolbar_search_input_box_theme {
+	position: relative;
+	width: 100%;
+	top: 0px;
+	height: 26px;
+	background-color: var(--toolbar_shelf_background);
+	overflow: hidden;
+}
+
+
+
+/* toolbar buttons */
+
+
+#button_theme_plus {
+	background-color: var(--button_background);
+	border: 1px solid var(--button_border);
+}
+#button_theme_plus_img {
+	background-color: var(--button_icons);
+	-webkit-mask-image: url(../theme/toolbar_plus_big.svg);
+	mask-image: url(../theme/toolbar_plus_big.svg);
+}
+#button_theme_plus:hover {
+	border: 1px solid var(--button_hover_border);
+	background-color: var(--button_hover_background);
+}
+#button_theme_plus:hover>#button_theme_plus_img {
+	background-color: var(--button_icons_hover);
+}
+
+
+#button_theme_search_img {
+	background-color: var(--button_on_icons);
+	-webkit-mask-image: url(../theme/toolbar_search.svg);
+	mask-image: url(../theme/toolbar_search.svg);
+	border: 1px solid var(--button_border);
+}
+
+
+#button_theme_pen {
+	background-color: var(--button_shelf_background);
+	border: 1px solid var(--button_shelf_border);
+}
+#button_theme_pen_img {
+	background-color: var(--button_shelf_icons);
+	-webkit-mask-image: url(../theme/toolbar_edit.svg);
+	mask-image: url(../theme/toolbar_edit.svg);
+}
+
+#button_theme_pen:hover {
+	border: 1px solid var(--button_shelf_hover_border);
+	background-color: var(--button_shelf_hover_background);
+}
+#button_theme_pen:hover>#button_theme_pen_img {
+	border: 1px solid var(--button_shelf_hover_border);
+	background-color: var(--button_shelf_icons_hover);
+}
+
+
+/* searchbox */
+#filter_box_theme {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	left: 2px;
+	top: 2px;
+	padding-left: 6px;
+	width: calc(100% - 42px);
+	height: 18px;
+	background-color: var(--filter_box_background);
+	border: solid 1px var(--filter_box_border);
+	color: var(--filter_box_font);
+}
+
+#filter_box_theme:focus {
+	outline: none;
+}
+
+#button_filter_clear_theme {
+	display: inline-block;
+	vertical-align: top;
+	-webkit-mask-image: url(../theme/toolbar_filter_clear.svg);
+	mask-image: url(../theme/toolbar_filter_clear.svg);
+	top: 5.5px;
+	right: 34px;
+	width: 16px;
+	height: 16px;
+	background-color: var(--filter_clear_icon);
+}
+
+#button_theme_plus,
+#button_theme_search,
+#button_theme_pen {
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+	width: 24px;
+	height: 24px;
+}
+
+
+#button_theme_plus_img,
+#button_theme_search_img,
+#button_theme_pen_img {
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	width: 24px;
+	height: 24px;
+	-webkit-mask-size: 24px 24px;
+	mask-size: 24px 24px;
+}
+
+#button_theme_search {
+	height: 26px;
+	left: -3px;
+	background-color: var(--button_on_background);
+	border: 1px solid var(--toolbar_border_bottom);
+}

options/options.css

@@ -115,6 +115,11 @@ ul:not(.menu) li {
 	padding-right: 6px;
 }
 
+.regexLabel {
+  width:200px;
+  display:inline-block;
+  font-weight:bold
+}
 
 
 
@@ -136,8 +141,6 @@ ul:not(.menu) li {
 
 /*           THEME DEPARTMENT            */
 
-
-
 /* OPTIONS IMAGES */
 .font_color,
 .font_weight_normal,
@@ -157,7 +160,25 @@ ul:not(.menu) li {
 	height: 20px;
 	width: 20px;
 	background-size: 20px 20px;
-}	
+}
+
+
+#toolbar_colors_pick_block .pick_col {
+	display: inline-block;
+	position: relative;
+	top: 0px;
+	left: 0px;
+}
+#toolbar_colors_pick_block .spacer {
+	display: inline-block;
+	position: relative;
+	top: 0px;
+	left: 0px;
+	height: 20px;
+	width: 20px;
+}
+
+
 	
 .font_color {
 	background-image: url(../options/options_font_color.svg);
@@ -236,6 +257,11 @@ ul:not(.menu) li {
 	background-image: url(../options/options_scale_plus_hover.svg);
 }
 
+
+
+
+/* COLOR PREVIEWS */
+
 @keyframes hover_blinking {
 	0%  {background-color: transparent;}
 	100% {background-color: blue;}
@@ -252,58 +278,7 @@ ul:not(.menu) li {
 	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 */
@@ -385,7 +360,7 @@ ul:not(.menu) li {
 #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;
+	width: 790px;
 	top: 30px;
 	left: 20px;
 	padding: none;
@@ -450,7 +425,7 @@ ul:not(.menu) li {
 /* TAB LIST AND SCROLLBAR */
 #groups {
 	position: absolute;
-	height: 800px;
+	height: 850px;
 	width: calc(771px - var(--scrollbar_width));
 	top: calc(var(--scrollbar_height) + var(--pin_height) + 33px);
 	left: 40px;
@@ -459,7 +434,7 @@ ul:not(.menu) li {
 
 #group_scrollbar {
 	position: absolute;
-	height: 800px;
+	height: 850px;
 	width: var(--scrollbar_width);
 	top: calc(var(--scrollbar_height) + var(--pin_height) + 33px);
 	left: calc(810px - var(--scrollbar_width));
@@ -509,9 +484,10 @@ ul:not(.menu) li {
 .tab_color_options_row {
 	z-index: 2000;
 	position:relative;
-	margin-top: var(--margin_top_tab);
+	margin-top: var(--margin_tab_top);
 	width: 740px;
 	height: calc(var(--tab_height) + 2px);
+	pointer-events: none;
 	/* background:rgba(255,0,0,0.1); */ 
 }
 .tab_color_options_row .color_x,
@@ -523,6 +499,7 @@ ul:not(.menu) li {
 .tab_color_options_row .font_weight_bold,
 .tab_color_options_row .font_style_normal,
 .tab_color_options_row .font_style_italic {
+	pointer-events: all;
 	top: 0px;
 	height: var(--tab_height);
 	width: var(--tab_height);
@@ -552,8 +529,24 @@ ul:not(.menu) li {
 }
 
 
+/* FOLDERS ICONS */
+#folder_icon_open {
+	top: 0px;
+	left: -30px;
+}
+#folder_icon_closed {
+	top: 0px;
+	left: -30px;
+}
+#folder_icon_hover {
+	top: 0px;
+	left: -30px;
+}
+
+
 /* DRAG AND DROP INDICATOR */
 #dd19 {
+	z-index: 9999;
 	display: inline-block;
 	border-bottom: 2px solid var(--drag_indicator);
 }
@@ -585,14 +578,15 @@ ul:not(.menu) li {
 /* CLOSE TAB BUTTON OPTIONS */
 #expand_hover_background {
 	top: 0px;
-	left: calc(var(--children_padding_left) - 18px);
+	left: -30px;
 }
 #expand_closed_background {
 	top: 0px;
-	left: calc(var(--children_padding_left) - 18px);
+	left: -30px;
 }
 #expand_open_background {
-	top: 0px; left: -12px;
+	top: 0px;
+	left: -30px;
 }
 
 
@@ -608,7 +602,7 @@ ul:not(.menu) li {
 	left: 20px;
 	top: calc(var(--scrollbar_height) + var(--pin_height) + 33px);
 	width: 19px;
-	height: 800px;
+	height: 850px;
 	background-color: var(--group_list_background);
 	border-right: 1px solid var(--group_list_borders);
 	overflow: visible;
@@ -670,3 +664,6 @@ ul:not(.menu) li {
 }
 
 
+#fopf_folder3 {
+	background-color: var(--folder_icon_hover);
+}

options/options.js

@@ -7,38 +7,102 @@
 var current_theme = "";
 var themes = [];
 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"];
+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", "move_tabs_on_url_change"];
 
 document.addEventListener("DOMContentLoaded", function() {
 	document.title = "Tree Tabs";
-	chrome.runtime.sendMessage({command: "get_preferences"}, function(response) {
+	chrome.storage.local.get(null, function(storage) {
-		opt = Object.assign({}, response);
+		
-		chrome.storage.local.get(null, function(items) {
+		GetCurrentPreferences(storage);
-			if (items["themes"]) {
+
-				for (var themeName in items["themes"]) {
+		if (storage["themes"]) {
-					themes.push(themeName);
+			for (var themeName in storage["themes"]) {
-				}
+				themes.push(themeName);
 			}
-			if (items["current_theme"]) {
+		}
-				current_theme = items["current_theme"];
+		if (storage["current_theme"]) {
-				LoadTheme(items["current_theme"]);
+			current_theme = storage["current_theme"];
-			}
+			LoadTheme(storage["current_theme"]);
-			GetOptions();
+		}
-			RefreshFields();
+		
-			SetEvents();
+
-			AppendGroupToList("tab_list", caption_ungrouped_group, "", false);
+		if (storage["unused_buttons"]) {
-			AppendGroupToList("tab_list2", caption_noname_group, "", false);
+			RecreateToolbarUnusedButtons(storage["unused_buttons"]);
-			AppendSampleTabs();
+		}
-		});
+
+		RecreateToolbar(GetCurrentToolbar(storage));
+		SetToolbarEvents(false, false, true, "click");
+		AddEditToolbarEditEvents();
+
+		
+		GetOptions(storage);
+		RefreshFields();
+		SetEvents();
+
+		AppendGroupToList("tab_list", caption_ungrouped_group, "", false);
+		AppendGroupToList("tab_list2", caption_noname_group, "", false);
+		AppendSampleTabs();
+	
+		setTimeout(function() {
+			document.querySelectorAll(".on").forEach(function(s){
+				s.classList.remove("on");
+			});
+			RefreshGUI();
+		}, 100);
 	});
 });
 
+function SetRegexes() {
+	let regexes = document.getElementById('tab_group_regexes');
+	opt.tab_group_regexes = [];
+	for (let child of regexes.children) {
+		var regex = child.children[0].value.trim();
+		var groupName = child.children[1].value.trim();
+		if (regex !== "" && groupName !== "") {
+			opt.tab_group_regexes.push([regex, groupName]);
+		}
+	}
+	SavePreferences();
+}
+
+function AddRegexPair() {
+	let regexes = document.getElementById('tab_group_regexes');
+	let outer = document.createElement("div");
+
+	let input = document.createElement("input");
+	input.type = "text";
+	input.style.width = '200px';
+	input.onchange = SetRegexes;
+	input.onkeyup = SetRegexes;
+	outer.appendChild(input);
+
+	input = document.createElement("input");
+	input.type = "text";
+	input.style.width = '200px';
+	input.onchange = SetRegexes;
+	input.onkeyup = SetRegexes;
+	outer.appendChild(input);
+	
+	let deleteButton = document.createElement("input");
+	deleteButton.type = "button";
+	deleteButton.style.width = '75px';
+	deleteButton.className = "set_button theme_buttons";
+	deleteButton.value = "Remove";
+	deleteButton.onclick = function() { regexes.removeChild(outer); }
+	outer.appendChild(deleteButton);
+	
+	regexes.appendChild(outer);
+	return outer;
+}
+
 // document events
-function GetOptions() {
+function GetOptions(storage) {
 	// get language labels
 	document.querySelectorAll(".label, .set_button, .bg_opt_drop_down_menu").forEach(function(s){
 		s.textContent = chrome.i18n.getMessage(s.id);
@@ -69,9 +133,6 @@ function GetOptions() {
 	});
 	
 
-
-
-
 	// 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]);
@@ -82,6 +143,13 @@ function GetOptions() {
 			}
 		}
 	}
+	
+	for (let i = 0; i < opt.tab_group_regexes.length; i++) {
+		let regexPair = opt.tab_group_regexes[i];
+		let outer = AddRegexPair();
+		outer.children[0].value = regexPair[0];
+		outer.children[1].value = regexPair[1]
+	}
 
 	// get options for tabs tree depth option
 	document.getElementById("max_tree_depth").value = opt.max_tree_depth;
@@ -92,7 +160,7 @@ function GetOptions() {
 	for (var i = 0; i < themes.length; i++) {
 		let theme_name = document.createElement("option");
 		theme_name.value = themes[i];
-		theme_name.text = themes[i];
+		theme_name.text = storage.themes[themes[i]].theme_name;
 		ThemeList.add(theme_name);
 	}
 	// select current theme in dropdown list
@@ -105,11 +173,38 @@ function GetOptions() {
 }
 
 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.querySelectorAll(".red_preview").forEach(function(s){
+		s.style.backgroundColor = "";
+		s.style.border = "";
+		s.style.borderBottom = "";
+		s.style.borderRight = "";
+		s.style.color = "";
+		s.style.animation = "";
+		s.style.fontWeight = "";
+		s.style.fontStyle = "";
+		// s.style.zIndex = "";
+		s.classList.remove("red_preview");
+	});
+}
+
+
+
+function AddRedStylePreview(Id, style, value, removePreview) {
+	if (removePreview) RemovePreview();
+	let d = document.getElementById(Id);
+	d.classList.add("red_preview");
+	d.style[style] = value;
+}
+
+function AddBlueBackgroundPreview(Id, removePreview) {
+	if (removePreview) RemovePreview();
+	document.getElementById(Id).classList.add("hover_blinking");
+}
+function AddBlueBorderPreview(Id, removePreview) {
+	if (removePreview) RemovePreview();
+	document.getElementById(Id).classList.add("hover_border_blinking");
 }
 
 
@@ -146,118 +241,307 @@ function SetEvents() {
 			// 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.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.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.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.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.getElementById("group_list_default_font_color").onmouseenter = function(event) {
-		document.getElementById("_gtetab_list").style.color = "red";
-		document.getElementById("_gtetab_list2").style.color = "red";
-		
-	}
-	document.getElementById("group_list_default_font_color").onmouseleave = function(event) {
-		document.getElementById("_gtetab_list").style.color = "";
-		document.getElementById("_gtetab_list2").style.color = "";
-	}
-
 	
-	document.getElementById("scrollbar_thumb_hover").onmouseenter = function(event) {
+	document.querySelectorAll("#scrollbar_thumb_hover, #options_tab_list_scrollbar_height_up, #options_tab_list_scrollbar_height_down, #options_tab_list_scrollbar_width_up, #options_tab_list_scrollbar_width_down, .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.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.getElementById("group_list_button_hover_background").onmouseenter = function(event) {
+	// toolbar buttons
-		RemovePreview();
+	document.getElementById("button_background").onmouseenter = function(event) {
-		document.getElementById("_tab_list2").classList.add("hover_blinking");
+		AddRedStylePreview("button_theme_plus", "backgroundColor", "red", true);
 	}
-	document.getElementById("group_list_button_hover_background").onmouseleave = function(event) {
-		RemovePreview();
-	}
-
 	document.getElementById("button_hover_background").onmouseenter = function(event) {
-		RemovePreview();
+		AddBlueBackgroundPreview("button_theme_plus", true);
-		document.querySelectorAll(".button").forEach(function(s){s.classList.add("hover_blinking");});
 	}
-	document.getElementById("button_hover_background").onmouseleave = function(event) {
+
-		RemovePreview();
+	document.getElementById("button_on_background").onmouseenter = function(event) {
+		AddRedStylePreview("button_theme_search", "backgroundColor", "red", true);
 	}
 	
-
+	document.getElementById("button_icons").onmouseenter = function(event) {
-
+		AddRedStylePreview("button_theme_plus_img", "backgroundColor", "red", true);
+	}
 	document.getElementById("button_icons_hover").onmouseenter = function(event) {
-		RemovePreview();
+		AddBlueBackgroundPreview("button_theme_plus_img", true);
-		document.querySelectorAll(".button_img").forEach(function(s){s.classList.remove("hover_blinking");});
 	}
-	document.getElementById("button_icons_hover").onmouseleave = function(event) {
+	document.getElementById("button_on_icons").onmouseenter = function(event) {
-		RemovePreview();
+		AddRedStylePreview("button_theme_search_img", "backgroundColor", "red", true);
 	}
 
+	document.getElementById("button_border").onmouseenter = function(event) {
+		AddRedStylePreview("button_theme_plus", "border", "1px solid red", true);
+	}
 	document.getElementById("button_hover_border").onmouseenter = function(event) {
-		RemovePreview();
+		AddBlueBorderPreview("button_theme_plus", true);
-		document.querySelectorAll(".button").forEach(function(s){s.classList.add("hover_border_blinking");});
 	}
-	document.getElementById("button_hover_border").onmouseleave = function(event) {
+
-		RemovePreview();
+
+	// search box
+	document.getElementById("filter_box_font").onmouseenter = function(event) {
+		AddRedStylePreview("filter_box_theme", "color", "red", true);
+	}
+	document.getElementById("filter_box_background").onmouseenter = function(event) {
+		AddRedStylePreview("filter_box_theme", "backgroundColor", "red", true);
+	}
+	document.getElementById("filter_box_border").onmouseenter = function(event) {
+		AddRedStylePreview("filter_box_theme", "border", "1px solid red", true);
+	}
+	document.getElementById("filter_clear_icon").onmouseenter = function(event) {
+		AddRedStylePreview("button_filter_clear_theme", "backgroundColor", "red", true);
 	}
 	
-	document.getElementById("options_tab_list_scrollbar_width_up").onmouseenter = function(event) {
+	// toolbar background
-		document.getElementById("group_scrollbar").style.backgroundColor = "red";
+	document.getElementById("toolbar_background").onmouseenter = function(event) {
-		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "red";
+		AddRedStylePreview("toolbar_main_theme", "backgroundColor", "red", true);
 	}
-	document.getElementById("options_tab_list_scrollbar_width_down").onmouseenter = function(event) {
+
-		document.getElementById("group_scrollbar").style.backgroundColor = "red";
+	// shelf toolbar background
-		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "red";
+	document.getElementById("toolbar_shelf_background").onmouseenter = function(event) {
+		AddRedStylePreview("toolbar_search_input_box_theme", "backgroundColor", "red", true);
+	}
+
+	// toolbar's border
+	document.getElementById("toolbar_border_bottom").onmouseenter = function(event) {
+		AddRedStylePreview("button_theme_search", "border", "1px solid red", true);
+		AddRedStylePreview("toolbar_main_theme", "borderBottom", "1px solid red");
+		AddRedStylePreview("toolbar_theme", "borderBottom", "1px solid red");
 	}
 	
-	document.getElementById("options_tab_list_scrollbar_width_up").onmouseleave = function(event) {
+	// shelf toolbar buttons
-		document.getElementById("group_scrollbar").style.backgroundColor = "";
+	document.getElementById("button_shelf_background").onmouseenter = function(event) {
-		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "";
+		AddRedStylePreview("button_theme_pen", "backgroundColor", "red", true);
 	}
-	document.getElementById("options_tab_list_scrollbar_width_down").onmouseleave = function(event) {
+	document.getElementById("button_shelf_hover_background").onmouseenter = function(event) {
-		document.getElementById("group_scrollbar").style.backgroundColor = "";
+		AddBlueBackgroundPreview("button_theme_pen", true);
-		document.getElementById("group_scrollbar_thumb").style.backgroundColor = "";
+	}
+	document.getElementById("button_shelf_icons").onmouseenter = function(event) {
+		AddRedStylePreview("button_theme_pen_img", "backgroundColor", "red", true);
+	}
+	document.getElementById("button_shelf_icons_hover").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("button_theme_pen_img", true);
+	}
+	document.getElementById("button_shelf_border").onmouseenter = function(event) {
+		AddRedStylePreview("button_theme_pen", "border", "1px solid red", true);
+	}
+	document.getElementById("button_shelf_hover_border").onmouseenter = function(event) {
+		AddBlueBorderPreview("button_theme_pen", true);
+	}
+
+	// pinned tab attention_background
+	document.getElementById("attention_background").onmouseenter = function(event) {
+		AddRedStylePreview("tab_header10", "backgroundColor", "red", true);
+		document.getElementById("tab_header10").style.animation = "none";
+	}
+
+	// pinned tab attention_border
+	document.getElementById("attention_border").onmouseenter = function(event) {
+		AddRedStylePreview("tab_header10", "border", "1px solid red", true);
+		document.getElementById("tab_header10").style.animation = "none";
+	}
+
+	// pin_list border bottom
+	document.getElementById("pin_list_border_bottom").onmouseenter = function(event) {
+		AddRedStylePreview("pin_list", "borderBottom", "1px solid red", true);
+	}
+
+	// pin_list background
+	document.getElementById("pin_list_background").onmouseenter = function(event) {
+		AddRedStylePreview("pin_list", "backgroundColor", "red", true);
+	}
+	
+	
+	// tab row font_color
+	document.querySelectorAll(".tab_col.font_color").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "color", "red", true);
+	}});
+
+	// tab row font not bold
+	document.querySelectorAll(".tab_col.font_weight_normal").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "color", "red", true);
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "fontWeight", "normal", false);
+	}});
+
+	// tab row font bold
+	document.querySelectorAll(".tab_col.font_weight_bold").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "color", "red", true);
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "fontWeight", "bold", false);
+	}});
+
+	// tab row font style normal
+	document.querySelectorAll(".tab_col.font_style_normal").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "color", "red", true);
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "fontStyle", "normal", false);
+	}});
+	// tab row font style italic
+	document.querySelectorAll(".tab_col.font_style_italic").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "color", "red", true);
+		AddRedStylePreview("tab_title" + this.parentNode.id.substr(1), "fontStyle", "italic", false);
+	}});
+	
+	
+	// tab border
+	document.querySelectorAll(".tab_col.color_border").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_header" + this.parentNode.id.substr(1), "border", "1px solid red", true);
+	}});
+	
+	// tab background
+	document.querySelectorAll(".tab_col.color_bucket").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("tab_header" + this.parentNode.id.substr(1), "backgroundColor", "red", true);
+	}});
+	
+	// scrollbars hover
+	document.getElementById("scrollbar_thumb_hover").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("group_scrollbar_thumb", true);
+		AddBlueBackgroundPreview("pin_list_scrollbar_thumb");
+	}
+	
+	// scrollbars thumb
+	document.getElementById("scrollbar_thumb").onmouseenter = function(event) {
+		AddRedStylePreview("group_scrollbar_thumb", "backgroundColor", "red", true);
+		AddRedStylePreview("pin_list_scrollbar_thumb", "backgroundColor", "red");
+	}
+	
+	
+	// scrollbars track
+	document.getElementById("scrollbar_track").onmouseenter = function(event) {
+		AddRedStylePreview("group_scrollbar", "backgroundColor", "red", true);
+		AddRedStylePreview("pin_list_scrollbar", "backgroundColor", "red");
 	}
 	
 
+	// tab_list scrollbars
+	document.querySelectorAll("#options_tab_list_scrollbar_width_up, #options_tab_list_scrollbar_width_down").forEach(function(s){s.onmouseenter = function(event) {
+		AddRedStylePreview("group_scrollbar", "backgroundColor", "red", true);
+		AddRedStylePreview("group_scrollbar_thumb", "backgroundColor", "red");
+	}});
 	
-	document.getElementById("options_tab_list_scrollbar_height_up").onmouseenter = function(event) {
+	// pin_list scrollbars
-		document.getElementById("pin_list_scrollbar").style.backgroundColor = "red";
+	document.querySelectorAll("#options_tab_list_scrollbar_height_up, #options_tab_list_scrollbar_height_down").forEach(function(s){s.onmouseenter = function(event) {
-		document.getElementById("pin_list_scrollbar_thumb").style.backgroundColor = "red";
+		AddRedStylePreview("pin_list_scrollbar", "backgroundColor", "red", true);
+		AddRedStylePreview("pin_list_scrollbar_thumb", "backgroundColor", "red");
+	}});
+
+
+
+	// folder icon open
+	document.getElementById("folder_icon_open").onmouseenter = function(event) {
+		AddRedStylePreview("fopf_folder1", "backgroundColor", "red", true);
 	}
-	document.getElementById("options_tab_list_scrollbar_height_down").onmouseenter = function(event) {
+	// folder icon closed
-		document.getElementById("pin_list_scrollbar").style.backgroundColor = "red";
+	document.getElementById("folder_icon_closed").onmouseenter = function(event) {
-		document.getElementById("pin_list_scrollbar_thumb").style.backgroundColor = "red";
+		AddRedStylePreview("fopf_folder2", "backgroundColor", "red", true);
 	}
+	// folder icon hover
+	document.getElementById("folder_icon_hover").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("fopf_folder3", true);
+	}
+
+
+	// tab expand closed
+	document.getElementById("expand_closed_background").onmouseenter = function(event) {
+		AddRedStylePreview("exp14", "backgroundColor", "red", true);
+	}
+	// tab expand hover
+	document.getElementById("expand_hover_background").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("exp16", true);
+	}
+	// tab expand open
+	document.getElementById("expand_open_background").onmouseenter = function(event) {
+		AddRedStylePreview("exp5", "backgroundColor", "red", true);
+	}
+
+
 	
-	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 = "";
+	// drag indicator
+	document.getElementById("drag_indicator").onmouseenter = function(event) {
+		AddRedStylePreview("di19", "borderBottom", "1px solid red", true);
 	}
-	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 = "";
+	// close x
+	document.getElementById("close_x").onmouseenter = function(event) {
+		AddRedStylePreview("close_img11", "backgroundColor", "red", true);
 	}
+	// close x hover
+	document.getElementById("close_hover_x").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("close_img13", true);
+	}
+	// close border hover
+	document.getElementById("close_hover_border").onmouseenter = function(event) {
+		AddBlueBorderPreview("close13", true);
+	}
+	// close border hover
+	document.getElementById("close_hover_background").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("close13", true);
+	}
+
+
+	
+	
+	// group button hover
+	document.getElementById("group_list_button_hover_background").onmouseenter = function(event) {
+		AddBlueBackgroundPreview("_tab_list2", true);
+	}
+	// group buttons borders
+	document.getElementById("group_list_borders").onmouseenter = function(event) {
+		AddRedStylePreview("toolbar_groups_block", "borderRight", "1px solid red", true);
+		AddRedStylePreview("_tab_list", "border", "1px solid red");
+	}
+	// group buttons font
+	document.getElementById("group_list_default_font_color").onmouseenter = function(event) {
+		AddRedStylePreview("_gtetab_list", "color", "red", true);
+		AddRedStylePreview("_gtetab_list2", "color", "red");
+	}
+	// group list background
+	document.getElementById("group_list_background").onmouseenter = function(event) {
+		AddRedStylePreview("toolbar_groups_block", "backgroundColor", "red", true);
+	}
+	// tab_list background
+	document.getElementById("tab_list_background").onmouseenter = function(event) {
+		AddRedStylePreview("tab_list", "backgroundColor", "red", true);
+		AddRedStylePreview("_tab_list", "backgroundColor", "red");
+	}
+
+	
+	
+	
+	
+	// menu hover border
+	document.getElementById("tabs_menu_hover_border").onmouseenter = function(event) {
+		AddRedStylePreview("menu_hover_sample", "border", "1px solid red", true);
+	}
+	// menu hover background
+	document.getElementById("tabs_menu_hover_background").onmouseenter = function(event) {
+		AddRedStylePreview("menu_hover_sample", "backgroundColor", "red", true);
+	}
+
+	// menu separator
+	document.getElementById("tabs_menu_separator").onmouseenter = function(event) {
+		AddRedStylePreview("menu_separator1", "backgroundColor", "red", true);
+		AddRedStylePreview("menu_separator2", "backgroundColor", "red");
+	}
+
+	// menu font
+	document.getElementById("tabs_menu_font").onmouseenter = function(event) {
+		AddRedStylePreview("menu_hover_sample", "color", "red", true);
+		AddRedStylePreview("menu_sample1", "color", "red");
+		AddRedStylePreview("menu_sample2", "color", "red");
+	}
+
+
+	// menu border
+	document.getElementById("tabs_menu_border").onmouseenter = function(event) {
+		AddRedStylePreview("tabs_menu", "border", "1px solid red", true);
+	}
+
+	// menu background
+	document.getElementById("tabs_menu_background").onmouseenter = function(event) {
+		AddRedStylePreview("tabs_menu", "backgroundColor", "red", true);
+	}
+
 
 
 // --------------------------------------COLOR PICKER---------------------------------------------------------------------	
@@ -322,14 +606,25 @@ function SetEvents() {
 			}
 		}
 		SavePreferences();
+		if (this.id == "show_toolbar") {
+			SaveToolbar();
+			RefreshFields();
+
+			
+			// setTimeout(function() {
+				// chrome.runtime.sendMessage({command: "reload_toolbar", toolbar: toolbar, opt: opt});
+			// }, 300);
+		}
 	}}});
 
 
 	// options that need 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" || 
+		if (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 == "hide_other_groups_tabs_firefox" || 
 			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"});
+			setTimeout(function() {
+				chrome.runtime.sendMessage({command: "reload_sidebar"});
+			}, 50);
 		}
 		if (event.target.id == "groups_toolbar_default") {
 			chrome.runtime.sendMessage({command: "reload"});
@@ -342,11 +637,11 @@ function SetEvents() {
 	// set dropdown menu options
 	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"});
+			setTimeout(function() {
+				chrome.runtime.sendMessage({command: "reload_sidebar"});
+			}, 50);
 		}
 	}
 
@@ -354,18 +649,20 @@ console.log(this.value);
 	document.getElementById("max_tree_depth").oninput = function(event) {
 		opt.max_tree_depth = parseInt(this.value);
 		SavePreferences();
-		chrome.runtime.sendMessage({command: "reload_sidebar"});
+		setTimeout(function() {
+			chrome.runtime.sendMessage({command: "reload_sidebar"});
+		}, 50);
 	}
 	
 	// set toolbar on/off and show/hide all toolbar options
-	document.getElementById("show_toolbar").onclick = function(event) {if (event.which == 1) {
+	// document.getElementById("show_toolbar").onclick = function(event) {if (event.which == 1) {
-		SelectedTheme.ToolbarShow = this.checked ? true : false;
+		// SelectedTheme.ToolbarShow = this.checked ? true : false;
-		RefreshFields();
+		// RefreshFields();
-		SaveTheme(document.getElementById("theme_list").value);
+		// SaveTheme(document.getElementById("theme_list").value);
-	}}
+	// }}
 
 	
-// ------------------------------OTHER------------------------------------------------------------------------------------	
+// ------------------------------OTHER-----------------------------------------------------------------------------------	
 
 	// block system dragging
 	document.ondrop = function(event) {
@@ -374,21 +671,32 @@ console.log(this.value);
 	document.ondragover = function(event) {
 		event.preventDefault();
 	}
+	
+// ------------------------------ADD REGEX FILTER-------------------------------------------------------------------------	
 
+	document.getElementById("add_tab_group_regex").onclick = AddRegexPair;
+	
 // ----------------------------RESET TOOLBAR BUTTON-----------------------------------------------------------------------	
 	
 	document.getElementById("options_reset_toolbar_button").onclick = function(event) {if (event.which == 1) {
+
 		SetToolbarEvents(true, false, false, "");
 		RemoveToolbarEditEvents();
-		SelectedTheme["toolbar"] = DefaultToolbar;
+		
-		SelectedTheme["unused_buttons"] = "";
+
-		document.getElementById("toolbar").innerHTML = DefaultToolbar;
+		let unused_buttons = document.getElementById("toolbar_unused_buttons");
-		document.getElementById("toolbar_unused_buttons").innerHTML = "";
+		while(unused_buttons.hasChildNodes()) {
-		SaveTheme(document.getElementById("theme_list").value);
+			unused_buttons.removeChild(unused_buttons.firstChild);
-		document.querySelectorAll(".on").forEach(function(s){s.classList.remove("on");});
+		}
-		RefreshGUI();
+		
+		RemoveToolbar();
+		RecreateToolbar(DefaultToolbar);
 		SetToolbarEvents(false, false, true, "click");
 		AddEditToolbarEditEvents();
+		
+		SaveToolbar();
+		
+		
 	}}
 
 
@@ -413,7 +721,7 @@ console.log(this.value);
 
 	// import theme preset button
 	document.getElementById("options_import_theme_button").onclick = function(event) {if (event.which == 1) {
-		let inputFile = ShowOpenFileDialog("import_theme", ".tt_theme");
+		let inputFile = ShowOpenFileDialog(".tt_theme");
 		inputFile.onchange = function(event) {
 			ImportTheme();
 		}						
@@ -421,10 +729,11 @@ console.log(this.value);
 
 	// export theme preset button
 	document.getElementById("options_export_theme_button").onclick = function(event) {if (event.which == 1) {
-		if (document.getElementById("theme_list").options.length == 0) {
+		let ThemeList = document.getElementById("theme_list");
+		if (ThemeList.options.length == 0) {
 			alert(chrome.i18n.getMessage("options_no_theme_to_export"));
 		} else {
-			SaveFile(document.getElementById("theme_list").value + ".tt_theme", SelectedTheme);
+			SaveFile(ThemeList.options[ThemeList.selectedIndex].text, "tt_theme", SelectedTheme);
 		}
 	}}
 
@@ -580,16 +889,46 @@ console.log(this.value);
 
 
 
+// ----------------------EXPORT DEBUG LOG---------------------------------------------------------------------------------	
+	document.getElementById("options_export_debug").onclick = function(event) {if (event.which == 1) {
+		chrome.storage.local.get(null, function(storage) {
+			SaveFile("TreeTabs", "log", storage);
+		});
+	}}
+
+// ----------------------IMPORT DEBUG LOG----------------------------------------------------------------------------	
+	document.getElementById("options_print_debug").onclick = function(event) {if (event.which == 1) {
+		let inputFile = ShowOpenFileDialog(".log");
+		inputFile.onchange = function(event) {
+			let file = document.getElementById("file_import");
+			let fr = new FileReader();
+			if (file.files[0] == undefined) return;
+			fr.readAsText(file.files[file.files.length - 1]);
+			fr.onload = function() {
+				let data = fr.result;
+				file.parentNode.removeChild(file);
+				let LoadedData = JSON.parse(data);
+				// LoadedData.forEach(function(d){
+					// console.log(d);
+				// });
+				// LoadedData.forEach(function(d){
+					console.log(LoadedData);
+				// });
+			}
+		}						
+
+	}}
+
 // ----------------------CLEAR DATA BUTTON--------------------------------------------------------------------------------	
 
 	// clear data
 	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"});
 		setTimeout(function() {
+			chrome.runtime.sendMessage({command: "reload"});
+			chrome.runtime.sendMessage({command: "reload_sidebar"});
 			location.reload();
-		}, 300);
+		}, 100);
 	}}
 }
 
@@ -602,51 +941,43 @@ function RemoveToolbarEditEvents() {
 	});
 }
 
+// ----------------------EDIT TOOLBAR-------------------------------------------------------------------------------------	
 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;
+	document.querySelectorAll("#toolbar_main .button_img, #toolbar_shelf_tools .button_img, #toolbar_shelf_groups .button_img, #toolbar_shelf_backup .button_img, #toolbar_shelf_folders .button_img").forEach(function(s){
-				SelectedTheme.unused_buttons = document.getElementById("toolbar_unused_buttons").innerHTML;
+		s.setAttribute("draggable", true);
-				SaveTheme(document.getElementById("theme_list").value);
+		s.onmousedown = function(event) {
-				
+			if (event.which == 1) {
-				AddEditToolbarEditEvents();
+				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) {
+				InsterBeforeNode(dragged_button, this.parentNode);
+			} else {
+				InsterAfterNode(dragged_button, this.parentNode);
+			}
+		}
+		// save toolbar
+		s.ondragend = function(event) {
+			RemoveToolbarEditEvents();
+			SaveToolbar();
+			AddEditToolbarEditEvents();
+		}
 	});
 	
 	
@@ -675,4 +1006,8 @@ function copyStringToClipboard(string) {
 // dummy functions
 function BindTabsSwitchingToMouseWheel() {}
 function GetFaviconAndTitle() {}
-function RefreshMediaIcon() {}
+function RefreshMediaIcon() {}
+function SetActiveTab() {}
+function RefreshCounters() {}
+function RefreshExpandStates() {}
+function Loadi18n() {}

options/refresh.js

@@ -13,6 +13,8 @@ function RefreshFields() {
 		document.querySelectorAll("#scrollbar_size_indicator, #scrollbar_thumb, #scrollbar_thumb_hover, #scrollbar_track").forEach(function(s){
 			s.style.display = "none";
 		});
+	} else {
+		document.getElementById("firefox_option_hide_other_groups_tabs_firefox").style.display = "none";
 	}
 	if (browserId == "V") {
 		let WebPanelUrlBox = document.getElementById("url_for_web_panel");
@@ -25,11 +27,13 @@ function RefreshFields() {
 		document.querySelectorAll("#options_available_buttons, #sample_toolbar_block, #options_reset_toolbar_button").forEach(function(s){
 			s.style.display = "";
 		});
+		document.getElementById("options_toolbar_look").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("options_toolbar_look").style.display = "none";
 		document.getElementById("field_show_toolbar").style.height = "6";
 	}
 }

options/sample_tabs.js

@@ -52,7 +52,7 @@ function AppendSampleTabs() {
 	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({id: 19, pinned: false, discarded: true}, "5", false, false, true, false, false, "selected_tab", false, false, false);
+	AppendTab({id: 19, pinned: false, discarded: true}, "5", false, false, true, false, false, "selected_tab highlighted_drop_target after", false, false, false);
 	document.getElementById("tab_title19").textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected");
 	
 	AppendTab({id: 20, pinned: false, discarded: true}, "5", false, false, true, false, false, "selected_tab", false, false, false);
@@ -121,6 +121,11 @@ function AppendSampleTabs() {
 	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");
 
+	AddNewFolder("f_folder1", "cftab_list", caption_noname_group, 0, "o", "o", false);
+	AddNewFolder("f_folder2", "f_folder1", caption_noname_group, 0, "c", "c", false);
+	AddNewFolder("f_folder3", "f_folder1", caption_noname_group, 0, "c", "c", false);
+	
+	
 	document.getElementById("_tab_list").classList.add("active_group");
 	
 }

options/theme.js

@@ -1,251 +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/
-
-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]);
-			current_theme = themeName;
-		} else {
-			SelectedTheme = Object.assign({}, DefaultTheme);
-			current_theme = "";
-		}
-		setTimeout(function() {
-			document.getElementById("new_theme_name").value = themeName;
-			setTimeout(function() {
-
-				SetToolbarEvents(true, false, false, "");
-				RemoveToolbarEditEvents();
-				
-				ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
-				ApplyColorsSet(SelectedTheme["ColorsSet"]);
-
-				document.getElementById("_gtetab_list").style.color = "";
-				document.getElementById("_gtetab_list2").style.color = "";
-				
-				document.getElementById("toolbar").innerHTML = SelectedTheme.toolbar;
-				document.getElementById("toolbar_unused_buttons").innerHTML = SelectedTheme.unused_buttons;
-
-				if (browserId == "F") {
-					document.querySelectorAll("#button_load_bak1, #button_load_bak2, #button_load_bak3").forEach(function(s){
-						s.parentNode.removeChild(s);
-					});
-				}
-
-				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();
-				if (reloadSidebar) {
-					chrome.runtime.sendMessage({command: "reload_theme", themeName: "theme"+themeName});
-				}
-				
-				document.querySelectorAll(".theme_buttons").forEach(function(s){
-					s.disabled = false;
-				});
-
-			}, 200);
-		}, 200);
-	});
-}
-function SaveTheme(themeName) {
-	chrome.storage.local.get(null, function(items) {
-		let LSthemes = items.themes ? Object.assign({}, items.themes) : {};
-		LSthemes[themeName] = Object.assign({}, SelectedTheme);
-		chrome.storage.local.set({themes: LSthemes});
-		chrome.runtime.sendMessage({command: "reload_theme", themeName: "theme"+themeName});
-		return SelectedTheme;
-	});
-}
-function AddNewTheme() {
-	
-	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;
-	}
-	
-	document.getElementById("toolbar").innerHTML = DefaultToolbar;
-
-	SelectedTheme = Object.assign({}, DefaultTheme);
-	SelectedTheme["ColorsSet"] = {};
-	DefaultTheme["ColorsSet"] = {};
-	
-	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(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) : {};
-		
-		let ThemeList = document.getElementById("theme_list");
-		
-		themes.splice(ThemeList.selectedIndex, 1);
-		if (LSthemes[current_theme]) {
-			delete LSthemes[current_theme];
-		}
-		chrome.storage.local.set({themes: LSthemes});
-		
-		ThemeList.remove(ThemeList.selectedIndex);
-	
-		current_theme = (ThemeList.options.length > 0) ? ThemeList.value : "Default";
-		chrome.storage.local.set({current_theme: current_theme});
-		if (ThemeList.options.length == 0) {
-			SelectedTheme = Object.assign({}, DefaultTheme);
-			SelectedTheme["ColorsSet"] = {};
-			chrome.storage.local.set({themes: {}});
-			setTimeout(function() {
-				chrome.runtime.sendMessage({command: "reload_theme", themeName: ""});
-			}, 500);
-		}
-		LoadTheme(current_theme, true);
-		RefreshFields();
-	});
-}
-function RenameSelectedTheme() {
-
-	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 (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"] = 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 = ThemeNameBox.value;
-		themes[ThemeList.selectedIndex] = ThemeNameBox.value;
-		chrome.storage.local.set({themes: LSthemes});
-		chrome.storage.local.set({current_theme: current_theme});
-	});
-}
-function ImportTheme() {
-	var file = document.getElementById("import_theme");
-	var fr = new FileReader();
-	if (file.files[0] == undefined) return;
-	fr.readAsText(file.files[0]);
-	fr.onload = function() {
-		var data = fr.result;
-		file.parentNode.removeChild(file);
-		var themeObj = JSON.parse(data);
-		if (themeObj.theme_version > DefaultTheme["theme_version"]) {
-			alert(chrome.i18n.getMessage("options_loaded_theme_newer_version"));
-		}
-		if (themeObj.theme_version < DefaultTheme["theme_version"]) {
-			alert(chrome.i18n.getMessage("options_loaded_theme_older_version"));
-		}
-		if (themeObj.theme_version <= DefaultTheme["theme_version"]) {
-			SelectedTheme = Object.assign({}, DefaultTheme);
-			SelectedTheme["ColorsSet"] = {};
-			for (var val in themeObj.ColorsSet) {
-				SelectedTheme["ColorsSet"][val] = themeObj.ColorsSet[val];
-			}
-			SelectedTheme["ToolbarShow"] = themeObj.ToolbarShow;
-			SelectedTheme["TabsSizeSetNumber"] = themeObj.TabsSizeSetNumber;
-			SelectedTheme["theme_version"] = DefaultTheme["theme_version"];
-			if (themeObj.theme_version == 1) {
-				SelectedTheme["ColorsSet"]["scrollbar_height"] = themeObj.ScrollbarPinList + "px";
-				SelectedTheme["ColorsSet"]["scrollbar_width"] = themeObj.ScrollbarTabList + "px";
-			}
-			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 {
-				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 ThemeList = document.getElementById("theme_list");
-			var theme_name = document.createElement("option");
-			theme_name.value = SelectedTheme["theme_name"];
-			theme_name.text = theme_name.value;
-			ThemeList.add(theme_name);
-			ThemeList.selectedIndex = ThemeList.options.length-1;
-			current_theme = SelectedTheme["theme_name"];
-			document.createElement("new_theme_name").value = current_theme;
-			setTimeout(function() {
-				LoadTheme(current_theme, true);
-			}, 500);
-			RefreshFields();
-			DefaultTheme["ColorsSet"] = {};
-			chrome.storage.local.set({current_theme: current_theme});
-		}
-	}	 
-}

scripts/backup.js

@@ -2,148 +2,304 @@
 // 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 ExportGroup(filename) {
+function ExportGroup(groupId, filename, save_to_manager) {
-	if (opt.debug) {
+	let GroupToSave = { group: bggroups[groupId], folders: {}, tabs: [] };
-		console.log("function: ExportGroup, filename "+filename);
+	document.querySelectorAll("#" + groupId + " .folder").forEach(function(s) {
-	}
-	let GroupToSave = { group: bggroups[active_group], folders: {}, tabs: [] };
-	document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
 		if (bgfolders[s.id]) {
 			GroupToSave.folders[s.id] = bgfolders[s.id];
 		}
 	});
-	let Tabs = document.querySelectorAll("#"+active_group+" .tab");
+	let Tabs = document.querySelectorAll("#" + groupId + " .tab");
 	if (Tabs.length > 0) {
-		let lastId = parseInt(Tabs[Tabs.length-1].id);
+		let lastId = parseInt(Tabs[Tabs.length - 1].id);
-		Tabs.forEach(function(s){
+		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(
+					(GroupToSave.tabs).push({
-						{
+						id: tab.id,
-							id: tab.id,
+						parent: s.parentNode.parentNode.id,
-							parent: s.parentNode.parentNode.id,
+						index: Array.from(s.parentNode.children).indexOf(s),
-							index: Array.from(s.parentNode.children).indexOf(s),
+						expand: (s.classList.contains("c") ? "c" : (s.classList.contains("o") ? "o" : "")),
-							expand: (s.classList.contains("c") ? "c" : (s.classList.contains("o") ? "o" : "")),
+						url: tab.url
-							url: tab.url
+					});
-						}
-					);
 				}
-				
 				if (tab.id == lastId) {
-					// if (opt.debug) {
+					if (filename) {
-						// console.log(GroupToSave);
+						SaveFile(filename, "tt_group", GroupToSave);
-					// }
+					}
-					SaveFile(filename, GroupToSave);
+					if (save_to_manager) {
+						AddGroupToStorage(GroupToSave, true);
+					}
+
+					if (opt.debug) {
+						log("f: ExportGroup, filename: "+filename+", groupId: "+groupId+", save_to_manager: "+save_to_manager);
+					}
 				}
 			});
 		});
+	} else {
+		if (filename) {
+			SaveFile(filename, "tt_group", GroupToSave);
+		}
+		if (save_to_manager) {
+			AddGroupToStorage(GroupToSave, true);
+		}
+
+		if (opt.debug) {
+			log("f: ExportGroup, filename: "+filename+", groupId: "+groupId+", save_to_manager: "+save_to_manager);
+		}
+
 	}
+	
 }
-function ImportGroup() {
+
-	let file = document.getElementById("file_import_group");
+function ImportGroup(recreate_group, save_to_manager) {
+	let file = document.getElementById("file_import");
 	let fr = new FileReader();
 	if (file.files[0] == undefined) return;
 	fr.readAsText(file.files[0]);
 	fr.onload = function() {
 		let data = fr.result;
+		let group = JSON.parse(data);
 		file.parentNode.removeChild(file);
-		let LoadedGroup = JSON.parse(data);
+		if (recreate_group) {
-		let NewFolders = {};
+			RecreateGroup(group);
-		let RefsTabs = {};
-		let NewTabs = [];
-		let NewGroupId = AddNewGroup(LoadedGroup.group.name, LoadedGroup.group.font);
-		SetActiveGroup(NewGroupId, false, false);
-		for (var folder in LoadedGroup.folders) {
-			let newId = GenerateNewFolderID();
-			NewFolders[folder] =  { id: newId, parent: NewGroupId, index: (LoadedGroup.folders[folder].index), name: (LoadedGroup.folders[folder].name), expand: (LoadedGroup.folders[folder].expand) };
 		}
-		for (var folder in NewFolders) {
+		if (save_to_manager) {
-			if (NewFolders[LoadedGroup.folders[folder].parent]) {
+			AddGroupToStorage(group, true);
-				NewFolders[folder].parent = NewFolders[LoadedGroup.folders[folder].parent].id;
+		}
+		
+		if (opt.debug) {
+			log("f: ImportGroup, recreate_group: "+recreate_group+", save_to_manager: "+save_to_manager);
+		}
+	}
+}
+
+function AddGroupToStorage(group, add_to_manager) {
+	chrome.storage.local.get(null, function(storage) {
+		if (storage["hibernated_groups"] == undefined) {
+			let hibernated_groups = [];
+			hibernated_groups.push(group);
+			chrome.storage.local.set({ hibernated_groups: hibernated_groups });
+			if (add_to_manager) {
+				AddGroupToManagerList(group);
+			}
+		} else {
+			let hibernated_groups = storage["hibernated_groups"];
+			hibernated_groups.push(group);
+			chrome.storage.local.set({ hibernated_groups: hibernated_groups });
+			if (add_to_manager) {
+				AddGroupToManagerList(group);
 			}
 		}
-		(LoadedGroup.tabs).forEach(function(Tab){
+		if (opt.debug) {
-			chrome.tabs.create({url: Tab.url, active: false}, function(new_tab) {
+			// log("f: AddGroupToStorage, group: "+JSON.stringify(group)+", add_to_manager: "+add_to_manager);
-				if (new_tab) {
+			log("f: AddGroupToStorage, add_to_manager: "+add_to_manager);
-					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);
+function RecreateGroup(LoadedGroup) {
-						if (nt != null && NewGroupTabs != null) {
+	let NewFolders = {};
-							NewGroupTabs.appendChild(nt);
+	let RefsTabs = {};
+	let NewTabs = [];
+	let NewGroupId = AddNewGroup(LoadedGroup.group.name, LoadedGroup.group.font);
+	SetActiveGroup(NewGroupId, false, false);
+	for (var folder in LoadedGroup.folders) {
+		let newId = GenerateNewFolderID();
+		NewFolders[folder] = { id: newId, parent: NewGroupId, index: (LoadedGroup.folders[folder].index), name: (LoadedGroup.folders[folder].name), expand: (LoadedGroup.folders[folder].expand) };
+	}
+	for (var folder in NewFolders) {
+		if (NewFolders[LoadedGroup.folders[folder].parent]) {
+			NewFolders[folder].parent = NewFolders[LoadedGroup.folders[folder].parent].id;
+		}
+	}
+	(LoadedGroup.tabs).forEach(function(Tab) {
+		chrome.tabs.create({ url: Tab.url, active: false }, function(new_tab) {
+			if (new_tab) {
+				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() {
+					NewTabs.forEach(function(LTab) {
+						if (LTab.parent == LoadedGroup.group.id) {
+							LTab.parent = NewGroupId;
 						}
-					}, 1000);
+						if (NewFolders[LTab.parent]) {
-				}
+							LTab.parent = NewFolders[LTab.parent].id;
-				if (NewTabs.length == LoadedGroup.tabs.length-1) {
+						}
+						if (RefsTabs[LTab.parent]) {
+							LTab.parent = RefsTabs[LTab.parent];
+						}
+					});
+					setTimeout(function() {
+						RearrangeTreeStructure({}, NewFolders, NewTabs);
+					}, 1000);
 					setTimeout(function() {
-						NewTabs.forEach(function(LTab) {
-							if (LTab.parent == LoadedGroup.group.id) {
-								LTab.parent = NewGroupId;
-							}
-							if (NewFolders[LTab.parent]) {
-								LTab.parent = NewFolders[LTab.parent].id;
-							}
-							if (RefsTabs[LTab.parent]) {
-								LTab.parent = RefsTabs[LTab.parent];
-							}
-						});
 						RearrangeTreeStructure({}, NewFolders, NewTabs);
 					}, 2000);
-				}
+					setTimeout(function() {
-			});
+						RearrangeTreeStructure({}, NewFolders, NewTabs);
+					}, 5000);
+				}, 2000);
+			}
 		});
-	}	 
+	});
+	
+	if (opt.debug) {
+		// log("f: RecreateGroup, LoadedGroup: "+JSON.stringify(LoadedGroup)+", NewFolders: "+JSON.stringify(NewFolders)+", NewTabs: "+JSON.stringify(NewTabs));
+		log("f: RecreateGroup");
+	}
+	
 }
-function ExportSession(filename) {
+
-	chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
+
-		chrome.runtime.sendMessage({command: "get_browser_tabs"}, function(response) {
+function ExportSession(name, save_to_file, save_to_manager, save_to_autosave_manager) {
-			let tabs = Object.assign({}, response);
+	chrome.windows.getAll({ windowTypes: ['normal'], populate: true }, function(w) {
-			chrome.runtime.sendMessage({command: "get_windows"}, function(response) {
+		 chrome.runtime.sendMessage({ command: "get_browser_tabs" }, function(response) {
-				let windows = Object.assign({}, response);
+				let tabs = Object.assign({}, response);
-				let warn = true;
+				chrome.runtime.sendMessage({ command: "get_windows" }, function(response) {
-				let ExportWindows = [];
+					let windows = Object.assign({}, response);
-				w.forEach(function(CWin) {
+					let warn = true;
-					if (CWin.tabs.length > 0) {
+					let ExportWindows = [];
-						// if (CWin.tabs.length > 100 && warn) {
+					w.forEach(function(CWin) {
-							// alert(chrome.i18n.getMessage("warning_exporting_big_amount_of_tabs"));
+						 if (CWin.tabs.length > 0) {
-							// warn = false;
+								windows[CWin.id]["id"] = CWin.id;
-						// }
+								windows[CWin.id]["tabs"] = [];
-						windows[CWin.id]["id"] = CWin.id;
+								CWin.tabs.forEach(function(CTab) {
-						windows[CWin.id]["tabs"] = [];
+									if ((CTab.url).startsWith("www") || (CTab.url).startsWith("http") || (CTab.url).startsWith("ftp")) {
-						CWin.tabs.forEach(function(CTab) {
+										windows[CWin.id]["tabs"].push({ id: CTab.id, url: CTab.url, parent: tabs[CTab.id].parent, index: tabs[CTab.id].index, expand: tabs[CTab.id].expand });
-							if ((CTab.url).startsWith("www") || (CTab.url).startsWith("http") || (CTab.url).startsWith("ftp")) {
+									}
-								windows[CWin.id]["tabs"].push({id: CTab.id, url: CTab.url, parent: tabs[CTab.id].parent, index: tabs[CTab.id].index, expand: tabs[CTab.id].expand});
+								});
-							}
+								ExportWindows.push(windows[CWin.id]);
-						});
+						}
-						ExportWindows.push(windows[CWin.id]);
+					});
+					if (save_to_file) {
+						SaveFile(name, "tt_session", ExportWindows);
 					}
+					if (save_to_manager) {
+						AddSessionToStorage(ExportWindows, name, true);
+					}
+					if (save_to_autosave_manager) {
+						AddAutosaveSessionToStorage(ExportWindows, name)
+					}
+
+					if (opt.debug) {
+						// log("f: ExportSession, name: "+name+", session: "+JSON.stringify(ExportWindows)+", save_to_file: "+save_to_file+", save_to_manager: "+save_to_manager+", save_to_autosave_manager: "+save_to_autosave_manager);
+						log("f: ExportSession, name: "+name+", save_to_file: "+save_to_file+", save_to_manager: "+save_to_manager+", save_to_autosave_manager: "+save_to_autosave_manager);
+					}
+
 				});
-				SaveFile(filename, ExportWindows);
-			});
 		});
 	});
 }
-function ImportSession() {
+
-	let file = document.getElementById("file_import_backup");
+function ImportSession(recreate_session, save_to_manager, merge_session) {
+	let file = document.getElementById("file_import");
 	let fr = new FileReader();
 	if (file.files[0] == undefined) return;
-	fr.readAsText(file.files[file.files.length-1]);
+	fr.readAsText(file.files[file.files.length - 1]);
+
 	fr.onload = function() {
 		let data = fr.result;
 		file.parentNode.removeChild(file);
-		let LoadedWindows = JSON.parse(data);
+
-		let RefsTabs = {};
+		let LoadedSession = JSON.parse(data);
-		if (opt.debug) console.log(LoadedWindows);
+
-		LoadedWindows.forEach(function(LWin) {
+		if (opt.debug) {
-			let NewTabs = [];
+			// log("f: ImportSession, session: "+data+", recreate_session: "+recreate_session+", merge_session: "+merge_session);
-			let urls = [];
+			log("f: ImportSession, recreate_session: "+recreate_session+", merge_session: "+merge_session);
-			(LWin.tabs).forEach(function(Tab) {
+		}
+
+		if (recreate_session) {
+			RecreateSession(LoadedSession);
+		}
+		if (merge_session) {
+			ImportMergeTabs(LoadedSession);
+		}
+		if (save_to_manager) {
+			AddSessionToStorage(LoadedSession, (file.files[file.files.length - 1].name).replace(".tt_session", ""), true);
+		}
+	}
+}
+
+function AddSessionToStorage(session, name, add_to_manager) {
+	chrome.storage.local.get(null, function(storage) {
+		if (storage.saved_sessions == undefined) {
+			let saved_sessions = [];
+			saved_sessions.push({ name: name, session: session });
+			chrome.storage.local.set({ saved_sessions: saved_sessions });
+			if (add_to_manager) {
+				AddSessionToManagerList(saved_sessions[saved_sessions.length - 1]);
+			}
+		} else {
+			let saved_sessions = storage.saved_sessions;
+			saved_sessions.push({ name: name, session: session });
+
+			chrome.storage.local.set({ saved_sessions: saved_sessions });
+			if (add_to_manager) {
+				AddSessionToManagerList(saved_sessions[saved_sessions.length - 1]);
+			}
+		}
+
+		if (opt.debug) {
+			// log("f: AddSessionToStorage, name: "+name+", add_to_manager: "+add_to_manager+", session: "+JSON.stringify(session));
+			log("f: AddSessionToStorage, name: "+name+", add_to_manager: "+add_to_manager);
+		}
+	});
+
+}
+
+function AddAutosaveSessionToStorage(session, name) {
+	chrome.storage.local.get(null, function(storage) {
+		if (storage.saved_sessions_automatic == undefined) {
+			let s = [];
+			s.push({ name: name, session: session });
+			chrome.storage.local.set({ saved_sessions_automatic: s });
+		} else {
+			let s = storage.saved_sessions_automatic;
+			s.unshift({ name: name, session: session });
+			if (s[opt.autosave_max_to_keep]) {
+				s.splice(opt.autosave_max_to_keep, (s.length - opt.autosave_max_to_keep));
+			}
+			chrome.storage.local.set({ saved_sessions_automatic: s });
+		}
+
+		if (opt.debug) {
+			// log("f: AddAutosaveSessionToStorage, name: "+name+", session: "+JSON.stringify(session));
+			log("f: AddAutosaveSessionToStorage, name: "+name);
+		}
+	});
+}
+
+
+
+function RecreateSession(LoadedSession) {
+	let RefsTabs = {};
+
+	if (opt.debug) {
+		// log("f: RecreateSession, session: "+JSON.stringify(LoadedSession));
+		log("f: RecreateSession");
+	}
+
+	LoadedSession.forEach(function(LWin) {
+		let NewTabs = [];
+		let urls = [];
+		(LWin.tabs).forEach(function(Tab) {
 				urls.push(Tab.url);
 				NewTabs.push(Tab);
-			});
+		});
-			chrome.windows.create({url: urls}, function(new_window) {
+		chrome.windows.create({ url: urls }, function(new_window) {
 				for (let tInd = 0; tInd < new_window.tabs.length; tInd++) {
 					RefsTabs[NewTabs[tInd].id] = new_window.tabs[tInd].id;
 					NewTabs[tInd].id = new_window.tabs[tInd].id;
@@ -151,12 +307,12 @@ function ImportSession() {
 				for (let tInd = 0; tInd < new_window.tabs.length; tInd++) {
 					if (RefsTabs[NewTabs[tInd].parent] != undefined) {
 						NewTabs[tInd].parent = RefsTabs[NewTabs[tInd].parent];
-					}					
+					}
 				}
 				let HaveResponse;
 				let GiveUp = 0;
 				var Append = setInterval(function() {
-					chrome.runtime.sendMessage({command: "remote_update", groups: LWin.groups, folders: LWin.folders, tabs: NewTabs, windowId: new_window.id}, function(response) {
+					chrome.runtime.sendMessage({ command: "remote_update", groups: LWin.groups, folders: LWin.folders, tabs: NewTabs, windowId: new_window.id }, function(response) {
 						HaveResponse = response;
 					});
 					if (HaveResponse || GiveUp > 900) {
@@ -164,13 +320,17 @@ function ImportSession() {
 					}
 					GiveUp++;
 				}, 2000);
-			});
 		});
-	}	 
+	});
 }
+
+
 function RearrangeTreeStructure(groups, folders, tabs) { // groups and folders are in object, just like bggroups and bgfolders, but tabs are in array of bgtreetabs objects
-	if (opt.debug) console.log("function: RearrangeTreeStructure");
+	if (opt.debug) {
-	chrome.tabs.query({currentWindow: true}, function(ChromeTabs) {
+		log("f: RearrangeTreeStructure");
+	}
+
+	chrome.tabs.query({ currentWindow: true }, function(ChromeTabs) {
 		if (groups && Object.keys(groups).length > 0) {
 			for (var group in groups) {
 				bggroups[groups[group].id] = Object.assign({}, groups[group]);
@@ -186,17 +346,17 @@ function RearrangeTreeStructure(groups, folders, tabs) { // groups and folders a
 		let bgtabs = {};
 		tabs.forEach(function(Tab) {
 			if (Tab.parent == "pin_list") {
-				chrome.tabs.update(Tab.id, {pinned: true});
+				chrome.tabs.update(Tab.id, { pinned: true });
 			}
 			let tb = document.getElementById(Tab.id);
-			let tbp = document.getElementById("ct"+Tab.parent);
+			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};
+			bgtabs[Tab.id] = { index: Tab.index, parent: Tab.parent, expand: Tab.expand };
 		});
 		RearrangeTreeTabs(ChromeTabs, bgtabs, true);
 		RearrangeFolders(true);
@@ -209,68 +369,108 @@ function RearrangeTreeStructure(groups, folders, tabs) { // groups and folders a
 		}, 1000);
 	});
 }
-function ImportMergeTabs() {
+
-	if (opt.debug) console.log("function: ImportMergeTabs");
+function ImportMergeTabs(LoadedSession) {
-	let file = document.getElementById("file_import_merge_backup");
+	if (opt.debug) {
-	let fr = new FileReader();
+		// log("f: ImportMergeTabs, session: "+JSON.stringify(LoadedSession));
-	if (file.files[0] == undefined) return;
+		log("f: ImportMergeTabs");
-	fr.readAsText(file.files[0]);
+	}
-	fr.onload = function() {
+	let RefsWins = {};
-		let data = fr.result;
+	let RefsTabs = {};
-		file.parentNode.removeChild(file);
+	for (let LWI = 0; LWI < LoadedSession.length; LWI++) { // clear previous window ids
-		let lw = JSON.parse(data);
+		LoadedSession[LWI].id = "";
-		let RefsWins = {};
+	}
-		let RefsTabs = {};
+	chrome.windows.getAll({ windowTypes: ['normal'], populate: true }, function(cw) {
-		for (let LWI = 0; LWI < lw.length; LWI++) { // clear previous window ids
+		for (let CWI = 0; CWI < cw.length; CWI++) { // loop Windows
-			lw[LWI].id = "";
+			for (let LWI = 0; LWI < LoadedSession.length; LWI++) { // loop Loaded Windows
-		}
+				let tabsMatch = 0;
-		if (opt.debug) console.log(lw);
+				for (let CTI = 0; CTI < cw[CWI].tabs.length; CTI++) { // loop Tabs of each Current Window
-		chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(cw) {
+					for (let LTI = 0; LTI < LoadedSession[LWI].tabs.length; LTI++) { // loop Tabs of each Loaded Window
-			for (let CWI = 0; CWI < cw.length; CWI++) { // loop Windows
+						if (cw[CWI].tabs[CTI].url == LoadedSession[LWI].tabs[LTI].url) {
-				for (let LWI = 0; LWI < lw.length; LWI++) { // loop Loaded Windows
+							RefsTabs[LoadedSession[LWI].tabs[LTI].id] = cw[CWI].tabs[CTI].id;
-					let tabsMatch = 0;
+							LoadedSession[LWI].tabs[LTI].id = cw[CWI].tabs[CTI].id;
-					for (let CTI = 0; CTI < cw[CWI].tabs.length; CTI++) { // loop Tabs of each Current Window
+							LoadedSession[LWI].tabs[LTI].url = "";
-						for (let LTI = 0; LTI < lw[LWI].tabs.length; LTI++) { // loop Tabs of each Loaded Window
+							tabsMatch++;
-							if (cw[CWI].tabs[CTI].url == lw[LWI].tabs[LTI].url) {
+							break;
-								RefsTabs[lw[LWI].tabs[LTI].id] = cw[CWI].tabs[CTI].id;
-								lw[LWI].tabs[LTI].id = cw[CWI].tabs[CTI].id;
-								lw[LWI].tabs[LTI].url = "";
-								tabsMatch++;
-								break;
-							}
 						}
 					}
-					if (opt.debug) console.log(tabsMatch);
+				}
-					if (tabsMatch > lw[LWI].tabs.length*0.8) {
+				if (opt.debug) {
-						lw[LWI].id = cw[CWI].id;
+					log("f: ImportMergeTabs, tabsMatch: "+tabsMatch);
-						break;
+				}
-					}
+				if (tabsMatch > LoadedSession[LWI].tabs.length * 0.6) {
+					LoadedSession[LWI].id = cw[CWI].id;
+					break;
 				}
 			}
-			if (opt.debug) console.log(lw);
+		}
-			lw.forEach(function(w) {
+
-				if (w.id == "") { // missing window, lets make one
+		LoadedSession.forEach(function(w) {
-					if (opt.debug) console.log("missing window");
+			if (w.id == "") { // missing window, lets make one
-					let NewTabs = [];
+				if (opt.debug) {
-					let urls = [];
+					log("f: ImportMergeTabs, missing window");
-					(w.tabs).forEach(function(Tab) {
+				}
-						urls.push(Tab.url);
+
+				let NewTabs = [];
+				let urls = [];
+				(w.tabs).forEach(function(Tab) {
+					urls.push(Tab.url);
+					NewTabs.push(Tab);
+				});
+				chrome.windows.create({ url: urls }, function(new_window) {
+					for (let tInd = 0; tInd < new_window.tabs.length; tInd++) {
+						RefsTabs[NewTabs[tInd].id] = new_window.tabs[tInd].id;
+						NewTabs[tInd].id = new_window.tabs[tInd].id;
+					}
+					for (let tInd = 0; tInd < new_window.tabs.length; tInd++) {
+						if (RefsTabs[NewTabs[tInd].parent] != undefined) {
+							NewTabs[tInd].parent = RefsTabs[NewTabs[tInd].parent];
+						}
+					}
+					let HaveResponse;
+					let GiveUp = 0;
+					var Append = setInterval(function() {
+						chrome.runtime.sendMessage({ command: "remote_update", groups: w.groups, folders: w.folders, tabs: NewTabs, windowId: new_window.id }, function(response) {
+							HaveResponse = response;
+						});
+						if (HaveResponse || GiveUp > 900) {
+							clearInterval(Append);
+						}
+						GiveUp++;
+					}, 2000);
+				});
+			} else { // window exists, lets add missing tabs
+				if (opt.debug) {
+					log("f: ImportMergeTabs, window exists");
+				}
+
+				let NewTabs = [];
+				(w.tabs).forEach(function(Tab) {
+					if (Tab.url != "") { // missing tab, lets make one
+						chrome.tabs.create({ url: Tab.url, windowId: w.id }, function(tab) {
+							Tab.id = tab.id;
+							RefsTabs[tab.id] = tab.id;
+							NewTabs.push(Tab);
+						});
+					} else {
 						NewTabs.push(Tab);
-					});
+					}
-					chrome.windows.create({url: urls}, function(new_window) {
+				});
-						for (let tInd = 0; tInd < new_window.tabs.length; tInd++) {
+				setTimeout(function() {
-							RefsTabs[NewTabs[tInd].id] = new_window.tabs[tInd].id;
+					for (let tInd = 0; tInd < NewTabs.length; tInd++) {
-							NewTabs[tInd].id = new_window.tabs[tInd].id;
+						if (RefsTabs[NewTabs[tInd].parent] != undefined) {
-						}
+							NewTabs[tInd].parent = RefsTabs[NewTabs[tInd].parent];
-						for (let tInd = 0; tInd < new_window.tabs.length; tInd++) {
-							if (RefsTabs[NewTabs[tInd].parent] != undefined) {
-								NewTabs[tInd].parent = RefsTabs[NewTabs[tInd].parent];
-							}					
 						}
+					}
+				}, 4000);
+				setTimeout(function() {
+					if (w.id == CurrentWindowId) {
+						RearrangeTreeStructure(w.groups, w.folders, NewTabs);
+					} else {
 						let HaveResponse;
 						let GiveUp = 0;
 						var Append = setInterval(function() {
-							chrome.runtime.sendMessage({command: "remote_update", groups: w.groups, folders: w.folders, tabs: NewTabs, windowId: new_window.id}, function(response) {
+							chrome.runtime.sendMessage({ command: "remote_update", groups: w.groups, folders: w.folders, tabs: NewTabs, windowId: w.id }, function(response) {
 								HaveResponse = response;
 							});
 							if (HaveResponse || GiveUp > 900) {
@@ -278,49 +478,30 @@ function ImportMergeTabs() {
 							}
 							GiveUp++;
 						}, 2000);
-					});
+					}
-				}
+				}, 6000);
-				else
+			}
-				{ // window exists, lets add missing tabs
-					if (opt.debug) console.log("window exists");
-					let NewTabs = [];
-					(w.tabs).forEach(function(Tab) {
-						if (Tab.url != "") { // missing tab, lets make one
-							chrome.tabs.create({url: Tab.url, windowId: w.id}, function(tab) {
-								Tab.id = tab.id;
-								RefsTabs[tab.id] = tab.id;
-								NewTabs.push(Tab);
-							});
-						} else {
-							NewTabs.push(Tab);
-						}
-					});
-					setTimeout(function() {
-						for (let tInd = 0; tInd < NewTabs.length; tInd++) {
-							if (RefsTabs[NewTabs[tInd].parent] != undefined) {
-								NewTabs[tInd].parent = RefsTabs[NewTabs[tInd].parent];
-							}					
-						}
-					}, 4000);
-					setTimeout(function() {
-						if (w.id == CurrentWindowId) {
-							RearrangeTreeStructure(w.groups, w.folders, NewTabs);
-						} else {
-							let HaveResponse;
-							let GiveUp = 0;
-							var Append = setInterval(function() {
-								chrome.runtime.sendMessage({command: "remote_update", groups: w.groups, folders: w.folders, tabs: NewTabs, windowId: w.id}, function(response) {
-									HaveResponse = response;
-								});
-								if (HaveResponse || GiveUp > 900) {
-									clearInterval(Append);
-								}
-								GiveUp++;
-							}, 2000);
-						}
-					}, 6000);
-				}
-			});
 		});
-	}	 
+	});
+}
+
+
+function StartAutoSaveSession() {
+	if (opt.autosave_interval > 0 && opt.autosave_max_to_keep > 0) {
+		AutoSaveSession = setInterval(function() {
+			if (opt.debug) {
+				log("f: AutoSaveSession, loop time is: "+opt.autosave_interval);
+			}
+
+			let d = new Date();
+			ExportSession((d.toLocaleString().replace("/", ".").replace("/", ".").replace(":", "꞉").replace(":", "꞉")), false, false, true);
+
+			if (document.getElementById("manager_window").style.top != "-500px") {
+				chrome.storage.local.get(null, function(storage) {
+					ReAddSessionAutomaticToManagerList(storage);
+				});
+			}
+
+		}, opt.autosave_interval * 60000);
+	}
 }

scripts/chrome.js

@@ -5,6 +5,7 @@
 // **********         CHROME EVENTS         ***************
 
 function StartChromeListeners() {
+
 	if (browserId == "F") {
 		browser.browserAction.onClicked.addListener(function(tab) {
 			if (tab.windowId == CurrentWindowId) {
@@ -12,168 +13,265 @@ function StartChromeListeners() {
 			}
 		});
 	}
+
 	chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+
 		if (message.command == "backup_available") {
-			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (opt.debug) {
-			document.getElementById("button_load_bak"+message.bak).classList.remove("disabled");
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
-		}
+			}
-		if (message.command == "drag_drop") {
+			let BAKbutton = document.getElementById("button_load_bak"+message.bak);
-			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (BAKbutton != null) {
-			if (opt.debug) console.log(message);
+				BAKbutton.classList.remove("disabled");
-			DragAndDrop.ComesFromWindowId = message.ComesFromWindowId;
-			DragAndDrop.DragNodeClass = message.DragNodeClass;
-			DragAndDrop.Depth = message.Depth;
-			DragAndDrop.Folders = Object.assign({}, message.Folders);
-			DragAndDrop.FoldersSelected = message.FoldersSelected;
-			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)
-				{
-					RemoveFolder(DragAndDrop.Folders[folder].id);
-				}
 			}
 		}
-		if (message.command == "dragend") {
+
+		if (message.command == "drag_drop") {
+			if (opt.debug) {
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			}
 			CleanUpDragClasses();
+			DragNodeClass = message.DragNodeClass;
+			DragTreeDepth = Object.assign(0, message.DragTreeDepth);
 		}
+
+		if (message.command == "dragend") {
+			if (opt.debug) {
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			}
+			CleanUpDragClasses();
+			EmptyDragAndDrop();
+		}
+
+		if (message.command == "remove_folder") {
+			if (opt.debug) {
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command+" folderId: "+message.folderId);
+			}
+			RemoveFolder(message.folderId);
+		}
+
 		if (message.command == "reload_sidebar") {
-			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (opt.debug) {
-			if (opt.debug) console.log(message);
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			}
 			window.location.reload();
 		}
+
 		if (message.command == "reload_options") {
-			if (opt.debug) console.log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			if (opt.debug) {
-			chrome.runtime.sendMessage({command: "get_preferences"}, function(response) {
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
-				opt = Object.assign({}, response);
+			}
-				setTimeout(function() {
+			opt = Object.assign({}, message.opt);
-					RestorePinListRowSettings();
-			}, 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();
-					RestorePinListRowSettings();
+			}, 100);
-					let theme = response;
-					ApplyTheme(theme);
-				});
-			}, 300);
 		}
+
+		if (message.command == "reload_toolbar") {
+			if (opt.debug) {
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			}
+			opt = Object.assign({}, message.opt);
+
+			if (opt.show_toolbar) {
+				RemoveToolbar();
+				RecreateToolbar(message.toolbar);
+				SetToolbarEvents(false, true, true, "mousedown");
+				RestoreToolbarShelf();
+				RestoreToolbarSearchFilter();
+			} else {
+				RemoveToolbar();
+			}
+			RefreshGUI();
+		}
+
+		if (message.command == "reload_theme") {
+			if (opt.debug) {
+				log("message to sidebar "+CurrentWindowId+": message: "+message.command);
+			}
+			RestorePinListRowSettings();
+			ApplyTheme(message.theme);
+		}
+
 		if (message.windowId == CurrentWindowId) {
 			
 			// 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 (message.command == "tab_created") {
-			
-				if (opt.debug) console.log("tab_created: "+message.tabId);
-				if (opt.debug) console.log("tab is pinned: "+message.tab.pinned);
 
-				if (message.parentTabId != undefined) {
+				chrome.tabs.get(message.tabId, function(NewTab) { // get tab again as reported tab's url is empty! Also for some reason firefox sends tab with "active == false" even if tab is active (THIS IS POSSIBLY A NEW BUG IN FF 60.01!)
-					AppendTab(message.tab, message.parentTabId, false, false, true, message.index, true, false, false, true, false);
+					if (opt.debug) {
-				} else {
+						log("chrome event: tab_created: "+message.tabId);
-					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") {
+					if (opt.move_tabs_on_url_change == "from_empty_b" && NewTab.url == newTabUrl) {
-							if (opt.debug) console.log("child case, tab will append after active");
+						EmptyTabs.push(message.tabId);
-							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);
+					}
+
+					if (document.getElementById(message.tabId) == null) {
+
+						if (opt.move_tabs_on_url_change == "from_empty" && NewTab.url == newTabUrl) {
+							EmptyTabs.push(message.tabId);
+						}
+						
+						if (message.parentTabId != undefined) {
+							AppendTab(NewTab, message.parentTabId, false, false, true, message.index, true, false, false, true, false);
 						} else {
-							let Parents = GetParentsByClass(document.getElementById(message.tab.openerTabId), "tab");
+							if (opt.append_orphan_tab == "as_child" && NewTab.openerTabId == undefined && document.querySelector("#"+active_group+" .active_tab")) {
-							if (opt.max_tree_depth < 0 || (opt.max_tree_depth > 0 && Parents.length < opt.max_tree_depth)) { // append to tree
+								if (opt.debug) {
-								if (opt.append_child_tab == "top") {
+									log("tab_created: as_child, ignores orphan case, appending tab as child");
-									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") {
-									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);
 								}
+								NewTab.openerTabId = document.querySelector("#"+active_group+" .active_tab").id;
 							}
-							if (opt.max_tree_depth > 0 && Parents.length >= opt.max_tree_depth) { // if reached depth limit of the tree
+							if (NewTab.openerTabId) { // child case
-								if (opt.debug) console.log("child case, surpassed tree limit");
+								if (opt.append_child_tab == "after_active") {
-								if (opt.append_child_tab_after_limit == "after") {
+									if (opt.debug) {
-									if (opt.debug) console.log("tab will append after active");
+										log("tab_created: child case, tab will append after active, openerTabId: "+NewTab.openerTabId);
-									AppendTab(message.tab, false, false, message.tab.openerTabId, true, false, true, false, false, true, false);
+									}
+									AppendTab(NewTab, 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 {
+									let Parents = GetParentsByClass(document.getElementById(NewTab.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") {
+											if (opt.debug) {
+												log("tab_created: child case, in tree limit, tab will append on top, openerTabId: "+NewTab.openerTabId);
+											}
+											AppendTab(NewTab, NewTab.openerTabId, false, false, (NewTab.pinned ? true : false), false, true, false, false, true, false);
+										}
+										if (opt.append_child_tab == "bottom") {
+											if (opt.debug) {
+												log("tab_created: child case, in tree limit, tab will append on bottom, openerTabId: "+NewTab.openerTabId);
+											}
+											AppendTab(NewTab, NewTab.openerTabId, false, false, true, false, true, false, false, true, false);
+										}
+									}
+									if (opt.max_tree_depth > 0 && Parents.length >= opt.max_tree_depth) { // if reached depth limit of the tree
+										if (opt.debug) {
+											log("tab_created: child case, surpassed tree limit, openerTabId: "+NewTab.openerTabId);
+										}
+										if (opt.append_child_tab_after_limit == "after") {
+											if (opt.debug) {
+												log("tab_created: tab will append after active, openerTabId: "+NewTab.openerTabId);
+											}
+											AppendTab(NewTab, false, false, NewTab.openerTabId, true, false, true, false, false, true, false);
+										}
+										if (opt.append_child_tab_after_limit == "top") {
+											if (opt.debug) {
+												log("tab_created: tab will append on top, openerTabId: "+NewTab.openerTabId);
+											}
+											AppendTab(NewTab, document.getElementById(NewTab.openerTabId).parentNode.parentNode.id, false, false, (NewTab.pinned ? true : false), false, true, false, false, true, false);
+										}
+										if (opt.append_child_tab_after_limit == "bottom") {
+											if (opt.debug) {
+												log("tab_created: tab will append on bottom, openerTabId: "+NewTab.openerTabId);
+											}
+											AppendTab(NewTab, document.getElementById(NewTab.openerTabId).parentNode.parentNode.id, false, false, true, false, true, false, false, true, false);
+										}
+									}
 								}
-								if (opt.append_child_tab_after_limit == "top") {
+								if (opt.max_tree_depth == 0) { // place tabs flat
-									if (opt.debug) console.log("tab will append on top");
+									if (opt.debug) {
-									AppendTab(message.tab, document.getElementById(message.tab.openerTabId).parentNode.parentNode.id, false, false, (message.tab.pinned ? true : false), false, true, false, false, true, false);
+										log("tab_created: max_tree_depth is 0, tabs are placed on the same level");
+									}
+									if (opt.append_child_tab_after_limit == "after") {
+										if (opt.debug) {
+											log("tab_created: tab will append after active");
+										}
+										AppendTab(NewTab, false, false, NewTab.openerTabId, false, false, true, false, false, true, false);
+									}
+									if (opt.append_child_tab_after_limit == "top") {
+										if (opt.debug) {
+											log("tab_created: tab will append on top");
+										}
+										AppendTab(NewTab, false, false, false, false, false, true, false, false, true, false);
+									}
+									if (opt.append_child_tab_after_limit == "bottom") {
+										if (opt.debug) {
+											log("tab_created: tab will append on bottom");
+										}
+										AppendTab(NewTab, false, false, false, true, false, true, false, false, true, false);
+									}
 								}
-								if (opt.append_child_tab_after_limit == "bottom") {
+							} else { // orphan case
-									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 set to append orphan tabs to ungrouped group
+								// if tab is still not present, basically, not opened by OpenNewTab(), it will switch to ungrouped group
+								// if (opt.orphaned_tabs_to_ungrouped === true && document.getElementById(message.tabId) == null && !NewTab.pinned) {
+								if (opt.orphaned_tabs_to_ungrouped === true && !NewTab.pinned) {
+									if (opt.debug) {
+										log("tab_created: orphan case, orphaned tab goes to ungrouped");
+									}
+									if (active_group != "tab_list") {
+										SetActiveGroup("tab_list", false, false);
+									}
+								}
+
+								if (opt.append_orphan_tab == "after_active") {
+									if (opt.debug) {
+										log("tab_created: orphan case, appending tab after active");
+									}
+									AppendTab(NewTab, false, false, (document.querySelector("#"+active_group+" .active_tab") != null ? document.querySelector("#"+active_group+" .active_tab").id : undefined), (NewTab.pinned ? true : false), false, true, false, false, true, false);
+								}
+								if (opt.append_orphan_tab == "top") {
+									if (opt.debug) {
+										log("tab_created: orphan case, appending tab on top");
+									}
+									AppendTab(NewTab, false, false, false, false, false, true, false, false, true, false);
+								}
+								if (opt.append_orphan_tab == "bottom" || opt.append_orphan_tab == "as_child") {
+									if (opt.debug) {
+										log("tab_created: orphan case, appending tab on bottom");
+									}
+									AppendTab(NewTab, false, false, false, true, false, true, false, false, true, false);
 								}
 							}
 						}
-						if (opt.max_tree_depth == 0) { // place tabs flat
+						if (opt.move_tabs_on_url_change === "all_new") {
-							if (opt.debug) console.log("max_tree_depth is 0, tabs are placed on the same level");
+							AppendTabToGroupOnRegexMatch(message.tabId, NewTab.url);
-							if (opt.append_child_tab_after_limit == "after") {
+						}
-								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 (NewTab.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='"+NewTab.openerTabId+"']");
-							if (opt.append_child_tab_after_limit == "top") {
+							if (openerTab != null) {
-								if (opt.debug) console.log("tab will append on top");
+								openerTab.classList.remove("c");
-								AppendTab(message.tab, false, false, false, false, false, true, false, false, true, false);
+								openerTab.classList.add("o");
-							}
-							if (opt.append_child_tab_after_limit == "bottom") {
-								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.syncro_tabbar_tabs_order) {
-						if (opt.append_orphan_tab == "after_active") {
+							let tabIds = Array.prototype.map.call(document.querySelectorAll(".pin, .tab"), function(s){
-							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);
+								return parseInt(s.id);
-						}
+							});
-						if (opt.append_orphan_tab == "top") {
+							chrome.tabs.move(message.tabId, {index: tabIds.indexOf(message.tabId)});
-							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(message.tab, false, false, false, true, false, true, false, false, true, false);
 						}
+
+						RefreshExpandStates();
+						setTimeout(function() {
+							schedule_update_data++;
+						}, 500);
+						setTimeout(function() {
+							RefreshCounters();
+							RefreshGUI();
+						},50);
 					}
-				}
+				});
-				
-				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 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);
+				if (opt.debug) {
+					log("chrome event: "+message.command+", tabId: "+message.tabId+", tab is pinned: "+message.tab.pinned+", ParentId: "+message.ParentId);
+				}
 				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 (opt.debug) {
+					log("chrome event: "+message.command+ ", tabId: " + message.tabId);
+				}
+				let ctDetachedParent = document.getElementById(message.tabId).childNodes[1];
 				if (ctDetachedParent != null) {
 					if (opt.promote_children_in_first_child == true && ctDetachedParent.childNodes.length > 1) {
-						let ctNewParent = document.getElementById(ctDetachedParent.firstChild.id).childNodes[4];
+						let ctNewParent = document.getElementById(ctDetachedParent.firstChild.id).childNodes[1];
 						ctDetachedParent.parentNode.parentNode.insertBefore(ctDetachedParent.firstChild, ctDetachedParent.parentNode);
 						while (ctDetachedParent.firstChild) {
 							ctNewParent.appendChild(ctDetachedParent.firstChild);
@@ -192,14 +290,23 @@ function StartChromeListeners() {
 				return;
 			}
 			if (message.command == "tab_removed") {
-				if (opt.debug) console.log("tab_removed: "+message.tabId);
+				if (opt.debug) {
+					log("chrome event: "+message.command+ ", tabId: " + message.tabId);
+				}
+
+				if (EmptyTabs.indexOf(message.tabId) != -1) {
+					EmptyTabs.splice(EmptyTabs.indexOf(message.tabId), 1);
+				}
+
 				let mTab = document.getElementById(message.tabId);
 				if (mTab != null) {
-					let ctParent = mTab.childNodes[4];
+					let ctParent = mTab.childNodes[1];
-					if (opt.debug) console.log("tab_removed, promote children: " +opt.promote_children);
+					if (opt.debug) {
+						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];
+							let ctNewParent = document.getElementById(ctParent.firstChild.id).childNodes[1];
 							ctParent.parentNode.parentNode.insertBefore(ctParent.firstChild, ctParent.parentNode);
 							while (ctParent.firstChild) {
 								ctNewParent.appendChild(ctParent.firstChild);
@@ -225,14 +332,25 @@ function StartChromeListeners() {
 				return;
 			}
 			if (message.command == "tab_activated") {
-				SetActiveTab(message.tabId);
+				if (opt.debug) {
+					log("chrome event: "+message.command+ ", tabId: " + message.tabId);
+				}
+				SetActiveTab(message.tabId, true);
 				return;
 			}
 			if (message.command == "tab_attention") {
+				if (opt.debug) {
+					log("chrome event: "+message.command+ ", tabId: " + message.tabId);
+				}
 				SetAttentionIcon(message.tabId);
 				return;
 			}
 			if (message.command == "tab_updated") {
+				if (opt.debug) {
+					log("chrome event: "+message.command+ ", tabId: " + message.tabId+ ", changeInfo: "+JSON.stringify(message.changeInfo));
+					// log(message.changeInfo);
+				}
+				
 				if (message.changeInfo.favIconUrl != undefined || message.changeInfo.url != undefined) {
 					setTimeout(function() {
 						GetFaviconAndTitle(message.tabId, true);
@@ -251,15 +369,38 @@ function StartChromeListeners() {
 				}
 				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")) )  ) {
+					if (updateTab != null) {
-						SetTabClass(message.tabId, message.tab.pinned);
+						if (message.tab.pinned && updateTab.classList.contains("pin") == false) {
-						schedule_update_data++;
+							SetTabClass(message.tabId, true);
+							schedule_update_data++;
+						}
+						if (!message.tab.pinned && updateTab.classList.contains("tab") == false) {
+							SetTabClass(message.tabId, false);
+							schedule_update_data++;
+						}
 					}
 					RefreshExpandStates();
 				}
+				
+				
+				// if set to append when url changes and matches pre-set group
+				if (message.changeInfo.url != undefined && message.changeInfo.url != newTabUrl) {
+					// if (((opt.move_tabs_on_url_change == "from_empty" || opt.move_tabs_on_url_change == "from_empty_b") && EmptyTabs.indexOf(message.tabId) != -1) || opt.move_tabs_on_url_change == "always") {
+					if (EmptyTabs.indexOf(message.tabId) != -1 || opt.move_tabs_on_url_change == "always") {
+						AppendTabToGroupOnRegexMatch(message.tabId, message.changeInfo.url);
+					}
+					if (EmptyTabs.indexOf(message.tabId) != -1) {
+						EmptyTabs.splice(EmptyTabs.indexOf(message.tabId), 1);
+					}
+				}
+				
 				return;
 			}
 			if (message.command == "remote_update") {
+				if (opt.debug) {
+					log("chrome event: "+message.command+ ", tabId: " + message.tabId);
+					log(message);
+				}
 				RearrangeTreeStructure(message.groups, message.folders, message.tabs);
 				sendResponse(true);
 				return;

scripts/events.js

@@ -3,6 +3,10 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 function SetEvents() {
+	if (opt.debug) {
+		log("f: SetEvents, adding global events.");
+	}
+
 	let PinList = document.getElementById("pin_list");
 	
 	if (!opt.switch_with_scroll) {
@@ -23,7 +27,7 @@ function SetEvents() {
 		}
 	}
 	document.oncontextmenu = function(event){
-		if (!event.ctrlKey) {
+		if (!event.ctrlKey && event.target.classList.contains("text_input") == false) {
 			event.preventDefault();
 		}
 	}	
@@ -46,23 +50,6 @@ function SetEvents() {
 			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
@@ -107,18 +94,17 @@ function SetEvents() {
 			HideRenameDialogs();
 		}
 	}
-
+	PinList.onclick = function(event) {
-	PinList.onmousedown = function(event) {
+		if (event.which == 1 && event.target == this) {
-		if (opt.pin_list_multi_row) {
+			if (opt.pin_list_multi_row || (opt.pin_list_multi_row == false && event.clientY < (this.childNodes[0].getBoundingClientRect().height + this.getBoundingClientRect().top))) {
-			if (event.which == 1 && event.target == this) {
 				DeselectFolders();
 				DeselectTabs();
-				HideMenus();
 			}
-		} else {
+		}
-			if (event.which == 1 && event.target == this && event.clientY < (this.childNodes[0].getBoundingClientRect().height + this.getBoundingClientRect().top)) {
+	}
-				DeselectFolders();
+	PinList.onmousedown = function(event) {
-				DeselectTabs();
+		if (event.which == 1 && event.target == this) {
+			if (opt.pin_list_multi_row || (opt.pin_list_multi_row == false && event.clientY < (this.childNodes[0].getBoundingClientRect().height + this.getBoundingClientRect().top))) {
 				HideMenus();
 			}
 		}
@@ -130,10 +116,11 @@ function SetEvents() {
 			ShowFGlobalMenu(event);
 		}
 	}
-	PinList.ondragenter = function(event) {
+	PinList.ondragover = function(event) {
 		// PIN,TAB==>PINLIST
-		if (event.target.id == "pin_list" && DragAndDrop.DragNodeClass == "tab") {
+		if (event.target.id == "pin_list" && DragNodeClass == "tab" && this.classList.contains("highlighted_drop_target") == false) {
-			HighlightNode(this);
+			RemoveHighlight();
+			this.classList.add("highlighted_drop_target");
 		}
 	}
 	
@@ -206,118 +193,112 @@ function SetEvents() {
 
 	
 	document.body.ondragover = function(event) {
+		if (opt.debug) {
+			log("drag over: "+event.target.id);
+		}
 		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) {
+			if (DragOverTimer && opt.open_tree_on_hover) {
 				event.target.parentNode.classList.add("o");
 				event.target.parentNode.classList.remove("c");
-				DragAndDrop.timeout = false;
+				DragOverTimer = false;
 			}
 		}
 	}	
 
 	document.ondrop = function(event) {
 		if (opt.debug) {
-			console.log("drop");
+			log("dropped on window: "+CurrentWindowId);
 		}
-		DragAndDrop.DroppedToWindowId = CurrentWindowId;
+
+		let TabsIds = event.dataTransfer.getData("TabsIds") ? JSON.parse(event.dataTransfer.getData("TabsIds")) : [];
+		let TabsIdsParents = event.dataTransfer.getData("TabsIdsParents") ? JSON.parse(event.dataTransfer.getData("TabsIdsParents")) : [];
+		let TabsIdsSelected = event.dataTransfer.getData("TabsIdsSelected") ? JSON.parse(event.dataTransfer.getData("TabsIdsSelected")) : [];
+		let Folders = event.dataTransfer.getData("Folders") ? JSON.parse(event.dataTransfer.getData("Folders")) : {};
+		let FoldersSelected = event.dataTransfer.getData("FoldersSelected") ? JSON.parse(event.dataTransfer.getData("FoldersSelected")) : [];
+		let SourceWindowId = event.dataTransfer.getData("SourceWindowId") ? JSON.parse(event.dataTransfer.getData("SourceWindowId")) : 0;
 		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")));
+		if (SourceWindowId == CurrentWindowId) {
-			DropToTarget(target, selected);
+			DropToTarget(target, TabsIdsSelected, TabsIds, TabsIdsParents, Folders, FoldersSelected);
 		} else {
-			if (Object.keys(DragAndDrop.Folders).length > 0) {
+			FreezeSelected();
-				for (var folder in DragAndDrop.Folders) {
+
-					bgfolders[DragAndDrop.Folders[folder].id] = Object.assign({}, DragAndDrop.Folders[folder]);
+			if (Object.keys(Folders).length > 0) {
+
+				let SelectedFolders = Object.assign([], FoldersSelected);
+
+				for (var folder in Folders) {
+					AddNewFolder(folder, Folders[folder].parent, Folders[folder].name, Folders[folder].index, Folders[folder].expand, (FoldersSelected.indexOf(folder) != -1 ? "selected_folder" : undefined), true);
+					chrome.runtime.sendMessage({ command: "remove_folder", folderId: Folders[folder].id });
 				}
-				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 (TabsIds.length == 0) {
-						if (opt.debug) console.log("DragAndDrop: will now move tab: "+TabId);
+				DropToTarget(target, TabsIdsSelected, TabsIds, TabsIdsParents, Folders, FoldersSelected);
-				chrome.tabs.move(TabId, { windowId: CurrentWindowId, index: -1 }, function(MovedTab) {
+			} else {
-					if (browserId == "F") {																																						// MOZILLA BUG 1398272
+				(TabsIds).forEach(function(TabId) {
-						let MovedTabId = MovedTab[0] != undefined ? MovedTab[0].id : (MovedTab.id != undefined ? MovedTab.id : TabId);
+					if (opt.debug) {
-						if ((DragAndDrop.TabsIdsParents).indexOf("ct"+DragAndDrop.TabsIds[counter]) != -1) {																// MOZILLA BUG 1398272
+						log("DragAndDrop: will now move tab: "+TabId);
-							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);
 					}
+
+					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);		// MOZILLA BUG 1398272
+							if ((TabsIdsParents).indexOf("ct"+TabsIds[counter]) != -1) {																		// MOZILLA BUG 1398272
+								TabsIdsParents[(TabsIdsParents).indexOf("ct"+TabsIds[counter])] = "ct"+MovedTabId;										// MOZILLA BUG 1398272
+							}																																						// MOZILLA BUG 1398272
+							if ((TabsIdsSelected).indexOf(TabsIds[counter]) != -1) {																				// MOZILLA BUG 1398272
+								TabsIdsSelected[(TabsIdsSelected).indexOf(TabsIds[counter])] = MovedTabId;													// MOZILLA BUG 1398272
+							}																																						// MOZILLA BUG 1398272
+							TabsIds[counter] = MovedTabId;																												// MOZILLA BUG 1398272
+						}																																							// MOZILLA BUG 1398272				
+						counter++;
+						if (counter == TabsIds.length) {
+							setTimeout(function() {
+								(TabsIdsSelected).forEach(function(selectedTabId) {
+									let selectedTab = document.getElementById(selectedTabId);
+									if (selectedTab != null) {
+										selectedTab.classList.add("selected_temporarly");
+										selectedTab.classList.add("selected_tab");
+									}
+								});
+								DropToTarget(target, TabsIdsSelected, TabsIds, TabsIdsParents, Folders, FoldersSelected);
+							}, 200);
+						}
+					});
 				});
-			});
-		}
-		// 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) {
+
+	document.ondragleave = function(event) {
 		if (opt.debug) {
-			console.log("document dragend");
+			log("global dragleave");
-			console.log(event);
 		}
-		
+
-		
+		if (event.target.classList) {
+			if (event.target.classList.contains("drag_enter_center")) {
+				DragOverTimer = false;
+			}
+		}
+		RemoveHighlight();
+	}
+
+	document.ondragend = function(event) {
+		// log("document dragend");
 		// 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");
+				// log("dragged outside sidebar");
-				// if (DragAndDrop.DragNodeClass == "tab") {
+				// if (DragNodeClass == "tab") {
 					// Detach(DragAndDrop.TabsIds, {});
 				// }
-				// if (DragAndDrop.DragNodeClass == "folder") {
+				// if (DragNodeClass == "folder") {
 					// Detach(DragAndDrop.TabsIds, DragAndDrop.Folders);
 					// setTimeout(function() {
 						// SaveFolders();
@@ -325,16 +306,22 @@ function SetEvents() {
 				// }
 			// }
 		// }
-		CleanUpDragClasses();
+		setTimeout(function() {
-		chrome.runtime.sendMessage({command: "dragend"});
+			CleanUpDragClasses();
+			chrome.runtime.sendMessage({command: "dragend"});
+		}, 500);
 	}
 }
 
 
 function BindTabsSwitchingToMouseWheel(Id) {
-	document.getElementById(Id).onmousewheel = function(event) {
+	if (opt.debug) {
+		log("f: BindTabsSwitchingToMouseWheel, binding tabs switch to group: "+Id);
+	}
+
+	document.getElementById(Id).onwheel = function(event) {
 		event.preventDefault();
-		let prev = event.wheelDelta > 0 || event.detail < 0;
+		let prev = event.deltaY < 0;
 		if (prev) {
 			ActivatePrevTab();
 		} else {
@@ -343,221 +330,238 @@ function BindTabsSwitchingToMouseWheel(Id) {
 	}
 }
 
+function RemoveHighlight() {
+	document.querySelectorAll(".highlighted_drop_target").forEach(function(s){
+		if (opt.debug) {
+			log("removing highlight of: " + s.id);
+		}
+		s.classList.remove("before");
+		s.classList.remove("after");
+		s.classList.remove("inside");
+		s.classList.remove("highlighted_drop_target");
+	});
+}
+
 function RemoveHeadersHoverClass() {
 	document.querySelectorAll(".folder_header_hover, .tab_header_hover").forEach(function(s){
+		if (opt.debug) {
+			log("removing hover of: " + s.id);
+		}
 		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);
+
-				});
+
-			}	
+function DropToTarget(TargetNode, TabsIdsSelected, TabsIds, TabsIdsParents, Folders, FoldersSelected) {
+	if (TargetNode != null) {
+
+		if (opt.debug) {
+			log("f: DropToTarget, TargetNode: "+TargetNode.id+", TabsIdsSelected: "+JSON.stringify(TabsIdsSelected)+", TabsIds: "+JSON.stringify(TabsIds)+", TabsIdsParents: "+JSON.stringify(TabsIdsParents)+", Folders: "+JSON.stringify(Folders)+", FoldersSelected: "+JSON.stringify(FoldersSelected)  );
 		}
-		if (DragAndDrop.DragNodeClass == "folder") { // dropped on group button (group list)
+
-			if (opt.debug) console.log("DragNodeClass is folder");
+		// let Append;
-			if (TargetNode.classList.contains("group")) { // dropped on group (tab list)
+		let pinTabs = false;
-				let newParent = document.getElementById("cf" + TargetNode.id);
+
-				selected.forEach(function(s){
+		if (DragNodeClass == "tab") {
-					newParent.appendChild(s);
+			if (TargetNode.classList.contains("pin")) {
-				});
+				pinTabs = true;
-			}
+				if (TargetNode.classList.contains("before")) {
-			if (TargetNode.classList.contains("group_drag_box")) { // dropped on group button (group list)
+					TabsIds.forEach(function(tabId){
-				let newParent = document.getElementById("cf" + TargetNode.id.substr(1));
+						InsterBeforeNode(document.getElementById(tabId), TargetNode);
-				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.classList.contains("after")) {
-					if (TargetNode.parentNode.nextSibling != null) {
+					for (let i = TabsIds.length-1; i >= 0; i--) {
-						for(let i = selected.length-1; i >= 0; i--) {
+						InsterAfterNode(document.getElementById(TabsIds[i]), TargetNode);
-							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]);
-						}
 					}
 				}
 			}
+
+			if (TargetNode.classList.contains("tab")) {
+				if (TargetNode.classList.contains("before")) {
+					TabsIdsSelected.forEach(function(tabId){
+						InsterBeforeNode(document.getElementById(tabId), TargetNode);
+					});
+				}
+				if (TargetNode.classList.contains("after")) {
+					for (let i = TabsIdsSelected.length-1; i >= 0; i--) {
+						InsterAfterNode(document.getElementById(TabsIdsSelected[i]), TargetNode);
+					}
+				}
+				if (TargetNode.classList.contains("inside")) {
+					TabsIdsSelected.forEach(function(tabId){
+						AppendToNode(document.getElementById(tabId), TargetNode.childNodes[1]);
+					});
+				}
+			}
+
+			if (TargetNode.id == "pin_list") {
+				pinTabs = true;
+				TabsIds.forEach(function(tabId){
+					AppendToNode(document.getElementById(tabId), TargetNode);
+				});
+			}
+
+			if (TargetNode.classList.contains("group")) {
+				TabsIdsSelected.forEach(function(tabId){
+					AppendToNode(document.getElementById(tabId), TargetNode.childNodes[1]);
+				});
+			}
+
+			if (TargetNode.classList.contains("folder")) {
+				TabsIdsSelected.forEach(function(tabId){
+					AppendToNode(document.getElementById(tabId), TargetNode.childNodes[2]);
+				});
+			}
+			
+			if (TargetNode.classList.contains("group_button")) { // dropped on group button (group list)
+				TabsIdsSelected.forEach(function(tabId){
+					AppendToNode(document.getElementById(tabId), document.getElementById("ct" + (TargetNode.id.substr(1))));
+				});
+			}
+		}
+
+		
+		if (DragNodeClass == "folder") {
+			if (TargetNode.classList.contains("folder")) { // dropped on folder
+				if (TargetNode.classList.contains("before")) {
+					FoldersSelected.forEach(function(folderId){
+						InsterBeforeNode(document.getElementById(folderId), TargetNode);
+					});
+				}
+				if (TargetNode.classList.contains("after")) {
+					for(let i = FoldersSelected.length-1; i >= 0; i--) {
+						InsterAfterNode(document.getElementById(FoldersSelected[i]), TargetNode);
+					}
+				}
+				if (TargetNode.classList.contains("inside")) {
+					FoldersSelected.forEach(function(folderId){
+						AppendToNode(document.getElementById(folderId), TargetNode.childNodes[1]);
+					});
+				}
+			}
+			
+			if (TargetNode.classList.contains("group")) {
+				FoldersSelected.forEach(function(folderId){
+					AppendToNode(document.getElementById(folderId), TargetNode.childNodes[0]);
+				});
+			}
+			
+			if (TargetNode.classList.contains("group_button")) { // dropped on group button (group list)
+				FoldersSelected.forEach(function(folderId){
+					AppendToNode(document.getElementById(folderId),  document.getElementById("cf" + TargetNode.id.substr(1)));
+				});
+			}
+
 			setTimeout(function() {
 				SaveFolders();
-			}, 300);
+			}, 600);
 		}
 
-		if (TargetNode.parentNode.classList.contains("group_button") && DragAndDrop.DragNodeClass == "group") {
+		if (TargetNode.classList.contains("group_button") && (DragNodeClass == "tab" || DragNodeClass == "folder")) {
-			if (TargetNode.classList.contains("group_button_drag_entered_top")) {
+			chrome.tabs.query({currentWindow: true, active: true}, function(activeTab) {
-				TargetNode.parentNode.parentNode.insertBefore(selected[0], TargetNode.parentNode);
+				let Tab = document.getElementById(activeTab[0].id);
-			} else {
+				if (Tab != null && TabsIds.indexOf(activeTab[0].id) != -1) {
-				if (TargetNode.parentNode.nextSibling != null) {
+					SetActiveGroup(TargetNode.id.substr(1), false, false);
-					TargetNode.parentNode.parentNode.insertBefore(selected[0], TargetNode.parentNode.nextSibling);
+					SetActiveTab(activeTab[0].id, true);
-				} else {
-					TargetNode.parentNode.parentNode.appendChild(selected[0]);
 				}
+			});
+		}
+
+		if (DragNodeClass == "group") {
+			if (TargetNode.classList.contains("before")) {
+				InsterBeforeNode(document.querySelector(".dragged_group_button"), TargetNode);
+			}
+			if (TargetNode.classList.contains("after")) {
+				InsterAfterNode(document.querySelector(".dragged_group_button"), TargetNode);
 			}
 			UpdateBgGroupsOrder();
 			RearrangeGroupsLists();
 			if (opt.syncro_tabbar_groups_tabs_order) {
 				schedule_rearrange_tabs++;
 			}		
-		}		
+		}
 		
-		if (opt.syncro_tabbar_tabs_order && DragAndDrop.TabsIds[0] != undefined) {
+		SetMultiTabsClass(TabsIds, pinTabs);
+		// SetMultiTabsClass(TabsIdsSelected, pinTabs);
+
+		// recheck new structure
+		if (TabsIds.length) {
+			for (var ind = 0; ind < TabsIds.length; ind++) {
+				if (TabsIdsSelected.indexOf(TabsIds[ind]) == -1) {
+					let Tab = document.getElementById(TabsIds[ind]);
+					let TabParent = document.getElementById(TabsIdsParents[ind]);
+					if (TabParent != null && TabParent.id != Tab.parentNode.id) {
+						TabParent.appendChild(Tab);
+					}
+				}
+			}
+		}
+		
+		if (opt.syncro_tabbar_tabs_order && 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);
+			if (opt.debug) {
-			chrome.tabs.move(DragAndDrop.TabsIds, {index: tabIds.indexOf(DragAndDrop.TabsIds[0])});
+				log(  "f: DropToTarget, will Syncro tabbar tabs order, TabsIds array is:"+JSON.stringify(TabsIds)  );
+			}
+				
+			chrome.tabs.move(TabsIds, {index: tabIds.indexOf(TabsIds[0])});
 			setTimeout(function() {
 				schedule_rearrange_tabs++;
 			}, 500);
 		}
 	}
-	DragAndDrop.timeout = false;
+
+	DragOverTimer = false;
 	setTimeout(function() {
-		EmptyDragAndDrop();
 		RefreshExpandStates();
 		RefreshCounters();
-		RefreshGUI();
 		schedule_update_data++;
+		RefreshGUI();
+		EmptyDragAndDrop();
+
+		if (opt.debug) {
+			log("DropToTarget END");
+		}
+	}, 300);
+
+	setTimeout(function() {
+		CleanUpDragClasses();
+		RemoveHighlight();
 	}, 100);
-	
-	CleanUpDragClasses();
-	
 }
 
-function DropTargetsFront(ExcludeNode, tabs, groups) {
+
-	if (ExcludeNode == undefined) {
+function FreezeSelected() {
-		ExcludeNode = {parentNode: {childNodes: [{id: "x"}, {id: "x"}, {id: "x"}], id: "x"}};
+	document.querySelectorAll(".selected_tab").forEach(function(s){
-	}
+		if (opt.debug) {
-	if (tabs) {
+			log("freezing selected tab: " + s.id);
-		document.querySelectorAll("#"+active_group+" .drag_enter_center:not(#"+ExcludeNode.parentNode.childNodes[0].id+")").forEach(function(s){
+		}
-			s.style.zIndex = 9911;
+		s.classList.add("selected_frozen");
-		});
+		s.classList.remove("selected_tab");
-		document.querySelectorAll("#"+active_group+" .drag_enter_center:not(#"+ExcludeNode.parentNode.childNodes[0].id+")").forEach(function(s){
+		s.classList.remove("selected_last");
-			s.style.zIndex = 9911;
+	});
-		});
+	document.querySelectorAll(".selected_folder").forEach(function(s){
-		document.querySelectorAll(".drag_entered_top:not(#"+ExcludeNode.parentNode.childNodes[1].id+")").forEach(function(s){
+		if (opt.debug) {
-			s.style.zIndex = 9915;
+			log("freezing selected folder: " + s.id);
-		});
+		}
-		document.querySelectorAll(".drag_entered_bottom:not(#"+ExcludeNode.parentNode.childNodes[2].id+")").forEach(function(s){
+		s.classList.add("selected_folder_frozen");
-			s.style.zIndex = 9920;
+		s.classList.remove("selected_folder");
-		});
+	});
-	}
-	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){
+	if (opt.debug) {
-		s.classList.remove("highlighted_drop_target");
+		log("f: CleanUpDragClasses, unfreezing and removing temporary classes...");
-	});
+	}
-	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");
@@ -566,10 +570,6 @@ function CleanUpDragClasses() {
 		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");
@@ -584,16 +584,19 @@ function CleanUpDragClasses() {
 	document.querySelectorAll(".folder_header").forEach(function(s){
 		s.classList.remove("folder_header_hover");
 	});
-	document.querySelectorAll(".dragged_group_button").forEach(function(s){ // dragged group button
+	document.querySelectorAll(".dragged_group_button").forEach(function(s){
 		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 = "";
-	});
 }
+
+function EmptyDragAndDrop() {
+	if (opt.debug) {
+		log("f: EmptyDragAndDrop, reset DragOverTimer and removing DragNodeClass...");
+	}
+	DragOverTimer = false;
+	DragNodeClass = "";
+	DragTreeDepth = 0;
+}

scripts/folders.js

@@ -2,27 +2,35 @@
 // 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(ParentId, Name, Index, ExpandState) {
+function AddNewFolder(folderId, ParentId, Name, Index, ExpandState, AdditionalClass, SetEvents) {
-	var newId = GenerateNewFolderID();
+	var newId = folderId ? folderId : GenerateNewFolderID();
 	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);
+	if (opt.debug) {
+		log("f: AddNewFolder, folder: "+JSON.stringify(bgfolders[newId]));
+	}
+	AppendFolder(newId, caption_noname_group, (ParentId ? ParentId : ""), undefined, SetEvents, AdditionalClass);
 	SaveFolders();
 	RefreshCounters();
 	RefreshExpandStates();
 	return newId;
 }
 
-function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
+function AppendFolder(folderId, Name, ParentId, Expand, SetEvents, AdditionalClass) {
+	if (opt.debug) {
+		log("f: AppendFolder, folder: "+JSON.stringify(bgfolders[folderId]));
+	}
+	let ClassList = "folder ";
+	if (AdditionalClass != undefined) {
+		ClassList = ClassList + AdditionalClass;
+	}
 	if (document.getElementById(folderId) == null) {
-		var fd = document.createElement("div"); fd.className = "folder ";  if (Expand) { fd.className += Expand }  fd.id = folderId;// FOLDER
+		var fd = document.createElement("div"); fd.className = ClassList;  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);
+		var di = document.createElement("div"); di.className = "drag_indicator"; di.id = "di"+folderId; fd.appendChild(di); // DROP TARGET INDICATOR
 		if (!opt.never_show_close) {
 			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);
@@ -40,12 +48,20 @@ function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
 				}
 			}
 
+			cf.onclick = function(event) {
+				if (event.target == this && event.which == 1) {
+					DeselectFolders();
+					DeselectTabs();
+				}
+			}
+			ct.onclick = function(event) {
+				if (event.target == this && event.which == 1) {
+					DeselectFolders();
+					DeselectTabs();
+				}
+			}
 			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);
@@ -57,10 +73,6 @@ function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
 			}
 			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);
@@ -85,17 +97,21 @@ function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
 					this.classList.remove("close_hover");
 				}
 			}
-			fh.onmousedown = function(event) {
+			fh.onclick = function(event) {
-				if (document.getElementById("main_menu").style.top != "-1000px") {
-					HideMenus();
-				}
 				// SELECT FOLDER
 				if (event.which == 1 && !event.shiftKey) {
 					DeselectTabs();
-					if (!event.ctrlKey) {
+					if (!event.ctrlKey && this.parentNode.classList.contains("selected_folder") == false) {
 						DeselectFolders();
 					}
-					event.target.parentNode.parentNode.classList.toggle("selected_folder");
+					if (event.ctrlKey) {
+						this.parentNode.classList.toggle("selected_folder");
+					}
+				}
+			}
+			fh.onmousedown = function(event) {
+				if (document.getElementById("main_menu").style.top != "-1000px") {
+					HideMenus();
 				}
 				if (event.which == 2) {
 					event.preventDefault();
@@ -108,86 +124,12 @@ function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
 			}
 			// 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 && !event.shiftKey && !event.ctrlKey && 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();
+				FolderStartDrag(this, event);
-				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");
@@ -204,34 +146,27 @@ function AppendFolder(folderId, Name, ParentId, Expand, SetEvents) {
 					this.classList.remove("close_show");
 				}
 			}
-			dc.ondragenter = function(event) {
+			fh.ondragleave = function(event) {
-				// DRAGENTER PIN,TAB,FOLDER==>DROP ZONES
+				RemoveHighlight();
-				DragAndDrop.timeout = false;
+			}
+			fh.ondragover = function(event) {
+				FolderDragOver(this, event);
+			}
+			
+			fh.ondragenter = function(event) {
+				DragOverTimer = false;
 				setTimeout(function() {
-					DragAndDrop.timeout = true;
+					DragOverTimer = 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) {
+				event.stopPropagation();
 				if (document.getElementById("main_menu").style.top != "-1000px") {
 					HideMenus();
 				}
 				// EXPAND/COLLAPSE FOLDER
-				if (event.which == 1 && !event.shiftKey && !event.ctrlKey) {
+				if (event.which == 1 && !event.shiftKey && !event.ctrlKey && event.target == this) {
 					event.stopPropagation();
 					EventExpandBox(this.parentNode.parentNode);
 					RefreshExpandStates();
@@ -257,8 +192,11 @@ function GenerateNewFolderID() {
 }
 
 function AppendFolders(Folders) {
+	if (opt.debug) {
+		log("f: AppendFolders, Folders: "+JSON.stringify(Folders));
+	}
 	for (var folderId in Folders) {
-		AppendFolder(folderId, Folders[folderId].name, Folders[folderId].parent, Folders[folderId].expand, true);
+		AppendFolder(folderId, Folders[folderId].name, Folders[folderId].parent, Folders[folderId].expand, true, undefined);
 	}
 	for (var folderId in Folders) {
 		let f = document.getElementById(folderId);
@@ -279,17 +217,16 @@ function SaveFolders() {
 }
 
 function RearrangeFolders(first_loop) {
+	if (opt.debug) {
+		log("f: RearrangeFolders");
+	}
 	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]);
+				InsterBeforeNode(s, s.parentNode.childNodes[bgfolders[s.id].index]);
 			} else {
-				if (s.parentNode.childNodes[bgfolders[s.id].index].nextSibling != null) {
+				InsterAfterNode(s, s.parentNode.childNodes[bgfolders[s.id].index]);
-					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);
-				}				
 			}
 		}
 		let newInd = Array.from(s.parentNode.children).indexOf(s);
@@ -300,27 +237,30 @@ function RearrangeFolders(first_loop) {
 }
 
 function RemoveFolder(FolderId) {
+	if (opt.debug) {
+		log("f: RemoveFolder, folderId "+FolderId);
+	}
 	let folder = document.getElementById(FolderId);
 	if (folder != null) {
-		let CF = folder.childNodes[4]; // CF stands for DIV with children folders
+		let CF = folder.childNodes[1]; // CF stands for DIV with children folders
-		let CT = folder.childNodes[5]; // CT stands for DIV with children tabs
+		let CT = folder.childNodes[2]; // CT stands for DIV with children tabs
 		if (opt.promote_children == true) {
 			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];
+				let NewCF = FirstFolderChild.childNodes[1];
 				while (CF.firstChild) {
 					NewCF.appendChild(CF.firstChild);
 				}
 				if (CT.childNodes.length > 0) {
-					let NewCT = FirstFolderChild.childNodes[5];
+					let NewCT = FirstFolderChild.childNodes[2];
 					while (CT.firstChild) {
 						NewCT.appendChild(CT.firstChild);
 					}
 				}
 			} else {
 				let NewCT = document.getElementById("ct"+folder.parentNode.parentNode.id);
-				// let NewCT = folder.parentNode.parentNode.childNodes[5];
+				// let NewCT = folder.parentNode.parentNode.childNodes[2];
 				while (CT.firstChild) {
 					NewCT.appendChild(CT.firstChild);
 				}
@@ -344,17 +284,20 @@ function RemoveFolder(FolderId) {
 	}
 }
 
-function SetActiveFolder(FolderId) {
+// function SetActiveFolder(FolderId) {
-	let folder = document.getElementById(FolderId);
+	// let folder = document.getElementById(FolderId);
-	if (folder != null) {
+	// if (folder != null) {
-		document.querySelectorAll(".selected_folder").forEach(function(s){
+		// document.querySelectorAll(".selected_folder").forEach(function(s){
-			s.classList.remove("selected_folder");
+			// s.classList.remove("selected_folder");
-		});
+		// });
-		folder.classList.add("selected_folder");
+		// folder.classList.add("selected_folder");
-	}
+	// }
-}
+// }
 
 function ShowRenameFolderDialog(FolderId) { // Rename folder popup
+	if (opt.debug) {
+		log("f: ShowRenameFolderDialog, folderId "+FolderId);
+	}
 	HideRenameDialogs();
 	if (bgfolders[FolderId]) {
 		let name = document.getElementById("folder_edit_name");
@@ -363,7 +306,8 @@ function ShowRenameFolderDialog(FolderId) { // Rename folder popup
 		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";
+		// folderEditDialog.style.left = "22px";
+		folderEditDialog.style.left = "";
 		setTimeout(function(){
 			document.getElementById("folder_edit_name").select();
 		},5);
@@ -373,26 +317,35 @@ function ShowRenameFolderDialog(FolderId) { // Rename folder popup
 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, "");
+	// 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();
+	if (opt.debug) {
+		log("f: FolderRenameConfirm, folderId "+FolderId+", name: "+name.value);
+	}
 	chrome.runtime.sendMessage({command: "save_folders", folders: bgfolders, windowId: CurrentWindowId});
 	RefreshCounters();
 }
 
 function DeselectFolders() {
+	if (opt.debug) {
+		log("f: DeselectFolders");
+	}
 	document.querySelectorAll("#"+active_group+" .selected_folder").forEach(function(s){
 		s.classList.remove("selected_folder");
 	});
 }
 
 function ActionClickFolder(FolderNode, bgOption) {
+	if (opt.debug) {
+		log("f: ActionClickFolder, folderId "+FolderNode.id+", bgOption: "+bgOption);
+	}
 	if (bgOption == "rename_folder") {
 		ShowRenameFolderDialog(FolderNode.id);
 	}
 	if (bgOption == "new_folder") {
-		AddNewFolder(FolderNode.id, undefined, undefined, undefined);
+		AddNewFolder(undefined, FolderNode.id, undefined, undefined, undefined, undefined, true);
 	}
 	if (bgOption == "new_tab") {
 		OpenNewTab(false, FolderNode.id);
@@ -412,3 +365,125 @@ function ActionClickFolder(FolderNode, bgOption) {
 	}
 }
 
+function FolderStartDrag(Node, event) {
+	if (opt.debug) {
+		log("f: FolderStartDrag, folderId "+Node.id);
+	}
+	event.stopPropagation();
+	event.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+	event.dataTransfer.setData("text", "");
+	event.dataTransfer.setData("SourceWindowId", CurrentWindowId);
+	CleanUpDragClasses();
+	EmptyDragAndDrop();
+
+	DragNodeClass = "folder";
+	
+	let TabsIds = [];
+	let TabsIdsParents = [];
+	
+	let Folders = {};
+	let FoldersSelected = [];
+
+
+	if (Node.parentNode.classList.contains("selected_folder")) {
+		document.querySelectorAll(".group:not(#"+active_group+") .selected_folder").forEach(function(s){
+			s.classList.add("selected_folder_frozen");
+			s.classList.remove("selected_folder");
+		});
+	} else {
+		FreezeSelected();
+		Node.parentNode.classList.add("selected_folder_temporarly");
+		Node.parentNode.classList.add("selected_folder");
+	}
+	
+	RemoveHeadersHoverClass();
+	
+	document.querySelectorAll("[id='"+Node.parentNode.id+"'], [id='"+Node.parentNode.id+"'] .folder, [id='"+Node.parentNode.id+"'] .tab").forEach(function(s){
+		s.classList.add("dragged_tree");
+	});
+
+	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 > DragTreeDepth) {
+				DragTreeDepth = parents.length;
+			}
+		});
+	} else {
+		DragTreeDepth = -1;
+	}
+
+	// REST OF SELECTED FOLDERS+TABS THAT WILL BE DRAGGED
+	document.querySelectorAll(".selected_folder, .selected_folder .tab, .selected_folder .folder").forEach(function(s){
+		s.classList.add("dragged_tree");
+	});
+
+	document.querySelectorAll("#"+active_group+" .selected_folder").forEach(function(s){
+		FoldersSelected.push(s.id);
+		Folders[s.id] = Object.assign({}, bgfolders[s.id]);
+		let Fchildren = document.querySelectorAll("#cf"+s.id+" .folder");
+		Fchildren.forEach(function(fc){
+			Folders[fc.id] = Folders[fc.id] = Object.assign({}, bgfolders[fc.id]);
+		});
+		let Tchildren = document.querySelectorAll("#ct"+s.id+" .tab");
+		Tchildren.forEach(function(tc){
+			TabsIds.push(parseInt(tc.id));
+			TabsIdsParents.push(tc.parentNode.id);
+		});
+	});
+
+	event.dataTransfer.setData("TabsIds", JSON.stringify(TabsIds));
+	event.dataTransfer.setData("TabsIdsParents", JSON.stringify(TabsIdsParents));
+
+	event.dataTransfer.setData("Folders", JSON.stringify(TabsIds));
+	event.dataTransfer.setData("FoldersSelected", JSON.stringify(FoldersSelected));
+	
+	chrome.runtime.sendMessage({
+		command: "drag_drop",
+		DragNodeClass: "folder",
+		DragTreeDepth: DragTreeDepth
+	});	
+}
+
+function FolderDragOver(Node, event) {
+	if (opt.debug) {
+		log("f: debug, folderId "+Node.id);
+	}
+	if (Node.parentNode.classList.contains("dragged_tree") == false) {
+
+		let P = (GetParentsByClass(Node, "folder")).length + DragTreeDepth;
+		let PGroup = Node.parentNode.parentNode.parentNode.classList.contains("group");
+	
+		if (DragNodeClass == "folder" && Node.parentNode.classList.contains("before") == false && event.layerY < Node.clientHeight/3 && (P <= opt.max_tree_depth+1 || opt.max_tree_depth<0 || PGroup || opt.max_tree_drag_drop_folders == false)) {
+			RemoveHighlight();
+			Node.parentNode.classList.remove("inside");
+			Node.parentNode.classList.remove("after");
+			Node.parentNode.classList.add("before");
+			Node.parentNode.classList.add("highlighted_drop_target");
+		}
+		
+		if (DragNodeClass == "folder" && Node.parentNode.classList.contains("inside") == false && event.layerY > Node.clientHeight/3 && event.layerY <= 2*(Node.clientHeight/3) && (P <= opt.max_tree_depth || opt.max_tree_depth<0 || opt.max_tree_drag_drop_folders == false)) {
+			RemoveHighlight();
+			Node.parentNode.classList.remove("before");
+			Node.parentNode.classList.remove("after");
+			Node.parentNode.classList.add("inside");
+			Node.parentNode.classList.add("highlighted_drop_target");
+		}
+		
+		if (DragNodeClass == "folder" && Node.parentNode.classList.contains("after") == false && Node.parentNode.classList.contains("o") == false && event.layerY > 2*(Node.clientHeight/3) && (P <= opt.max_tree_depth+1 || opt.max_tree_depth<0 || PGroup || opt.max_tree_drag_drop_folders == false)) {
+			RemoveHighlight();
+			Node.parentNode.classList.remove("inside");
+			Node.parentNode.classList.remove("before");
+			Node.parentNode.classList.add("after");
+			Node.parentNode.classList.add("highlighted_drop_target");
+		}
+		
+		if (DragNodeClass == "tab" && Node.parentNode.classList.contains("inside") == false && (P <= opt.max_tree_depth || opt.max_tree_depth<0 || opt.max_tree_drag_drop_folders == false)) {
+			RemoveHighlight();
+			Node.parentNode.classList.remove("before");
+			Node.parentNode.classList.remove("after");
+			Node.parentNode.classList.add("inside");
+			Node.parentNode.classList.add("highlighted_drop_target");
+		}
+	}
+}

scripts/global.js

@@ -4,34 +4,34 @@
 
 // **********         GLOBAL VARIABLES FOR BACKGROUND, OPTIONS AND SIDEBAR         ***************
 
+// BACKGROUND VARIABLES
+let debug = [];
 var running = false;
 var schedule_save = -999;
-var schedule_update_data = 0;
-var schedule_rearrange_tabs = 0;
-var schedule_rearrange_reverse = false;
 var windows = {};
 var tabs = {};
 var tt_ids = {};
-var DragAndDrop = {
+
-	timeout: false,
+
-	Depth: 0,
+// SIDEBAR VARIABLES
-	// DragNode: undefined,
+var AutoSaveSession;
-	DragNodeClass: "",
+var schedule_update_data = 0;
-	TabsIds: [],
+var schedule_rearrange_tabs = 0;
-	TabsIdsParents: [],
+
-	TabsIdsSelected: [],
+var DragNodeClass = "";
-	Folders: {},
+var DragOverTimer = true;
-	FoldersSelected: [],
+var DragTreeDepth = 0;
-	ComesFromWindowId: undefined,
+
-	DroppedToWindowId: 0
-};
 var menuItemNode;
 var CurrentWindowId = 0;
 var SearchIndex = 0;
 var active_group = "tab_list";
 var opt = {};
-var browserId = navigator.userAgent.match("Opera") !== null ? "O" : ( navigator.userAgent.match("Vivaldi") !== null ? "V" : (navigator.userAgent.match("Firefox") !== null ? "F" : "C" )  );
+var browserId = navigator.userAgent.match("Opera|OPR") !== null ? "O" : ( navigator.userAgent.match("Vivaldi") !== null ? "V" : (navigator.userAgent.match("Firefox") !== null ? "F" : "C" )  );
-var bgtabs = {};
+
+var newTabUrl = browserId == "F" ? "about:newtab" : "chrome://startpage/";
+var EmptyTabs = [];
+
 var bggroups = {};
 var bgfolders = {};
 var caption_clear_filter = chrome.i18n.getMessage("caption_clear_filter");
@@ -39,74 +39,30 @@ 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");
-const DefaultToolbar =
+
-	'<div id=toolbar_main>'+
+
-		'<div class=button id=button_new><div class=button_img></div></div>'+
+// DEFAULTS NEEDED FOR START AND FOR OPTIONS PAGE
-		'<div class=button id=button_pin><div class=button_img></div></div>'+
+const DefaultToolbar = {
-		'<div class=button id=button_undo><div class=button_img></div></div>'+
+	"toolbar_main": ["button_new", "button_pin", "button_undo", "button_search", "button_tools", "button_groups", "button_backup", "button_folders"],
-		'<div class=button id=button_search><div class=button_img></div></div>'+
+	"toolbar_search": ["button_filter_type", "filter_search_go_prev", "filter_search_go_next"],
-		'<div class=button id=button_tools><div class=button_img></div></div>'+
+	"toolbar_shelf_tools": (browserId == "F" ? ["button_manager_window", "button_options", "button_unload", "button_detach", "button_reboot"] : ["button_manager_window", "button_options", "button_bookmarks", "button_downloads", "button_history", "button_settings", "button_extensions", "button_unload", "button_detach", "button_reboot"]),
-		'<div class=button id=button_groups><div class=button_img></div></div>'+
+	"toolbar_shelf_groups": ["button_groups_toolbar_hide", "button_new_group", "button_remove_group", "button_edit_group", "button_import_group", "button_export_group"],
-		'<div class=button id=button_backup><div class=button_img></div></div>'+
+	"toolbar_shelf_backup": (browserId == "F" ? ["button_import_bak", "button_import_merge_bak", "button_export_bak"] : ["button_import_bak", "button_import_merge_bak", "button_export_bak", "button_load_bak1", "button_load_bak2", "button_load_bak3"]),
-		'<div class=button id=button_folders><div class=button_img></div></div>'+
+	"toolbar_shelf_folders": ["button_new_folder", "button_remove_folder", "button_edit_folder"]
-	'</div>'+
+};
-	'<div class=toolbar_shelf id=toolbar_search>'+
+
-		'<div id=toolbar_search_input_box>'+
+const DefaultTheme = {
-			'<input id=filter_box type=text placeholder=Search tabs...></input>'+
-			'<div id=button_filter_clear style="opacity:0; position:absolute;" type=reset></div>'+
-		'</div>'+
-		'<div id=toolbar_search_buttons>'+
-			'<div class=button id=button_filter_type><div class=button_img></div></div>'+
-			'<div class=button id=filter_search_go_prev><div class=button_img></div></div>'+
-			'<div class=button id=filter_search_go_next><div class=button_img></div></div>'+
-		'</div>'+
-	'</div>'+
-	'<div class=toolbar_shelf id=toolbar_shelf_tools>'+
-		'<div class=button id=button_options><div class=button_img></div></div>'+
-		(browserId != "F" ?
-		'<div class=button id=button_bookmarks><div class=button_img></div></div>'+
-		'<div class=button id=button_downloads><div class=button_img></div></div>'+
-		'<div class=button id=button_history><div class=button_img></div></div>'+
-		'<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_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>'+
-		'<div class=button id=button_new_group><div class=button_img></div></div>'+
-		'<div class=button id=button_remove_group><div class=button_img></div></div>'+
-		'<div class=button id=button_edit_group><div class=button_img></div></div>'+
-		'<div class=button id=button_import_group><div class=button_img></div></div>'+
-		'<div class=button id=button_export_group><div class=button_img></div></div>'+
-	'</div>'+
-	'<div class=toolbar_shelf id=toolbar_shelf_backup>'+
-		'<div class=button id=button_import_bak><div class=button_img></div></div>'+
-		'<div class=button id=button_import_merge_bak><div class=button_img></div></div>'+
-		'<div class=button id=button_export_bak><div class=button_img></div></div>'+
-		(browserId != "F" ?
-		'<div class=button id=button_load_bak1><div class=button_img></div></div>'+
-		'<div class=button id=button_load_bak2><div class=button_img></div></div>'+
-		'<div class=button id=button_load_bak3><div class=button_img></div></div>'
-		: '')+
-	'</div>'+
-	'<div class=toolbar_shelf id=toolbar_shelf_folders>'+
-		'<div class=button id=button_new_folder><div class=button_img></div></div>'+
-		'<div class=button id=button_remove_folder><div class=button_img></div></div>'+
-		'<div class=button id=button_edit_folder><div class=button_img></div></div>'+
-	'</div>';
-var DefaultTheme = {
 	"ToolbarShow": true,
 	"ColorsSet": {},
 	"TabsSizeSetNumber": 2,
 	"TabsMargins": "2",
 	"theme_name": "untitled",
-	"theme_version": 3,
+	"theme_version": 4,
-	"toolbar": DefaultToolbar,
-	"unused_buttons": ""
 };
-var DefaultPreferences = {
+
+const DefaultPreferences = {
+	"hide_other_groups_tabs_firefox": false,
+	"show_toolbar": true,
 	"skip_load": false,
 	"pin_list_multi_row": true,
 	"always_show_close": false,
@@ -137,13 +93,12 @@ var DefaultPreferences = {
 	"midclick_group": "nothing",
 	"midclick_folder": "nothing",
 	"dbclick_folder": "rename_folder",
-	"debug": false
+	"debug": false,
-};
+	"orphaned_tabs_to_ungrouped": false,
-var theme = {
+	"tab_group_regexes": [],
-	"TabsSizeSetNumber": 2,
+	"move_tabs_on_url_change": "never",
-	"TabsMargins": "2",
+	"autosave_max_to_keep": 5,
-	"ToolbarShow": true,
+	"autosave_interval": 15
-	"toolbar": DefaultToolbar
 };
 
 // *******************             GLOBAL FUNCTIONS                 ************************
@@ -154,122 +109,13 @@ function GenerateRandomID(){
 	var random = ""; for (var letter = 0; letter < 6; letter++ ) {random += letters[Math.floor(Math.random() * letters.length)];} return random;
 }
 
-// color in format "rgb(r,g,b)" or simply "r,g,b" (can have spaces, but must contain "," between values)
-function RGBtoHex(color){
-	color = color.replace(/[rgb(]|\)|\s/g, ""); color = color.split(","); return color.map(function(v){ return ("0"+Math.min(Math.max(parseInt(v), 0), 255).toString(16)).slice(-2); }).join("");
-}
 
-function HexToRGB(hex, alpha){
+function GetCurrentPreferences(storage) {
-	hex = hex.replace('#', '');
+	opt = Object.assign({}, DefaultPreferences);
-	let r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
+	if (storage["preferences"]) {
-	let g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
+		for (var parameter in storage["preferences"]) {
-	let b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
+			if (opt[parameter] != undefined) {
-	if (alpha) { return 'rgba('+r+', '+g+', '+b+', '+alpha+')'; } else { return 'rgb('+r+', '+g+', '+b+')'; }
+				opt[parameter] = storage["preferences"][parameter];
-}
-
-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"]);
-	ApplyTabsMargins(theme["TabsMargins"]);
-	if (theme.ToolbarShow == true) {
-		SetToolbarEvents(true, false, false, "");
-		if (theme.theme_version == DefaultTheme.theme_version) {
-			document.getElementById("toolbar").innerHTML = theme.toolbar;
-			if (browserId == "F") {
-				document.querySelectorAll(".button#button_load_bak1, .button#button_load_bak2, .button#button_load_bak3").forEach(function(s){
-					s.parentNode.removeChild(s);
-				});
-			}
-		} else {
-			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 = "";
-		}
-	}
-	Loadi18n();
-}
-
-// theme colors is an object with css variables (but without --), for example; {"button_background": "#f2f2f2", "filter_box_border": "#cccccc"}
-function ApplyColorsSet(ThemeColors){
-	let css_variables = "";
-	for (let css_variable in ThemeColors) {
-		css_variables = css_variables + "--" + css_variable + ":" + ThemeColors[css_variable] + ";";
-	}
-	for (let si = 0; si < document.styleSheets.length; si++) {
-		if (document.styleSheets[si].ownerNode.id == "theme_colors") {
-			document.styleSheets[si].deleteRule(document.styleSheets[si].cssRules.length-1);
-			document.styleSheets[si].insertRule("body { "+css_variables+" }", document.styleSheets[si].cssRules.length);
-		}
-	}
-}
-
-function ApplySizeSet(size){
-	for (let si = 0; si < document.styleSheets.length; si++) {
-		if ((document.styleSheets[si].ownerNode.id).match("sizes_preset") != null) {
-			if (document.styleSheets[si].ownerNode.id == "sizes_preset_"+size) {
-				document.styleSheets.item(si).disabled = false;
-			} else {
-				document.styleSheets.item(si).disabled = true;
-			}
-		}
-	}
-	if (browserId == "F") {
-		// for some reason top position for various things is different in firefox?????
-		if (size > 1) {
-			document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: -1px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-		} else {
-			document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: 0px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
-		}
-	}
-}
-
-function ApplyTabsMargins(size){
-	for (let si = 0; si < document.styleSheets.length; si++) {
-		if ((document.styleSheets[si].ownerNode.id).match("tabs_margin") != null) {
-			if (document.styleSheets[si].ownerNode.id == "tabs_margin_"+size) {
-				document.styleSheets.item(si).disabled = false;
-			} else {
-				document.styleSheets.item(si).disabled = true;
 			}
 		}
 	}
@@ -279,59 +125,77 @@ function LoadDefaultPreferences() {
 	opt = Object.assign({}, DefaultPreferences);
 }
 
-function SavePreferences() {
+function GetCurrentTheme(storage) {
-	chrome.runtime.sendMessage({command: "save_preferences", opt: opt}, function(response) {
+	if (storage["current_theme"] && storage["themes"] && storage["themes"][storage["current_theme"]]) {
-		setTimeout(function() {
+		let theme = storage["themes"][storage["current_theme"]];
-			chrome.runtime.sendMessage({command: "reload_options"});
+		let correctedTheme = CheckTheme(theme);
-		}, 300);
+			if (correctedTheme.theme_version < 4 && storage["preferences"].show_toolbar == undefined) {
-	});
+				opt.show_toolbar = correctedTheme.ToolbarShow;
+				SavePreferences();
+			}
+		return correctedTheme;
+	} else {
+		return DefaultTheme;
+	}
 }
 
-function ShowOpenFileDialog(id, extension) {
+function GetCurrentToolbar(storage) {
+	if (storage["toolbar"]) {
+		return storage["toolbar"];
+	} else {
+		return DefaultToolbar;
+	}
+}
+
+function SavePreferences() {
+	chrome.storage.local.set({preferences: opt});
+	chrome.runtime.sendMessage({command: "reload_options", opt: opt});
+}
+
+function ShowOpenFileDialog(extension) {
 	let body = document.getElementById("body");
 	let inp = document.createElement("input");
-	inp.id = id;
+	inp.id = "file_import";
 	inp.type = "file";
 	inp.accept = extension;
 	inp.style.display = "none";
 	body.appendChild(inp);
-	inp.click();
+	setTimeout(function() {
+		inp.click();
+	}, 10);
 	return inp;
 }
 
-function SaveFile(filename, data) {
+function SaveFile(filename, extension, data) {
-	chrome.tabs.query({currentWindow: true, active: true}, function(activeTab) {
+	let file = new File([JSON.stringify(data)], filename+"."+extension, {type: "text/"+extension+";charset=utf-8"} );
-		chrome.tabs.create({url: "download.html"}, function(tab) {
+	let body = document.getElementById("body");
-			setTimeout(function() {
+	let savelink = document.createElement("a");
-				chrome.runtime.sendMessage({command: "show_save_file_dialog", currentTabId: activeTab[0].id, selfTabId: tab.id, data: data, filename: filename});
+	savelink.href = URL.createObjectURL(file);
-			}, 100);
+	savelink.fileSize = file.size;
-		});
+	savelink.target = "_blank";
-	});
+	savelink.style.display = "none";
+	savelink.type = "file";
+	savelink.download = filename+"."+extension;
+	body.appendChild(savelink);		
+	setTimeout(function() {
+		savelink.click();
+		setTimeout(function() {
+			savelink.parentNode.removeChild(savelink);
+		}, 60000);
+	}, 10);
 }
 
-// function SaveFile(filename, data) {
+function log(log) {
-	// let file = new File([JSON.stringify(data)], filename, {type: "text/csv;charset=utf-8"} );
+	if (opt.debug) {
-	// let body = document.getElementById("body");
+		chrome.runtime.sendMessage({command: "debug", log: log});
-	// 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() {
+function pushlog(log) {
-	DragAndDrop.timeout = false;
+	debug.push(log);
-	DragAndDrop.DragNodeClass = "";
+	if (debug.length > 100) {
-	DragAndDrop.DroppedToWindowId = 0;
+		debug.splice(0, 1);
-	DragAndDrop.ComesFromWindowId = undefined;
+	}
-	DragAndDrop.Depth = 0;
+	console.log(log);
-	DragAndDrop.TabsIds = [];
+	schedule_save++;
-	DragAndDrop.TabsIdsParents = [];
-	DragAndDrop.TabsIdsSelected = [];
-	DragAndDrop.Folders = {};
-	DragAndDrop.FoldersSelected = [];
 }

scripts/groups.js

@@ -9,6 +9,9 @@ function SaveGroups() {
 }
 
 function AppendGroups(Groups) {
+	if (opt.debug) {
+		log("f: AppendGroups, Groups: "+JSON.stringify(Groups));
+	}
 	// let GroupList = document.getElementById("group_list");
 	// let scroll = GroupList.scrollTop;
 
@@ -26,19 +29,18 @@ function AppendGroups(Groups) {
 }
 
 function RearrangeGroupsButtons(first_loop) {
+	if (opt.debug) {
+		log("f: RearrangeGroupsButtons");
+	}
 	document.querySelectorAll(".group_button").forEach(function(s){
 		let groupId = (s.id).substr(1);
 		if (bggroups[groupId]) {
 			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]);
+					InsterBeforeNode(s, s.parentNode.childNodes[bggroups[groupId].index]);
 				} else {
-					if (s.parentNode.childNodes[bggroups[groupId].index].nextSibling != null) {
+					InsterAfterNode(s, s.parentNode.childNodes[bggroups[groupId].index]);
-						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) {
@@ -50,6 +52,9 @@ function RearrangeGroupsButtons(first_loop) {
 }
 
 function RearrangeGroupsLists() {
+	if (opt.debug) {
+		log("f: RearrangeGroupsLists");
+	}
 	let activegroup = document.getElementById(active_group);
 	let scroll = activegroup.scrollTop;
 	let groups = document.getElementById("groups");
@@ -63,17 +68,25 @@ function RearrangeGroupsLists() {
 }
 
 function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
+	if (opt.debug) {
+		log("f: AppendGroupToList, groupId: "+groupId+", group_name: "+group_name+", font_color: "+font_color+", SetEvents: "+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) {
+			grp.onclick = function(event) {
-				event.stopImmediatePropagation();
 				if (event.which == 1 && event.target == this && event.clientX < (this.childNodes[0].getBoundingClientRect().width + this.getBoundingClientRect().left)) {
 					DeselectFolders();
 					DeselectTabs();
+				}
+			}
+			grp.onmousedown = function(event) {
+				event.stopImmediatePropagation();
+				if (event.which == 1 && event.target == this && event.clientX < (this.childNodes[0].getBoundingClientRect().width + this.getBoundingClientRect().left)) {
 					HideMenus();
+					return false;
 				}
 				if (event.which == 2) {
 					event.preventDefault();
@@ -83,11 +96,19 @@ function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
 					// SHOW MENU
 					ShowFGlobalMenu(event);
 				}
+				if (browserId == "V") {
+					chrome.windows.getCurrent({populate: false}, function(window) {
+						if (CurrentWindowId != window.id) {
+							location.reload();
+						}
+					});
+				}
 			}
-			grp.ondragenter = function(event) {
+			grp.ondragover = function(event) {
 				// PIN,TAB==>GROUP
-				if (event.target.id == this.id && (DragAndDrop.DragNodeClass == "tab" || DragAndDrop.DragNodeClass == "folder")) {
+				if (event.target.id == this.id && (DragNodeClass == "tab" || DragNodeClass == "folder")) {
-					HighlightNode(this);
+					RemoveHighlight();
+					this.classList.add("highlighted_drop_target");
 				}
 			}
 			// DOUBLE CLICK ACTION
@@ -106,7 +127,7 @@ function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
 	}
 
 	if (document.getElementById("_"+groupId) == null) {
-		let gbn = document.createElement("div"); gbn.className = "group_button"; gbn.id = "_"+groupId; document.getElementById("group_list").appendChild(gbn);
+		let gbn = document.createElement("div"); gbn.className = "group_button"; if (SetEvents) {gbn.draggable = true;} 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;
@@ -114,14 +135,12 @@ function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
 			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);
+		var di = document.createElement("div"); di.className = "drag_indicator"; di.id = "di"+groupId; gbn.appendChild(di); // DROP TARGET INDICATOR
-		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) {
+			gbn.onclick = function(event) {
 				SetActiveGroup(this.id.substr(1), true, true);
 			}
 			
@@ -134,49 +153,31 @@ function AppendGroupToList(groupId, group_name, font_color, SetEvents) {
 			}
 
 			// EDIT GROUP
-			gtd.ondblclick = function(event) {
+			gbn.ondblclick = function(event) {
-				if (event.which == 1 && this.id != "-tab_list") {
+				if (event.which == 1 && this.id != "_tab_list") {
 					ShowGroupEditWindow((this.id).substr(1));
 				}
 			}
 
 			// DRAGGING GROUPS
-			gtd.ondragstart = function(event) { // DRAG START
+			gbn.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("SourceWindowId", CurrentWindowId);
-				// event.dataTransfer.setData("TTSourceWindowId", CurrentWindowId);
 				CleanUpDragClasses();
 				EmptyDragAndDrop();
 
-				DragAndDrop.ComesFromWindowId = CurrentWindowId;
+				DragNodeClass = "group";
-				DragAndDrop.DragNodeClass = "group";
-				// DragAndDrop.DragNode = event.target.parentNode;
 				
-				this.parentNode.classList.add("dragged_group_button");
+				this.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") {
+			gbn.ondragover = function(event) {
-					HighlightNode(this);
+				GroupButtonDragOver(this, event);
-				}
-			}
-
-			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;
@@ -202,11 +203,59 @@ function GenerateNewGroupID(){
 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 : "")  };
+	if (opt.debug) {
+		log("f: AddNewGroup, groupId: "+newId+", Name: "+Name+", FontColor: "+FontColor);
+	}
 	AppendGroupToList(newId, bggroups[newId].name, bggroups[newId].font, true);
 	UpdateBgGroupsOrder();
 	return newId;
 }
 
+function FindGroupIdByName(name) {
+	if (opt.debug) {
+		log("f: FindGroupIdByName: "+name);
+	}
+	for (let key in bggroups) {
+		if (!bggroups.hasOwnProperty(key)) {
+			continue;
+		}
+		if (bggroups[key].name === name) {
+			return key;
+		}
+	}
+	return null;
+}
+
+function AppendTabToGroupOnRegexMatch(tabId, url) {
+	if (opt.debug) {
+		log("f: AppendTabToGroupOnRegexMatch, tabId: "+tabId+", url: "+url);
+	}
+	let Tab = document.getElementById(tabId);
+
+	if (Tab != null && Tab.classList.contains("tab")) {
+		let TabGroup = GetParentsByClass(Tab, "group");
+
+		for (let i = 0; i < opt.tab_group_regexes.length; i++) {
+			let regexPair = opt.tab_group_regexes[i];
+			if (url.match(regexPair[0])) {
+				let groupId = FindGroupIdByName(regexPair[1]);
+				if (groupId === null) {
+					groupId = AddNewGroup(regexPair[1]);
+				}
+				if (TabGroup.length > 0 && TabGroup[0].id !== groupId) {
+					let newParent = document.getElementById("ct" + groupId);
+					newParent.appendChild(Tab);
+					SetActiveGroup(groupId, true, true);
+					SetActiveTabInGroup(groupId, Tab.id);
+					chrome.tabs.update(tabId, { active: true });
+				}
+				break;
+			}
+		}
+	}
+
+}
+
 // remove group, delete tabs if close_tabs is true
 function GroupRemove(groupId, close_tabs) {
 	if (close_tabs) {
@@ -231,23 +280,25 @@ function GroupRemove(groupId, close_tabs) {
 		RefreshExpandStates();
 		RefreshCounters();
 	}
-	delete bggroups[groupId];
+	if (groupId != "tab_list") {
-	if (groupId == active_group) {
+		delete bggroups[groupId];
-		if (document.getElementById("_"+groupId).previousSibling) {
+		if (groupId == active_group) {
-			SetActiveGroup((document.getElementById("_"+groupId).previousSibling.id).substr(1), true, true);
+			if (document.getElementById("_"+groupId).previousSibling) {
-		} else {
+				SetActiveGroup((document.getElementById("_"+groupId).previousSibling.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);
+				if (document.getElementById("_"+groupId).nextSibling) {
+					SetActiveGroup((document.getElementById("_"+groupId).nextSibling.id).substr(1), true, true);
+				} else {
+					SetActiveGroup("tab_list", true, true);
+				}
 			}
 		}
+		let group = document.getElementById(groupId);
+		group.parentNode.removeChild(group);	
+		let groupButton = document.getElementById("_"+groupId);
+		groupButton.parentNode.removeChild(groupButton);	
 	}
 	SaveGroups();
-	let group = document.getElementById(groupId);
-	group.parentNode.removeChild(group);	
-	let groupButton = document.getElementById("_"+groupId);
-	groupButton.parentNode.removeChild(groupButton);	
 	schedule_update_data++;
 }
 
@@ -261,7 +312,9 @@ function UpdateBgGroupsOrder() {
 }
 
 function SetActiveGroup(groupId, switch_to_active_in_group, scroll_to_active) {
-	if (opt.debug) console.log("function: SetActiveGroup");
+	if (opt.debug) {
+		log("f: SetActiveGroup, groupId: "+groupId+", switch_to_active_in_group: "+switch_to_active_in_group+", scroll_to_active: "+scroll_to_active);
+	}
 	let group = document.getElementById(groupId);
 	if (group != null) {
 		active_group = groupId;
@@ -296,6 +349,20 @@ function SetActiveGroup(groupId, switch_to_active_in_group, scroll_to_active) {
 		chrome.runtime.sendMessage({command: "set_active_group", active_group: groupId, windowId: CurrentWindowId});
 		RefreshExpandStates();
 		RefreshCounters();
+		
+		if (browserId == "F" && opt.hide_other_groups_tabs_firefox) {
+			let HideTabIds = Array.prototype.map.call(document.querySelectorAll(".group:not([id='"+groupId+"']) .tab"), function(s){
+				return parseInt(s.id);
+			});
+			let ShowTabIds = Array.prototype.map.call(document.querySelectorAll("#"+groupId+" .tab"), function(s){
+				return parseInt(s.id);
+			});
+
+			browser.tabs.hide(HideTabIds);
+			browser.tabs.show(ShowTabIds);
+		}
+		
+		
 	}
 }
 
@@ -322,7 +389,8 @@ function ShowGroupEditWindow(groupId) {
 		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";
+		// groupEditDialog.style.left = "22px";
+		groupEditDialog.style.left = "";
 		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);
@@ -337,7 +405,7 @@ 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, "");
+		// 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");
@@ -387,7 +455,6 @@ function GroupsToolbarToggle() {
 }
 
 function ActionClickGroup(Node, bgOption) {
-	console.log(Node.id)
 	if (bgOption == "new_tab") {
 		if (Node.id == "pin_list") {
 			OpenNewTab(true, undefined);
@@ -399,7 +466,74 @@ function ActionClickGroup(Node, bgOption) {
 	if (bgOption == "activate_previous_active") {
 		chrome.tabs.update(parseInt(bggroups[active_group].prev_active_tab), {active: true});
 	}
+	if (bgOption == "undo_close_tab") {
+		chrome.sessions.getRecentlyClosed( null, function(sessions) {
+			if (sessions.length > 0) {
+				chrome.sessions.restore(null, function(restored) {});
+			}
+		});
+	}
 }
+
+
+
+
+// SET ACTIVE TAB FOR EACH GROUP
+function SetActiveTabInEachGroup() {
+	chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
+		SetActiveTab(tabs[0].id);
+		chrome.runtime.sendMessage({command: "get_active_group", windowId: CurrentWindowId}, function(response) {
+			if (response) {
+				SetActiveGroup(response, false, true);
+				for (var group in bggroups) {
+					let ActiveInGroup = document.querySelector("#"+group+" [id='"+bggroups[group].active_tab+"']");
+					if (ActiveInGroup != null) {
+						ActiveInGroup.classList.add("active_tab");
+					}
+				}
+				if (tabs[0].pinned) {
+					let ActiveTabinActiveGroup = document.querySelectorAll("#"+active_group+" .active_tab");
+					if (ActiveTabinActiveGroup != null) {
+						ActiveTabinActiveGroup.forEach(function(s){
+							s.classList.remove("active_tab");
+						});
+					}
+				}
+			} else {
+				SetActiveGroup("tab_list", false, true);
+			}
+		});
+	});
+}
+
+function GroupButtonDragOver(Node, event) {
+	if (Node.classList.contains("inside") == false && (DragNodeClass == "tab" || DragNodeClass == "folder")) {
+		RemoveHighlight();
+		Node.classList.remove("before");
+		Node.classList.remove("after");
+		Node.classList.add("inside");
+		Node.classList.add("highlighted_drop_target");
+	}
+	
+	if (Node.classList.contains("before") == false && event.layerY < Node.clientHeight/2 && DragNodeClass == "group") {
+		RemoveHighlight();
+		Node.classList.add("before");
+		Node.classList.remove("after");
+		Node.classList.remove("inside");
+		Node.classList.add("highlighted_drop_target");
+	}
+	
+	if (Node.classList.contains("after") == false && event.layerY > Node.clientHeight/2 && DragNodeClass == "group") {
+		RemoveHighlight();
+		Node.classList.remove("before");
+		Node.classList.add("after");
+		Node.classList.remove("inside");
+		Node.classList.add("highlighted_drop_target");
+	}
+}
+
+
+
 // function AppendTabsToGroup(p) {
 // }
 

scripts/manager.js

@@ -0,0 +1,373 @@
+// 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 OpenManagerWindow() {
+	HideRenameDialogs();
+
+	if (opt.debug) {
+		log("f: OpenManagerWindow");
+	}
+
+	chrome.storage.local.get(null, function(storage) {
+		let ManagerWindow = document.getElementById("manager_window");
+		ManagerWindow.style.display = "block";
+	
+		// ManagerWindow.style.top = document.getElementById("toolbar").getBoundingClientRect().height - 13 + "px";
+		ManagerWindow.style.top = "";
+		ManagerWindow.style.left = "";
+
+		let GroupList = document.getElementById("manager_window_groups_list");
+		while (GroupList.hasChildNodes()) {
+			GroupList.removeChild(GroupList.firstChild);
+		}
+
+		let SessionsList = document.getElementById("manager_window_sessions_list");
+		while (SessionsList.hasChildNodes()) {
+			SessionsList.removeChild(SessionsList.firstChild);
+		}
+
+		
+		if (storage.hibernated_groups != undefined) {
+			storage.hibernated_groups.forEach(function(hibernated_group){
+				AddGroupToManagerList(hibernated_group);
+			});
+		}
+		if (storage.saved_sessions != undefined) {
+			(storage.saved_sessions).forEach(function(saved_session){
+				AddSessionToManagerList(saved_session);
+			});
+		}
+		
+		ReAddSessionAutomaticToManagerList(storage);
+	});
+}
+
+
+
+function AddGroupToManagerList(hibernated_group) {
+	
+	let GroupList = document.getElementById("manager_window_groups_list");
+
+	let HibernatedGroupRow = document.createElement("li");
+	HibernatedGroupRow.classList = "hibernated_group_row"
+	GroupList.appendChild(HibernatedGroupRow);
+
+	let DeleteGroupIcon = document.createElement("div");
+	DeleteGroupIcon.classList = "manager_window_list_button delete_hibernated_group";
+	DeleteGroupIcon.title = chrome.i18n.getMessage("manager_window_delete_icon");
+	
+	DeleteGroupIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let hib_group = this.parentNode;
+			let HibernategGroupIndex = Array.from(hib_group.parentNode.children).indexOf(hib_group);
+			
+			chrome.storage.local.get(null, function(storage) {
+				let hibernated_groups = storage.hibernated_groups;
+				hibernated_groups.splice(HibernategGroupIndex, 1);
+				
+				chrome.storage.local.set({hibernated_groups: hibernated_groups});
+				hib_group.parentNode.removeChild(hib_group);
+				RefreshGUI();
+			});
+		}
+	}
+	HibernatedGroupRow.appendChild(DeleteGroupIcon);
+
+
+	let ExportGroupIcon = document.createElement("div");
+	ExportGroupIcon.classList = "manager_window_list_button export_hibernated_group";
+	ExportGroupIcon.title = chrome.i18n.getMessage("manager_window_savetofile_icon");
+	ExportGroupIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let HibernategGroupIndex = Array.from(this.parentNode.parentNode.children).indexOf(this.parentNode);
+			chrome.storage.local.get(null, function(storage) {
+				let filename = storage.hibernated_groups[HibernategGroupIndex].group.name == "" ? caption_noname_group : storage.hibernated_groups[HibernategGroupIndex].group.name;
+				SaveFile(filename, "tt_group", storage.hibernated_groups[HibernategGroupIndex]);
+			});
+		}
+	}
+	HibernatedGroupRow.appendChild(ExportGroupIcon);
+
+	let LoadGroupIcon = document.createElement("div");
+	LoadGroupIcon.classList = "manager_window_list_button load_hibernated_group";
+	LoadGroupIcon.title = chrome.i18n.getMessage("manager_window_load_icon");
+	LoadGroupIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let HibernategGroupIndex = Array.from(this.parentNode.parentNode.children).indexOf(this.parentNode);
+			chrome.storage.local.get(null, function(storage) {
+				RecreateGroup(storage.hibernated_groups[HibernategGroupIndex]);
+			});
+		}
+	}
+	HibernatedGroupRow.appendChild(LoadGroupIcon);
+
+
+	let name = document.createElement("div");
+	name.contentEditable = true;
+	name.textContent = hibernated_group.group.name;
+	name.classList = "manager_window_group_name text_input";
+	name.onkeydown = function(event) { return event.which != 13; }
+	name.oninput = function(event) {
+		// this.textContent = (this.textContent).replace(/\n/g,' ');
+		let hib_group_name = this.textContent;
+		let hib_group = this.parentNode;
+		let HibernategGroupIndex = Array.from(hib_group.parentNode.children).indexOf(hib_group);
+		chrome.storage.local.get(null, function(storage) {
+			let hibernated_groups = storage.hibernated_groups;
+			hibernated_groups[HibernategGroupIndex].group.name = hib_group_name;
+			chrome.storage.local.set({hibernated_groups: hibernated_groups});
+		});
+	}
+	HibernatedGroupRow.appendChild(name);
+	let tabsCounter = document.createElement("div");
+	tabsCounter.textContent = " - ("+ hibernated_group.tabs.length + ")";
+	tabsCounter.classList = "manager_window_group_name";
+	HibernatedGroupRow.appendChild(tabsCounter);
+	RefreshGUI();
+}
+
+
+
+function AddSessionToManagerList(saved_session) {
+	let SessionsList = document.getElementById("manager_window_sessions_list");
+
+	let SavedSessionRow = document.createElement("li");
+	SavedSessionRow.classList = "saved_session_row"
+	SessionsList.appendChild(SavedSessionRow);
+
+
+	let DeleteSessionIcon = document.createElement("div");
+	DeleteSessionIcon.classList = "manager_window_list_button delete_saved_session";
+	DeleteSessionIcon.title = chrome.i18n.getMessage("manager_window_delete_icon");
+	DeleteSessionIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let saved_session = this.parentNode;
+			let SessionIndex = Array.from(saved_session.parentNode.children).indexOf(saved_session);
+			chrome.storage.local.get(null, function(storage) {
+				let S_Sessions = storage.saved_sessions;
+				S_Sessions.splice(SessionIndex, 1);
+				chrome.storage.local.set({saved_sessions: S_Sessions});
+				saved_session.parentNode.removeChild(saved_session);
+				RefreshGUI();
+
+			});
+		}
+	}
+	SavedSessionRow.appendChild(DeleteSessionIcon);
+	
+
+	let ExportSessionIcon = document.createElement("div");
+	ExportSessionIcon.classList = "manager_window_list_button export_saved_session";
+	ExportSessionIcon.title = chrome.i18n.getMessage("manager_window_savetofile_icon");
+	ExportSessionIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let saved_session = this.parentNode;
+			let SessionIndex = Array.from(saved_session.parentNode.children).indexOf(saved_session);
+			chrome.storage.local.get(null, function(storage) {
+				let filename = storage.saved_sessions[SessionIndex].name == "" ? caption_noname_group : storage.saved_sessions[SessionIndex].name;
+				SaveFile(filename, "tt_session", storage.saved_sessions[SessionIndex].session);
+			});
+		}
+	}
+	SavedSessionRow.appendChild(ExportSessionIcon);
+
+
+	let LoadSessionIcon = document.createElement("div");
+	LoadSessionIcon.classList = "manager_window_list_button load_saved_session";
+	LoadSessionIcon.title = chrome.i18n.getMessage("manager_window_load_icon");
+	LoadSessionIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let saved_session = this.parentNode;
+			let SessionIndex = Array.from(saved_session.parentNode.children).indexOf(saved_session);
+			chrome.storage.local.get(null, function(storage) {
+				let S_Sessions = storage.saved_sessions;
+				RecreateSession(S_Sessions[SessionIndex].session);
+			});
+		}
+	}
+	SavedSessionRow.appendChild(LoadSessionIcon);
+
+	let MergeSessionIcon = document.createElement("div");
+	MergeSessionIcon.classList = "manager_window_list_button merge_saved_session";
+	MergeSessionIcon.title = chrome.i18n.getMessage("manager_window_merge_icon");
+	MergeSessionIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let saved_session = this.parentNode;
+			let SessionIndex = Array.from(saved_session.parentNode.children).indexOf(saved_session);
+			chrome.storage.local.get(null, function(storage) {
+				let S_Sessions = storage.saved_sessions;
+				ImportMergeTabs(S_Sessions[SessionIndex].session);
+			});
+		}
+	}
+	SavedSessionRow.appendChild(MergeSessionIcon);
+
+	let name = document.createElement("div");
+	name.contentEditable = true;
+	name.textContent = saved_session.name;
+	name.classList = "manager_window_session_name";
+	name.onkeydown = function(event) { return event.which != 13; }
+	name.oninput = function(event) {
+		// this.textContent = (this.textContent).replace(/\n/g,' ');
+		let session_name = this.textContent;
+		let s = this.parentNode;
+		let SessionIndex = Array.from(s.parentNode.children).indexOf(s);
+		chrome.storage.local.get(null, function(storage) {
+			let S_Sessions = storage.saved_sessions;
+			S_Sessions[SessionIndex].name = session_name;
+			chrome.storage.local.set({saved_sessions: S_Sessions});
+		});
+	}
+	SavedSessionRow.appendChild(name);
+
+	RefreshGUI();
+}
+
+
+function ReAddSessionAutomaticToManagerList(storage) {
+	let SessionsAutomaticList = document.getElementById("manager_window_autosessions_list");
+	while (SessionsAutomaticList.hasChildNodes()) {
+		SessionsAutomaticList.removeChild(SessionsAutomaticList.firstChild);
+	}
+	if (storage.saved_sessions_automatic != undefined) {
+		(storage.saved_sessions_automatic).forEach(function(saved_sessions_automatic){
+			AddSessionAutomaticToManagerList(saved_sessions_automatic);
+		});
+	}
+	RefreshGUI();
+}
+
+
+function AddSessionAutomaticToManagerList(saved_session) {
+	let SessionsList = document.getElementById("manager_window_autosessions_list");
+
+	let SavedSessionRow = document.createElement("li");
+	SavedSessionRow.classList = "saved_session_row"
+	SessionsList.appendChild(SavedSessionRow);
+
+
+	let LoadSessionIcon = document.createElement("div");
+	LoadSessionIcon.classList = "manager_window_list_button load_saved_session";
+	LoadSessionIcon.title = chrome.i18n.getMessage("manager_window_load_icon");
+	LoadSessionIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let saved_session = this.parentNode;
+			let SessionIndex = Array.from(saved_session.parentNode.children).indexOf(saved_session);
+			chrome.storage.local.get(null, function(storage) {
+				let S_Sessions = storage.saved_sessions_automatic;
+				RecreateSession(S_Sessions[SessionIndex].session);
+			});
+		}
+	}
+	SavedSessionRow.appendChild(LoadSessionIcon);
+
+	
+	let MergeSessionIcon = document.createElement("div");
+	MergeSessionIcon.classList = "manager_window_list_button merge_saved_session";
+	MergeSessionIcon.title = chrome.i18n.getMessage("manager_window_merge_icon");
+	MergeSessionIcon.onmousedown = function(event) {
+		if (event.which == 1) {
+			let saved_session = this.parentNode;
+			let SessionIndex = Array.from(saved_session.parentNode.children).indexOf(saved_session);
+			chrome.storage.local.get(null, function(storage) {
+				let S_Sessions = storage.saved_sessions_automatic;
+				// RecreateSession(S_Sessions[SessionIndex].session);
+				ImportMergeTabs(S_Sessions[SessionIndex].session);
+			});
+		}
+	}
+	SavedSessionRow.appendChild(MergeSessionIcon);
+
+	
+
+	let name = document.createElement("div");
+	name.textContent = saved_session.name;
+	name.classList = "manager_window_session_name";
+	SavedSessionRow.appendChild(name);
+
+	RefreshGUI();
+}
+
+
+function SetManagerEvents() {
+	document.getElementById("manager_window_close").onmousedown = function(event) {
+		if (event.which == 1) {
+			HideRenameDialogs();
+		}
+	}
+
+	document.querySelectorAll(".manager_window_toolbar_button").forEach(function(s){
+		s.onmousedown = function(event) {
+			if (event.which == 1) {
+				document.querySelectorAll(".manager_window_panel").forEach(function(s){
+					s.classList.remove("mw_pan_on");
+				});
+				document.getElementById((this.id).replace("button", "panel")).classList.add("mw_pan_on");
+
+				document.querySelectorAll(".mw_on").forEach(function(s){
+					s.classList.remove("mw_on");
+				});
+				this.classList.add("mw_on");
+				RefreshGUI();
+			}
+		}
+	});
+
+	
+	document.getElementById("manager_window_button_import_group").onmousedown = function(event) {
+		if (event.which == 1) {
+			let inputFile = ShowOpenFileDialog(".tt_group");
+			inputFile.onchange = function(event) {
+				ImportGroup(false, true);
+			}
+		}
+	}
+	document.getElementById("manager_window_button_hibernate_group").onmousedown = function(event) {
+		if (event.which == 1) {
+			ExportGroup(active_group, false, true);
+			setTimeout(function() {
+				GroupRemove(active_group, true);
+			}, 100);
+			setTimeout(function() {
+				OpenManagerWindow();
+			}, 150);
+		}
+	}
+
+	
+	document.getElementById("manager_window_button_save_current_session").onmousedown = function(event) {
+		if (event.which == 1) {
+			let d = new Date();
+			ExportSession((d.toLocaleString().replace("/", ".").replace("/", ".").replace(":", "꞉").replace(":", "꞉")), false, true, false);
+		}
+	}
+	document.getElementById("manager_window_button_import_session").onmousedown = function(event) {
+		if (event.which == 1) {
+			let inputFile = ShowOpenFileDialog(".tt_session");
+			inputFile.onchange = function(event) {
+				ImportSession(false, true, false);
+			}
+		}
+	}
+	
+
+	let autosessions_save_max_to_keep = document.getElementById("manager_window_autosessions_maximum_saves");
+	autosessions_save_max_to_keep.value = opt.autosave_max_to_keep;
+	autosessions_save_max_to_keep.oninput = function(event) {
+		opt.autosave_max_to_keep = parseInt(this.value);
+		SavePreferences();
+	}
+	
+
+	let autosessions_save_timer = document.getElementById("manager_window_autosessions_save_timer");
+	autosessions_save_timer.value = opt.autosave_interval;
+	autosessions_save_timer.oninput = function(event) {
+		opt.autosave_interval = parseInt(this.value);
+		SavePreferences();
+		clearInterval(AutoSaveSession);
+		StartAutoSaveSession();
+	}
+
+}

scripts/menu.js

@@ -9,6 +9,7 @@ function HideMenus() {
 	document.querySelectorAll(".menu").forEach(function(s){
 		s.style.top = "-1000px";
 		s.style.left = "-1000px";
+		s.style.display = "none";
 	});
 }
 
@@ -43,14 +44,14 @@ function ShowTabMenu(TabNode, event) {
 			document.getElementById("menu_close").style.display = "";
 		}
 
-		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){
+		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_manager_window, #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){
+		document.querySelectorAll("#menu_bookmark_tree, #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_manager_window, #menu_treetabs_settings").forEach(function(s){
 			s.style.display = "";
 		});
 
@@ -65,7 +66,7 @@ function ShowTabMenu(TabNode, event) {
 		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("#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 = "";
@@ -78,7 +79,7 @@ function ShowFolderMenu(FolderNode, event) {
 	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){
+	document.querySelectorAll("#menu_mute_tab, #menu_unmute_tab, #separator_unlo, #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, #menu_collapse_all, #menu_new_group, #separator_tts, #menu_manager_window, #menu_treetabs_settings").forEach(function(s){
 		s.style.display = "";
 	});
 
@@ -97,7 +98,7 @@ function ShowFGlobalMenu(event) {
 	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){
+	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_manager_window, #menu_treetabs_settings").forEach(function(s){
 		s.style.display = "";
 	});
 	ShowMenu(document.getElementById("main_menu"), event);
@@ -107,11 +108,11 @@ 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){
+	document.querySelectorAll("#menu_new_group, #menu_rename_group, #menu_delete_group, #menu_delete_group_tabs_close, #separator_gunlo, #menu_groups_unload, #separator_gbk, #separator_tts, #menu_bookmark_group, #separator_tts, #menu_groups_hibernate, #menu_manager_window, #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){
+		document.querySelectorAll("#menu_groups_hibernate, #menu_rename_group, #menu_delete_group, #menu_delete_group_tabs_close").forEach(function(s){
 			s.style.display = "none";
 		});
 	}
@@ -146,7 +147,7 @@ function SetMenu() {
 							if (menuItemNode.classList.contains("tab")) {
 								OpenNewTab(false, menuItemNode.id);
 							} else {
-								OpenNewTab();
+								OpenNewTab(false, active_group);
 							}
 						}
 					}
@@ -177,24 +178,10 @@ function SetMenu() {
 				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) {
+							DuplicateTab(s);
-								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) {
+						DuplicateTab(menuItemNode);
-							setTimeout(function() {
-								let tb = document.getElementById(tab.id);
-								if (menuItemNode != null && tb != null) {
-									menuItemNode.parentNode.insertBefore(tb, menuItemNode);
-								}
-							}, 10);
-						});
 					}
 					HideMenus();
 				}
@@ -210,8 +197,8 @@ function SetMenu() {
 						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) {
+							if (s.childNodes[1].childNodes.length > 0) {
-								document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+								document.querySelectorAll("#"+s.childNodes[1].id+" .tab").forEach(function(t){
 									tabsArr.push(parseInt(t.id));
 								});
 							}
@@ -250,8 +237,8 @@ function SetMenu() {
 							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) {
+								if (s.childNodes[1].childNodes.length > 0) {
-									document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+									document.querySelectorAll("#"+s.childNodes[1].id+" .tab").forEach(function(t){
 										tabsArr.push(parseInt(t.id));
 									});
 								}
@@ -281,8 +268,8 @@ function SetMenu() {
 						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) {
+							if (s.childNodes[1].childNodes.length > 0) {
-								document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+								document.querySelectorAll("#"+s.childNodes[1].id+" .tab").forEach(function(t){
 									tabsArr.push(parseInt(t.id));
 								});
 							}
@@ -428,17 +415,17 @@ function SetMenu() {
 				if (event.which == 1) {
 					event.stopPropagation();
 					if (menuItemNode.classList.contains("folder")) {
-						AddNewFolder(menuItemNode.id, undefined, undefined, undefined);
+						AddNewFolder(undefined, menuItemNode.id, undefined, undefined, undefined, undefined, true);
 					} else {
 						if (menuItemNode.classList.contains("tab")) {
 							let folders = GetParentsByClass(menuItemNode, "folder");
 							if (folders.length > 0) {
-								AddNewFolder(folders[0].id, undefined, undefined, undefined);
+								AddNewFolder(undefined, folders[0].id, undefined, undefined, undefined, undefined, true);
 							} else {
-								AddNewFolder();
+								AddNewFolder(undefined, undefined, undefined, undefined, undefined, undefined, true);
 							}
 						} else {
-							AddNewFolder();
+							AddNewFolder(undefined, undefined, undefined, undefined, undefined, undefined, true);
 						}
 					}
 					HideMenus();
@@ -514,8 +501,8 @@ function SetMenu() {
 					let tabsArr = [];
 					document.querySelectorAll("[id='"+menuItemNode.id+"'] .tab, [id='"+menuItemNode.id+"']").forEach(function(s){
 						tabsArr.push(parseInt(s.id));
-						if (s.childNodes[4].childNodes.length > 0) {
+						if (s.childNodes[1].childNodes.length > 0) {
-							document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+							document.querySelectorAll("#"+s.childNodes[1].id+" .tab").forEach(function(t){
 								tabsArr.push(parseInt(t.id));
 							});
 						}
@@ -624,7 +611,7 @@ function SetMenu() {
 		}
 
 
-		if (m.id == "groups_menu_unload") {
+		if (m.id == "menu_groups_unload") {
 			m.onmousedown = function(event) {
 				if (event.which == 1) {
 					event.stopPropagation();
@@ -638,6 +625,29 @@ function SetMenu() {
 			}				
 		}
 
+		if (m.id == "menu_manager_window") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					OpenManagerWindow();
+					HideMenus();
+				}
+			}				
+		}
+
+		if (m.id == "menu_groups_hibernate") {
+			m.onmousedown = function(event) {
+				if (event.which == 1) {
+					event.stopPropagation();
+					ExportGroup(menuItemNode.id, false, true);
+					HideMenus();
+					setTimeout(function() {
+						GroupRemove(menuItemNode.id, true);
+					}, 100);
+				}
+			}				
+		}
+
 
 		if (m.id == "menu_bookmark_group") {
 			m.onmousedown = function(event) {

scripts/refresh.js

@@ -4,8 +4,9 @@
 
 // **********          REFRESH GUI          ***************
 
-function RefreshGUI() {
+async function RefreshGUI() {
 	let toolbar = document.getElementById("toolbar");
+	let toolbarHeight = 27;
 	if (toolbar.children.length > 0) {
 		toolbar.style.height = "";
 		toolbar.style.width = "";
@@ -14,21 +15,27 @@ function RefreshGUI() {
 		toolbar.style.padding = "";
 		if (document.querySelector(".on.button") != null) {
 			toolbar.style.height = "53px";
+			toolbarHeight = 54;
 		} else {
 			toolbar.style.height = "26px";
 		}
 	} else {
 		toolbar.style.height = "0px";
+		toolbarHeight = 0;
 		toolbar.style.width = "0px";
 		toolbar.style.display = "none";
 		toolbar.style.border = "none";
 		toolbar.style.padding = "0";
 	}
+	
+	let group_list = document.getElementById("group_list");
+	group_list.style.width = document.body.clientWidth + 50 + "px";
+	
 	let pin_list = document.getElementById("pin_list");
 	if (pin_list.children.length > 0) {
-		pin_list.style.top = toolbar.getBoundingClientRect().height + "px";
+		pin_list.style.top = toolbarHeight + "px";
 		pin_list.style.height = "";
-		pin_list.style.width = document.body.clientWidth + "px";;
+		pin_list.style.width = "";
 		pin_list.style.display = "";
 		pin_list.style.border = "";
 		pin_list.style.padding = "";
@@ -40,9 +47,13 @@ function RefreshGUI() {
 		pin_list.style.border = "none";
 		pin_list.style.padding = "0";
 	}
+	let pin_listHeight = pin_list.getBoundingClientRect().height;
+
 	let toolbar_groups = document.getElementById("toolbar_groups");
-	toolbar_groups.style.top = toolbar.getBoundingClientRect().height + pin_list.getBoundingClientRect().height + "px";
+	toolbar_groups.style.top = toolbarHeight + pin_listHeight + "px";
-	toolbar_groups.style.height = document.body.clientHeight - toolbar.getBoundingClientRect().height - pin_list.getBoundingClientRect().height + "px";
+	toolbar_groups.style.height = document.body.clientHeight - toolbarHeight - pin_listHeight + "px";
+	let toolbar_groupsWidth = toolbar_groups.getBoundingClientRect().width;
+
 	if (opt.show_counter_groups) {
 		document.querySelectorAll(".group").forEach(function(s){
 			let groupLabel = document.getElementById("_gte"+s.id);
@@ -62,10 +73,64 @@ function RefreshGUI() {
 		s.style.height = s.firstChild.getBoundingClientRect().height + "px";
 	});
 	let groups = document.getElementById("groups");
-	groups.style.top = toolbar.getBoundingClientRect().height + pin_list.getBoundingClientRect().height + "px";
+	let groupsHeight = document.body.clientHeight - toolbarHeight - pin_listHeight;
-	groups.style.left = toolbar_groups.getBoundingClientRect().width + "px";
+
-	groups.style.height = document.body.clientHeight - pin_list.getBoundingClientRect().height - toolbar.getBoundingClientRect().height + "px";
+	groups.style.top = toolbarHeight + pin_listHeight + "px";
-	groups.style.width = document.body.clientWidth - toolbar_groups.getBoundingClientRect().width + 1 + "px";
+	groups.style.left = toolbar_groupsWidth + "px";
+	groups.style.height = groupsHeight + "px";
+	groups.style.width = (document.body.clientWidth - toolbar_groupsWidth - 1) + "px";
+
+	
+	// let total = ManagerWindowGroupsListHeight + ManagerWindowSessionsListHeight;
+	// if (total > document.body.clientHeight - 200) {
+		// let cut = (total - (document.body.clientHeight - 200))/2;
+		// ManagerWindowGroupsList.style.height = ManagerWindowGroupsListHeight - cut + "px";
+		// ManagerWindowSessionsList.style.height = ManagerWindowSessionsListHeight - cut + "px";
+	// } else {
+		// ManagerWindowGroupsList.style.height = ManagerWindowGroupsListHeight + "px";
+		// ManagerWindowSessionsList.style.height = ManagerWindowSessionsListHeight + "px";
+	// }
+	// ManagerWindow.style.height = ManagerWindowGroupsList.clientHeight + ManagerWindowSessionsList.clientHeight + 300 + "px";
+
+
+	
+	
+	let PanelList = document.querySelector(".mw_pan_on>.manager_window_list");
+	let PanelListHeight = 3 + PanelList.children.length * 18;
+	
+	let ManagerWindowPanelButtons = document.querySelector(".mw_pan_on>.manager_window_panel_buttons");
+	let ManagerWindowPanelButtonsHeight = ManagerWindowPanelButtons.clientHeight;
+	
+	let MaxAllowedHeight = document.body.clientHeight - 140;
+
+	
+	if (PanelListHeight + ManagerWindowPanelButtonsHeight < MaxAllowedHeight) {
+		PanelList.style.height = PanelListHeight + "px";
+	} else {
+		PanelList.style.height = MaxAllowedHeight - ManagerWindowPanelButtonsHeight + "px";
+	}
+	
+	// if (ManagerWindowSessionsListHeight > document.body.clientHeight - 300) {
+		// ManagerWindowSessionsList.style.height = document.body.clientHeight - 300 + "px";
+	// } else {
+		// ManagerWindowSessionsList.style.height = ManagerWindowSessionsListHeight + "px";
+	// }
+	
+	
+	
+	let ManagerWindow = document.getElementById("manager_window");
+	// ManagerWindow.style.height = PanelListHeight.clientHeight + 700 + "px";
+	ManagerWindow.style.height = PanelList.clientHeight + ManagerWindowPanelButtonsHeight + 56 + "px";
+
+
+
+
+
+
+
+
+	
+	
 }
 
 // set discarded class
@@ -119,7 +184,7 @@ function RefreshMediaIcon(tabId) {
 // Vivaldi does not have changeInfo.audible listener, this is my own implementation, hopefully this will not affect performance too much
 function VivaldiRefreshMediaIcons() {
 	setInterval(function() {
-		chrome.tabs.query({currentWindow: true}, function(tabs) {
+		chrome.tabs.query({currentWindow: true, audible: true}, function(tabs) {
 			document.querySelectorAll(".audible, .muted").forEach(function(s){
 				s.classList.remove("audible");
 				s.classList.remove("muted");
@@ -134,17 +199,16 @@ function VivaldiRefreshMediaIcons() {
 				}
 			}
 		});
-	// }, 1400);
+	}, 2000);
-	}, 1000);
 }
 
-function GetFaviconAndTitle(tabId, addCounter) {
+async function GetFaviconAndTitle(tabId, addCounter) {
 	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 tHeader = t.childNodes[0];
 				let tTitle = tHeader.childNodes[1];
 				if (tab.status == "complete") {
 					t.classList.remove("loading");
@@ -193,9 +257,9 @@ function GetFaviconAndTitle(tabId, addCounter) {
 }
 
 // refresh open closed trees states
-function RefreshExpandStates() {
+async function RefreshExpandStates() {
 	document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
-		if (s.childNodes[4].children.length == 0 && s.childNodes[5].children.length == 0) {
+		if (s.childNodes[1].children.length == 0 && s.childNodes[2].children.length == 0) {
 			s.classList.remove("o");
 			s.classList.remove("c");
 		} else {
@@ -205,7 +269,7 @@ function RefreshExpandStates() {
 		}
 	});
 	document.querySelectorAll("#"+active_group+" .tab").forEach(function(s){
-		if (s.childNodes[4].children.length == 0) {
+		if (s.childNodes[1].children.length == 0) {
 			s.classList.remove("o");
 			s.classList.remove("c");
 		} else {
@@ -216,52 +280,53 @@ function RefreshExpandStates() {
 	});
 }
 
-function RefreshCounters() {
+async function RefreshCounters() {
 	if (opt.show_counter_tabs || opt.show_counter_tabs_hints) {
 		document.querySelectorAll("#"+active_group+" .tab").forEach(function(s){
-			let title = s.childNodes[3].getAttribute("tabTitle");
+			let title = s.childNodes[0].getAttribute("tabTitle");
 			if (title != null) {
-				s.childNodes[3].title = title;
+				s.childNodes[0].title = title;
-				s.childNodes[3].childNodes[1].textContent =title;
+				s.childNodes[0].childNodes[1].textContent =title;
 			}
 		});
 		document.querySelectorAll("#"+active_group+" .o.tab, #"+active_group+" .c.tab").forEach(function(s){
-			let title = s.childNodes[3].getAttribute("tabTitle");
+			let title = s.childNodes[0].getAttribute("tabTitle");
-
 			if (opt.show_counter_tabs && title != null) {
-				s.childNodes[3].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
+				s.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
 			}
 			if (opt.show_counter_tabs_hints) {
-				s.childNodes[3].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
+				s.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
 			}
 		});
 		
 		
 		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;
+				s.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + bgfolders[s.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;
+				s.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + bgfolders[s.id].name;
 			}
 		});
 	}
 }
 
-function RefreshTabCounter(tabId) {
+async function RefreshTabCounter(tabId) {
 	let t = document.getElementById(tabId);
-	let title = t.childNodes[3].getAttribute("tabTitle");
+	if (t.childNodes[0]) {
-	if (t != null && title != null) {
+		let title = t.childNodes[0].getAttribute("tabTitle");
-		if (t.classList.contains("o") || t.classList.contains("c")) {
+		if (t != null && title != null) {
-			if (opt.show_counter_tabs) {
+			if (t.classList.contains("o") || t.classList.contains("c")) {
-				t.childNodes[3].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
+				if (opt.show_counter_tabs) {
+					t.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
+				}
+				if (opt.show_counter_tabs_hints) {
+					t.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
+				}
+			} else {
+					t.childNodes[0].title = title;
+					t.childNodes[0].childNodes[1].textContent = title;
 			}
-			if (opt.show_counter_tabs_hints) {
-				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/tabs.js

@@ -4,17 +4,24 @@
 
 // **********       TABS FUNCTIONS          ***************
 
+
 async function UpdateData() {
+	if (opt.debug) {
+		log("f: UpdateData");
+	}
+	
 	setInterval(function() {
 		if (schedule_update_data > 1) {
 			schedule_update_data = 1;
 		}
 		if (schedule_update_data > 0) {
-			if (opt.debug) console.log("function: update tabs");
+			let PinInd = 0;
 			let pins_data = [];
 			document.querySelectorAll(".pin").forEach(function(pin){
-				pins_data.push({id: pin.id, index: Array.from(pin.parentNode.children).indexOf(pin)});
+				pins_data.push({id: pin.id, index: PinInd});
+				PinInd++;
 			});
+			
 			let tabs_data = [];
 			document.querySelectorAll(".tab").forEach(function(tab){
 				tabs_data.push({id: tab.id, parent: tab.parentNode.parentNode.id, index: Array.from(tab.parentNode.children).indexOf(tab), expand: (tab.classList.contains("c") ? "c" : (tab.classList.contains("o") ? "o" : ""))});
@@ -22,10 +29,13 @@ async function UpdateData() {
 			chrome.runtime.sendMessage({command: "update_all_tabs", pins: pins_data, tabs: tabs_data});
 			schedule_update_data--;
 		}
-	}, 1000);
+	}, 2000);
 }
 
 function RearrangeBrowserTabs() {
+	if (opt.debug) {
+		log("f: RearrangeBrowserTabs");
+	}
 	setInterval(function() {
 		if (schedule_rearrange_tabs > 0) {
 			schedule_rearrange_tabs--;
@@ -38,6 +48,9 @@ function RearrangeBrowserTabs() {
 }
 
 async function RearrangeBrowserTabsLoop(tabIds, tabIndex) {
+	if (opt.debug) {
+		log("f: RearrangeBrowserTabsLoop");
+	}
 	if (tabIndex >= 0 && schedule_rearrange_tabs == 0){
 		chrome.tabs.get(tabIds[tabIndex], function(tab) {
 			if (tab && tabIndex != tab.index) {
@@ -54,13 +67,9 @@ function RearrangeTreeTabs(tabs, bgtabs, first_loop) {
 		if (bgtabs[Tab.id] && t != null && t.parentNode.childNodes[bgtabs[Tab.id].index]) {
 			let tInd = Array.from(t.parentNode.children).indexOf(t);
 			if (tInd > bgtabs[Tab.id].index) {
-				t.parentNode.childNodes[bgtabs[Tab.id].index].parentNode.insertBefore(t, t.parentNode.childNodes[bgtabs[Tab.id].index]);
+				InsterBeforeNode(t, t.parentNode.childNodes[bgtabs[Tab.id].index]);
 			} else {
-				if (t.parentNode.childNodes[bgtabs[Tab.id].index].nextSibling != null) {
+				InsterAfterNode(t, t.parentNode.childNodes[bgtabs[Tab.id].index]);
-					t.parentNode.childNodes[bgtabs[Tab.id].index].parentNode.insertBefore(t, t.parentNode.childNodes[bgtabs[Tab.id].index].nextSibling);
-				} else {
-					t.parentNode.childNodes[bgtabs[Tab.id].index].parentNode.appendChild(t);
-				}				
 			}
 			let newtInd = Array.from(t.parentNode.children).indexOf(t);
 			if (bgtabs[Tab.id] && newtInd != bgtabs[Tab.id].index && first_loop) {
@@ -83,9 +92,6 @@ function AppendTab(tab, ParentId, InsertBeforeId, InsertAfterId, Append, Index,
 		ClassList = ClassList +" "+ AdditionalClass;
 	}
 	var tb = document.createElement("div"); tb.className =  ClassList; tb.id = tab.id; // TAB
-	var dc = document.createElement("div"); dc.className = "drop_target drag_enter_center"; dc.id = "dc"+tab.id; tb.appendChild(dc); // DROP TARGET CENTER
-	var du = document.createElement("div"); du.className = "drop_target drag_entered_top"; du.id = "du"+tab.id; tb.appendChild(du); // DROP TARGET TOP
-	var dd = document.createElement("div"); dd.className = "drop_target drag_entered_bottom"; dd.id = "dd"+tab.id; tb.appendChild(dd); // DROP TARGET BOTTOM
 	var th = document.createElement("div"); th.className = (opt.always_show_close && !opt.never_show_close) ? "tab_header close_show" : "tab_header"; th.id = "tab_header"+tab.id; if (SetEvents) {th.draggable = true;} tb.appendChild(th); // HEADER
 	var ex = document.createElement("div"); ex.className = "expand"; ex.id = "exp"+tab.id; th.appendChild(ex); // EXPAND ARROW
 	var tt = document.createElement("div"); tt.className = "tab_title"; tt.id = "tab_title"+tab.id; th.appendChild(tt); // TITLE
@@ -95,14 +101,17 @@ function AppendTab(tab, ParentId, InsertBeforeId, InsertAfterId, Append, Index,
 	}
 	var mi = document.createElement("div"); mi.className = "tab_mediaicon"; mi.id = "tab_mediaicon"+tab.id; th.appendChild(mi);
 	var ct = document.createElement("div"); ct.className = "children_tabs"; ct.id = "ct"+tab.id; tb.appendChild(ct);
+	var di = document.createElement("div"); di.className = "drag_indicator"; di.id = "di"+tab.id; tb.appendChild(di); // DROP TARGET INDICATOR
 	
 	if (SetEvents) {
+		ct.onclick = function(event) {
+			if (event.target == this && event.which == 1) {
+				DeselectFolders();
+				DeselectTabs();
+			}
+		}
 		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);
@@ -146,33 +155,34 @@ function AppendTab(tab, ParentId, InsertBeforeId, InsertAfterId, Append, Index,
 				this.classList.remove("close_hover");
 			}
 		}
-		tb.ondragenter = function(event) {
-			this.childNodes[1].style.zIndex = 99999;
-		}
-
 
 		th.onclick = function(event) {
 			event.stopImmediatePropagation();
 			if (document.getElementById("main_menu").style.top != "-1000px") {
 				HideMenus();
 			} else {
-				if (event.which == 1 && !event.shiftKey && !event.ctrlKey && (event.target.classList.contains("tab_title") || event.target.classList.contains("tab_header"))) {
+				if (event.which == 1 && !event.shiftKey && !event.ctrlKey && event.target.classList.contains("tab_header")) {
 					DeselectTabs();
-					// SetActiveTab(this.parentNode.id);
 					chrome.tabs.update(parseInt(this.parentNode.id), { active: true });
 				}
 			}
 		}
 		th.ondblclick = function(event) {
-			if (event.target.classList && (event.target.classList.contains("tab_title") || event.target.classList.contains("tab_header"))) {
+			if (event.target.classList && event.target.classList.contains("tab_header")) {
 				ActionClickTab(this.parentNode, opt.dbclick_tab);
 			}
 		}
 		
 		th.onmousedown = function(event) {
+			if (browserId == "V") {
+				chrome.windows.getCurrent({populate: false}, function(window) {
+					if (CurrentWindowId != window.id) {
+						location.reload();
+					}
+				});
+			}
 			event.stopImmediatePropagation();
 			if (event.which == 1) {
-				// SELECT TAB/PIN
 				EventSelectTab(event, this.parentNode);
 			}
 			if (event.which == 2) {
@@ -196,96 +206,29 @@ function AppendTab(tab, ParentId, InsertBeforeId, InsertAfterId, Append, Index,
 				this.classList.remove("close_show");
 			}
 		}
-		th.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();
+		th.ondragstart = function(event) { // DRAG START
-			EmptyDragAndDrop();
+			TabStartDrag(this.parentNode, event);
-			
-			DropTargetsFront(this, true, false);
-
-			if (this.parentNode.classList.contains("selected_tab") == false) {
-				document.querySelectorAll(".selected_tab").forEach(function(s){
-					s.classList.add("selected_frozen");
-					s.classList.remove("selected_tab");
-					s.classList.remove("selected_last");
-				});
-				this.parentNode.classList.add("selected_temporarly");
-				this.parentNode.classList.add("selected_tab");
-			} else {
-				document.querySelectorAll(".group:not(#"+active_group+") .selected_tab").forEach(function(s){
-					s.classList.add("selected_frozen");
-					s.classList.remove("selected_tab");
-					s.classList.remove("selected_last");
-				});
-			}
-			let Tabs = GetSelectedTabs();
-			
-			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) {
-				document.querySelectorAll(".dragged_tree .tab").forEach(function(s){
-					let parents = GetParentsByClass(s.parentNode, "dragged_tree");
-					if (parents.length > DragAndDrop.Depth) {
-						DragAndDrop.Depth = parents.length;
-					}
-				});
-			} else {
-				DragAndDrop.Depth = -1;
-			}
-			
-			DragAndDrop.TabsIds = Object.assign([], Tabs.TabsIds);
-			DragAndDrop.TabsIdsParents = Object.assign([], Tabs.TabsIdsParents);
-			DragAndDrop.TabsIdsSelected = Object.assign([], Tabs.TabsIdsSelected);
-			DragAndDrop.DragNodeClass = "tab";
-			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
-			});
 		}
 
+		
+		
 		th.ondragenter = function(event) {
 			this.classList.remove("tab_header_hover");
-		}		
+			DragOverTimer = false;
-		
-		dc.ondragenter = function(event) {
-			DragAndDrop.timeout = false;
 			setTimeout(function() {
-				DragAndDrop.timeout = true;
+				DragOverTimer = true;
 			}, 1000);
-			if (DragAndDrop.DragNodeClass == "tab") {
-				HighlightDragEnter(this, 0, "tab");
-			}
 		}
 
-		du.ondragenter = function(event) {
+		th.ondragleave = function(event) {
-			if (DragAndDrop.DragNodeClass == "tab") {
+			RemoveHighlight();
-				HighlightDragEnter(this, 1, "tab");
-			}
 		}
 
-		dd.ondragenter = function(event) {
+		th.ondragover = function(event) {
-			if (DragAndDrop.DragNodeClass == "tab") {
+			TabDragOver(this, event);
-				HighlightDragEnter(this, 1, "tab");
-			}
 		}
 
 		mi.onmousedown = function(event) {
@@ -333,11 +276,7 @@ function AppendTab(tab, ParentId, InsertBeforeId, InsertAfterId, Append, Index,
 		let After = document.getElementById(InsertAfterId);
 		if (After != null) {
 			if ((tab.pinned && After.classList.contains("pin")) || (tab.pinned == false && After.classList.contains("tab"))) {
-				if (After.nextSibling != null) {
+				InsterAfterNode(tb, After);
-					After.parentNode.insertBefore(tb, After.nextSibling);
-				} else {
-					After.parentNode.appendChild(tb);
-				}
 			}
 		}
 	}
@@ -359,6 +298,9 @@ function AppendTab(tab, ParentId, InsertBeforeId, InsertAfterId, Append, Index,
 }
 
 function RemoveTabFromList(tabId) {
+	if (opt.debug) {
+		log("f: RemoveTabFromList, tabId: "+tabId);
+	}
 	let tab = document.getElementById(tabId);
 	if (tab != null) {
 		tab.parentNode.removeChild(tab);
@@ -385,37 +327,53 @@ function SetTabClass(tabId, pin) {
 					tabs[i].remove("o");
 					tabs[i].remove("c");
 					tabs[i].classList.add("pin");
-					if(Tab.nextSibling != null) {
+					InsterAfterNode(tabs[i], Tab);
-						PinList.insertBefore(tabs[i], Tab.nextSibling);
-					} else {
-						PinList.appendChild(tabs[i]);
-					}
 					chrome.tabs.update(parseInt(tabs[i].id), {pinned: true});
 				}
 			}
-
+			chrome.tabs.update(parseInt(tabId), {pinned: true});
 		} else {
-			if (GroupList.childNodes.length > 0) { // flatten out children
+			if (Tab.parentNode.id == "pin_list") { // if coming from pin_list
-				GroupList.insertBefore(Tab, GroupList.childNodes[0]);
+				if (GroupList.childNodes.length > 0) {
-			} else {
+					GroupList.insertBefore(Tab, GroupList.childNodes[0]);
-				GroupList.appendChild(Tab);
+				} else {
+					GroupList.appendChild(Tab);
+				}
 			}
 			Tab.classList.remove("pin");
 			Tab.classList.remove("attention");
 			Tab.classList.add("tab");
 			RefreshExpandStates();
+			chrome.tabs.update(parseInt(tabId), {pinned: false});
 		}
-		chrome.tabs.update(parseInt(tabId), {pinned: pin});
 		RefreshGUI();
 	}
 }
+function SetMultiTabsClass(TabsIds, pin) {
+	TabsIds.forEach(function(tabId){
+		SetTabClass(tabId, pin);
+	});
+}
 
-function SetActiveTab(tabId) {
+function SetActiveTab(tabId, switchToGroup) {
+	if (opt.debug) {
+		log("f: SetActiveTab, tabId: "+tabId);
+	}
 	let Tab = document.getElementById(tabId);
 	if (Tab != null) {
+		let TabGroup = GetParentsByClass(Tab, "group");
+		if (TabGroup.length) {
+			if (Tab.classList.contains("tab")) {
+				SetActiveTabInGroup(TabGroup[0].id, tabId);
+			}
+			if (switchToGroup) {
+				SetActiveGroup(TabGroup[0].id, false, false); // not going to scroll, because mostly it's going to change to a new active in group AFTER switch, so we are not going to scroll to previous active tab
+			}
+		}
 		document.querySelectorAll(".selected_folder").forEach(function(s){
 			s.classList.remove("selected_folder");
 		});
+		// document.querySelectorAll(".pin, #"+active_group+" .tab"+(TabGroup.length ? ", #"+TabGroup[0].id+" .tab" : "")).forEach(function(s){
 		document.querySelectorAll(".pin, #"+active_group+" .tab").forEach(function(s){
 			s.classList.remove("active_tab");
 			s.classList.remove("selected_tab");
@@ -424,15 +382,10 @@ function SetActiveTab(tabId) {
 			s.classList.remove("selected_temporarly");
 			s.classList.remove("tab_header_hover");
 		});
-		document.querySelectorAll(".highlighted_drop_target").forEach(function(s){
+		RemoveHighlight();
-			s.classList.remove("highlighted_drop_target");
-		});
 		Tab.classList.remove("attention");
 		Tab.classList.add("active_tab");
 		ScrollToTab(tabId);
-		if (Tab.classList.contains("tab")) {
-			SetActiveTabInGroup(active_group, tabId);
-		}
 	}
 }
 
@@ -468,28 +421,36 @@ function ScrollToTab(tabId) {
 }
 
 function Detach(tabsIds, Folders) {
+	if (opt.debug) {
+		log("f: Detach");
+	}
 	chrome.windows.get(CurrentWindowId, {populate : true}, function(window) {
 		if (window.tabs.length == 1 || tabsIds.length == 0) {
 			return;
 		}
 		if (tabsIds.length == window.tabs.length) {
-			if (opt.debug) console.log("You are trying to detach all tabs! Skipping!");
+			if (opt.debug) {
+				log("You are trying to detach all tabs! Skipping!");
+			}
 			return;
 		}
+
+		let Indexes = [];
+		let Parents = [];
+		let Expands = [];
+		let NewIds = [];																	// MOZILLA BUG 1398272
+		let NewTabs = [];
+		let Ind = 0;
+
+		tabsIds.forEach(function(tabId) {
+			let tab = document.getElementById(tabId);
+			NewIds.push(tabId);															// MOZILLA BUG 1398272
+			Indexes.push(Array.from(tab.parentNode.children).indexOf(tab));
+			Parents.push(tab.parentNode.parentNode.id);
+			Expands.push( (tab.classList.contains("c") ? "c" : (tab.classList.contains("o") ? "o" : ""))  );
+		});
+
 		chrome.windows.create({tabId: tabsIds[0], state:window.state}, function(new_window) {
-			let Indexes = [];
-			let Parents = [];
-			let Expands = [];
-			let NewIds = [];																	// MOZILLA BUG 1398272
-			let NewTabs = [];
-			let Ind = 0;
-			tabsIds.forEach(function(tabId) {
-				let tab = document.getElementById(tabId);
-				NewIds.push(tabId);															// MOZILLA BUG 1398272
-				Indexes.push(Array.from(tab.parentNode.children).indexOf(tab));
-				Parents.push(tab.parentNode.parentNode.id);
-				Expands.push( (tab.classList.contains("c") ? "c" : (tab.classList.contains("o") ? "o" : ""))  );
-			});
 			tabsIds.forEach(function(tabId) {
 				chrome.tabs.move(tabId, {windowId: new_window.id, index:-1}, function(MovedTab) {
 					if (browserId == "F") {													// MOZILLA BUG 1398272
@@ -507,7 +468,9 @@ function Detach(tabsIds, Folders) {
 						// chrome.tabs.remove(new_window.tabs[0].id, null);
 						let Confirmations = 0;
 						let GiveUpLimit = 600;
-						if (opt.debug) console.log("Detach - Remote Append and Update Loop, waiting for confirmations after attach tabs");
+						if (opt.debug) {
+							log("Detach - Remote Append and Update Loop, waiting for confirmations after attach tabs");
+						}
 						var Append = setInterval(function() {
 							chrome.windows.get(new_window.id, function(confirm_new_window) {
 								chrome.runtime.sendMessage({command: "remote_update", groups: {}, folders: Folders, tabs: NewTabs, windowId: new_window.id}, function(response) {
@@ -516,7 +479,9 @@ function Detach(tabsIds, Folders) {
 									}
 								});
 								GiveUpLimit--;
-								if (opt.debug) console.log("Detach -> Attach in new window confirmed: "+Confirmations+" times. If sidebar is not open in new window this loop will give up in: "+GiveUpLimit+" seconds");
+								if (opt.debug) {
+									log("Detach -> Attach in new window confirmed: "+Confirmations+" times. If sidebar is not open in new window this loop will give up in: "+GiveUpLimit+" seconds");
+								}
 								if (Confirmations > 2 || GiveUpLimit < 0 || confirm_new_window == undefined) {
 									clearInterval(Append);
 								}
@@ -535,6 +500,15 @@ function Detach(tabsIds, Folders) {
 }
 
 function CloseTabs(tabsIds) {
+	if (opt.debug) {
+		log("f: CloseTabs, tabsIds are: "+JSON.stringify(tabsIds));
+	}
+	tabsIds.forEach(function(tabId) {
+		let Tab = document.getElementById(tabId);
+		if (Tab != null) {
+			Tab.classList.add("will_be_closed");
+		}
+	});
 	let activeTab = document.querySelector(".pin.active_tab, #"+active_group+" .tab.active_tab");
 	if (activeTab != null && tabsIds.indexOf(parseInt(activeTab.id)) != -1) {
 		SwitchActiveTabBeforeClose(active_group);
@@ -544,6 +518,7 @@ function CloseTabs(tabsIds) {
 		if (tab.classList.contains("pin") && opt.allow_pin_close) {
 			tab.parentNode.removeChild(tab);
 			chrome.tabs.update(tabId, {pinned: false});
+			RefreshGUI();
 		}
 		if (tabId == tabsIds[tabsIds.length-1]) {
 			setTimeout(function() {
@@ -570,33 +545,53 @@ function DiscardTabs(tabsIds) {
 }
 
 function SwitchActiveTabBeforeClose(ActiveGroupId) {
-	if (opt.debug) console.log("function: SwitchActiveTabBeforeClose");
+	if (opt.debug) {
+		log("f: SwitchActiveTabBeforeClose");
+	}
 	let activeGroup = document.getElementById(ActiveGroupId);
-	if (document.querySelectorAll("#"+ActiveGroupId+" .tab").length <= 1 && document.querySelector(".pin.active_tab") == null) {
+	
-		if (opt.after_closing_active_tab == "above" || opt.after_closing_active_tab == "above_seek_in_parent") {
+	if (document.querySelectorAll("#"+ActiveGroupId+" .tab").length <= 1 && document.querySelector(".pin.active_tab") == null) { // CHECK IF CLOSING LAST TAB IN ACTIVE GROUP
-			if (activeGroup.previousSibling != null) {
+		
-				if (document.querySelectorAll("#"+activeGroup.previousSibling.id+" .tab").length > 0) {
+		let pins = document.querySelectorAll(".pin");
-					SetActiveGroup(activeGroup.previousSibling.id, true, true);
+		
-				} else {
+		if (pins.length > 0) { // IF THERE ARE ANY PINNED TABS, ACTIVATE IT
-					SwitchActiveTabBeforeClose(activeGroup.previousSibling.id);
+			if (opt.debug) {
-					return;
+				log("available pin, switching to: "+pins[pins.length-1].id);
-				}
-			} else {
-				SetActiveGroup("tab_list", true, true);
 			}
-		} else {
+			chrome.tabs.update(parseInt(pins[pins.length-1].id), {active: true});
-			if (activeGroup.nextSibling != null) {
+			return;
-				if (document.querySelectorAll("#"+activeGroup.nextSibling.id+" .tab").length > 0) {
+		} else { // NO OTHER CHOICE BUT TO SEEK IN ANOTHER GROUP
-					SetActiveGroup(activeGroup.nextSibling.id, true, true);
+			
+			if (opt.after_closing_active_tab == "above" || opt.after_closing_active_tab == "above_seek_in_parent") {
+				if (activeGroup.previousSibling != null) {
+					if (document.querySelectorAll("#"+activeGroup.previousSibling.id+" .tab").length > 0) {
+						SetActiveGroup(activeGroup.previousSibling.id, true, true);
+					} else {
+						SwitchActiveTabBeforeClose(activeGroup.previousSibling.id);
+						return;
+					}
 				} else {
-					SwitchActiveTabBeforeClose(activeGroup.nextSibling.id);
+					SetActiveGroup("tab_list", true, true);
-					return;
 				}
 			} else {
-				SetActiveGroup("tab_list", true, true);
+				if (activeGroup.nextSibling != null) {
+					if (document.querySelectorAll("#"+activeGroup.nextSibling.id+" .tab").length > 0) {
+						SetActiveGroup(activeGroup.nextSibling.id, true, true);
+					} else {
+						SwitchActiveTabBeforeClose(activeGroup.nextSibling.id);
+						return;
+					}
+				} else {
+					SetActiveGroup("tab_list", true, true);
+				}
 			}
 		}
 	} else {
+		
+		if (opt.debug) {
+			log("available tabs in current group, switching option is: "+opt.after_closing_active_tab);
+		}
+		
 		if (opt.after_closing_active_tab == "above") {
 			ActivatePrevTab(true);
 		}
@@ -623,10 +618,13 @@ function ActivateNextTabBeforeClose() {
 			}
 		}
 	}
-	let activeTab = document.querySelector("#"+active_group+" .tab.active_tab");
+	
-	if (activeTab != null && document.querySelectorAll("#"+active_group+" .tab").length > 1) {
+	let will_be_closed = document.querySelectorAll("#"+active_group+" .will_be_closed");
-		if (opt.promote_children && activeTab.lastChild.firstChild != null) {
+	let activeTab = will_be_closed.length > 0 ? will_be_closed[will_be_closed.length-1] : document.querySelector("#"+active_group+" .tab.active_tab");
-			chrome.tabs.update(parseInt(activeTab.lastChild.firstChild.id), { active: true });
+	
+	if (activeTab != null && document.querySelectorAll("#"+active_group+" .tab:not(.will_be_closed)").length > 1) {
+		if (opt.promote_children && activeTab.childNodes[1].firstChild != null) {
+			chrome.tabs.update(parseInt(activeTab.childNodes[1].firstChild.id), { active: true });
 		} else {
 			if (activeTab.nextSibling != null) {
 				chrome.tabs.update(parseInt(activeTab.nextSibling.id), { active: true });
@@ -656,10 +654,13 @@ function ActivatePrevTabBeforeClose() {
 			}
 		}
 	}
-	let activeTab = document.querySelector("#"+active_group+" .tab.active_tab");
+
-	if (activeTab != null && document.querySelectorAll("#"+active_group+" .tab").length > 1) {
+	let will_be_closed = document.querySelectorAll("#"+active_group+" .will_be_closed");
-		if (opt.promote_children && activeTab.lastChild.firstChild != null) {
+	let activeTab = will_be_closed.length > 0 ? will_be_closed[0] : document.querySelector("#"+active_group+" .tab.active_tab");
-			chrome.tabs.update(parseInt(activeTab.lastChild.firstChild.id), { active: true });
+
+	if (activeTab != null && document.querySelectorAll("#"+active_group+" .tab:not(.will_be_closed)").length > 1) {
+		if (opt.promote_children && activeTab.childNodes[1].firstChild != null) {
+			chrome.tabs.update(parseInt(activeTab.childNodes[1].firstChild.id), { active: true });
 		} else {
 			if (activeTab.previousSibling != null) {
 				chrome.tabs.update(parseInt(activeTab.previousSibling.id), { active: true });
@@ -689,9 +690,12 @@ function ActivateNextTab(allow_reverse) {
 			}
 		}
 	}
-	let activeTab = document.querySelector("#"+active_group+" .tab.active_tab");
+
+	let will_be_closed = document.querySelectorAll("#"+active_group+" .will_be_closed");
+	let activeTab = will_be_closed.length > 0 ? will_be_closed[will_be_closed.length-1] : document.querySelector("#"+active_group+" .tab.active_tab");
+
 	if (activeTab != null && document.querySelectorAll("#"+active_group+" .tab").length > 1) {
-		let FirstChild = activeTab.lastChild.firstChild;
+		let FirstChild = activeTab.childNodes[1].firstChild;
 		if (FirstChild != null) {
 			chrome.tabs.update(parseInt(FirstChild.id), { active: true });
 		} else {
@@ -728,7 +732,10 @@ function ActivatePrevTab(allow_reverse) {
 			}
 		}
 	}
-	let activeTab = document.querySelector("#"+active_group+" .tab.active_tab");
+
+	let will_be_closed = document.querySelectorAll("#"+active_group+" .will_be_closed");
+	let activeTab = will_be_closed.length > 0 ? will_be_closed[0] : document.querySelector("#"+active_group+" .tab.active_tab");
+
 	if (activeTab != null && document.querySelectorAll("#"+active_group+" .tab").length > 1) {
 		let pSchildren = activeTab.previousSibling != null ? document.querySelectorAll("#ct"+activeTab.previousSibling.id+" .tab") : null;
 		if (activeTab.previousSibling != null && pSchildren.length > 0) {
@@ -749,6 +756,52 @@ function ActivatePrevTab(allow_reverse) {
 	}
 }
 
+
+function OpenNewTab(pin, parentId) {
+	if (pin) {
+		chrome.tabs.create({pinned: true}, function(tab) {
+			if (parentId) {
+				AppendTab(tab, "pin_list", false, parentId, true, false, true, false, false, true, false);
+				schedule_update_data++;
+			}
+			newTabUrl = tab.url;
+		});
+	} else {
+		chrome.tabs.create({}, function(tab) {
+			if (parentId) {
+				AppendTab(tab, parentId, false, false, (opt.append_orphan_tab == "top" ? false : true), false, true, false, false, true, false);
+				schedule_update_data++;
+			}
+			newTabUrl = tab.url;
+		});
+	}
+}
+
+function DuplicateTab(SourceTabNode) {
+	chrome.tabs.duplicate(parseInt(SourceTabNode.id), function(tab) {
+		let DupRetry = setInterval(function() {
+			let DupTab = document.getElementById(tab.id);
+			if (DupTab != null) {
+				if (browserId == "F" && tab.pinned) {
+					DupTab.classList.remove("tab");
+					DupTab.classList.add("pin");
+				}
+				InsterAfterNode(DupTab, SourceTabNode);
+				RefreshExpandStates();
+				schedule_update_data++;
+				RefreshCounters();
+				clearInterval(DupRetry);
+			}
+		}, 10);
+		setTimeout(function() {
+			if (DupRetry) {
+				clearInterval(DupRetry);
+			}
+		}, 500);
+	});
+
+}
+
 function DeselectTabs() {
 	document.querySelectorAll(".pin.selected_tab, #"+active_group+" .selected_tab").forEach(function(s){
 		s.classList.remove("selected_tab");
@@ -756,27 +809,8 @@ function DeselectTabs() {
 	});
 }
 
-function HighlightNode(Node) {
-		document.querySelectorAll(".highlighted_drop_target").forEach(function(s){
-			s.classList.remove("highlighted_drop_target");
-		});
-		Node.classList.add("highlighted_drop_target");
-}
 
-function HighlightDragEnter(Node, addDepth, Class) { // Class == "tab" or "folder"
+// TAB EVENTS
-	// PIN,TAB==>TAB OR PIN,TAB==>FOLDER
-	// AND AVOID ENTERING INSIDE OWN CHILDREN
-	if (Node.classList.contains("highlighted_drop_target") == false && Node.parentNode.classList.contains("dragged_tree") == false && Node.parentNode.classList.contains("dragged_selected") == false) {
-		if (opt.max_tree_depth >= 0 && DragAndDrop.Depth >= 0 && DragAndDrop.DragNodeClass == Class) {
-			let Parents = GetParentsByClass(Node, Class);
-			if ((Parents.length + DragAndDrop.Depth <= opt.max_tree_depth + addDepth) || (Node.parentNode.parentNode.parentNode.classList.contains("group") && Node.classList.contains("drag_enter_center") == false)) {
-				HighlightNode(Node);
-			}
-		} else {
-			HighlightNode(Node);
-		}
-	}
-}
 
 function EventExpandBox(Node) {
 	if (Node.classList.contains("o")) {
@@ -836,26 +870,6 @@ function EventExpandBox(Node) {
 	}
 }
 
-
-function OpenNewTab(pin, parentId) {
-	if (pin) {
-		chrome.tabs.create({pinned: true}, function(tab) {
-			if (parentId) {
-				AppendTab(tab, "pin_list", false, parentId, true, false, true, false, false, true, false);
-				schedule_update_data++;
-			}
-		});
-	} else {
-		chrome.tabs.create({}, function(tab) {
-			if (parentId) {
-				AppendTab(tab, parentId, false, false, (opt.append_orphan_tab == "top" ? false : true), false, true, false, false, true, false);
-				schedule_update_data++;
-			}
-		});
-	}
-}
-
-
 function EventSelectTab(event, TabNode) {
 	DeselectFolders();
 	if (event.shiftKey) { // SET SELECTION WITH SHIFT
@@ -911,6 +925,13 @@ function ActionClickTab(TabNode, bgOption) {
 			CloseTabs([parseInt(TabNode.id)]);
 		}
 	}
+	if (bgOption == "undo_close_tab") {
+		chrome.sessions.getRecentlyClosed( null, function(sessions) {
+			if (sessions.length > 0) {
+				chrome.sessions.restore(null, function(restored) {});
+			}
+		});
+	}
 	if (bgOption == "reload_tab") {
 		chrome.tabs.reload(parseInt(TabNode.id));
 	}
@@ -922,3 +943,124 @@ function ActionClickTab(TabNode, bgOption) {
 		chrome.tabs.update(parseInt(bggroups[active_group].prev_active_tab), {active: true});
 	}
 }
+
+
+
+
+
+function TabStartDrag(Node, event) {
+	event.stopPropagation();
+	event.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+	event.dataTransfer.setData("text", "");
+	event.dataTransfer.setData("SourceWindowId", CurrentWindowId);
+
+	CleanUpDragClasses();
+	EmptyDragAndDrop();
+
+	DragNodeClass = "tab";
+	
+	let TabsIds = [];
+	let TabsIdsParents = [];
+	let TabsIdsSelected = [];
+	
+	if (Node.classList.contains("selected_tab")) {
+		document.querySelectorAll(".group:not(#"+active_group+") .selected_tab").forEach(function(s){
+			s.classList.add("selected_frozen");
+			s.classList.remove("selected_tab");
+			s.classList.remove("selected_last");
+		});
+		document.querySelectorAll("#pin_list .selected_tab, .group#"+active_group+" .selected_tab").forEach(function(s){
+			TabsIdsSelected.push(parseInt(s.id));
+		});
+	} else {
+		FreezeSelected();
+		Node.classList.add("selected_temporarly");
+		Node.classList.add("selected_tab");
+		TabsIdsSelected.push(parseInt(Node.id));
+	}
+	
+	document.querySelectorAll("[id='"+Node.id+"'], [id='"+Node.id+"'] .tab").forEach(function(s){
+		s.classList.add("dragged_tree");
+	});
+
+	if (opt.max_tree_drag_drop) {
+		document.querySelectorAll(".dragged_tree .tab").forEach(function(s){
+			let parents = GetParentsByClass(s.parentNode, "dragged_tree");
+			if (parents.length > DragTreeDepth) {
+				DragTreeDepth = parents.length;
+			}
+		});
+	} else {
+		DragTreeDepth = -1;
+	}
+	
+	// REST OF SELECTED TABS THAT WILL BE DRAGGED
+	document.querySelectorAll(".selected_tab, .selected_tab .tab").forEach(function(s){
+		s.classList.add("dragged_tree");
+		TabsIds.push(parseInt(s.id));
+		TabsIdsParents.push(s.parentNode.id);
+	});
+
+	DragAndDropData = {TabsIds: TabsIds, TabsIdsParents: TabsIdsParents, TabsIdsSelected: TabsIdsSelected};
+	
+	event.dataTransfer.setData("TabsIds", JSON.stringify(TabsIds));
+	event.dataTransfer.setData("TabsIdsParents", JSON.stringify(TabsIdsParents));
+	event.dataTransfer.setData("TabsIdsSelected", JSON.stringify(TabsIdsSelected));
+	
+	chrome.runtime.sendMessage({
+		command: "drag_drop",
+		DragNodeClass: "tab",
+		DragTreeDepth: DragTreeDepth
+	});
+}
+
+function TabDragOver(Node, event) {
+	if (DragNodeClass == "tab" && Node.parentNode.classList.contains("dragged_tree") == false) {
+
+		if (Node.parentNode.classList.contains("pin")) {
+			if (Node.parentNode.classList.contains("before") == false && event.layerX < Node.clientWidth/2) {
+				RemoveHighlight();
+				Node.parentNode.classList.remove("after");
+				Node.parentNode.classList.add("before");
+				Node.parentNode.classList.add("highlighted_drop_target");
+			}
+			if (Node.parentNode.classList.contains("after") == false && event.layerX >= Node.clientWidth/2) {
+				RemoveHighlight();
+				Node.parentNode.classList.remove("before");
+				Node.parentNode.classList.add("after");
+				Node.parentNode.classList.add("highlighted_drop_target");
+			}
+		}
+		
+		if (Node.parentNode.classList.contains("tab")) {
+			let P = (GetParentsByClass(Node, "tab")).length + DragTreeDepth;
+			let PGroup = Node.parentNode.parentNode.parentNode.classList.contains("group");
+			
+			if (Node.parentNode.classList.contains("before") == false && event.layerY < Node.clientHeight/3 && (P <= opt.max_tree_depth+1 || opt.max_tree_depth<0 || PGroup || opt.max_tree_drag_drop == false)) {
+				RemoveHighlight();
+				Node.parentNode.classList.remove("inside");
+				Node.parentNode.classList.remove("after");
+				Node.parentNode.classList.add("before");
+				Node.parentNode.classList.add("highlighted_drop_target");
+			}
+			
+			
+			if (Node.parentNode.classList.contains("inside") == false && event.layerY > Node.clientHeight/3 && event.layerY <= 2*(Node.clientHeight/3) && (P <= opt.max_tree_depth || opt.max_tree_depth<0 || opt.max_tree_drag_drop == false)) {
+				RemoveHighlight();
+				Node.parentNode.classList.remove("before");
+				Node.parentNode.classList.remove("after");
+				Node.parentNode.classList.add("inside");
+				Node.parentNode.classList.add("highlighted_drop_target");
+			}
+			
+			
+			if (Node.parentNode.classList.contains("after") == false && Node.parentNode.classList.contains("o") == false && event.layerY > 2*(Node.clientHeight/3) && (P <= opt.max_tree_depth+1 || opt.max_tree_depth<0 || PGroup || opt.max_tree_drag_drop == false)) {
+				RemoveHighlight();
+				Node.parentNode.classList.remove("inside");
+				Node.parentNode.classList.remove("before");
+				Node.parentNode.classList.add("after");
+				Node.parentNode.classList.add("highlighted_drop_target");
+			}
+		}
+	}
+}

scripts/theme.js

@@ -0,0 +1,393 @@
+// Copyright (c) 2017 kroppy. All rights reserved.
+// Use of this source code is governed by a Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) license
+// that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
+
+
+function Loadi18n() {
+	// toolbar labels
+	document.querySelectorAll(".button, .manager_window_toolbar_button").forEach(function(s){
+		s.title = chrome.i18n.getMessage(s.id);
+	});
+	// menu labels and edit group dialog labels
+	document.querySelectorAll(".menu_item, .edit_dialog_button, #manager_window_header_title, .manager_window_label").forEach(function(s){
+		s.textContent = chrome.i18n.getMessage(s.id);
+	});
+}
+
+function RestorePinListRowSettings() {
+	plist = document.getElementById("pin_list");
+	if (opt.pin_list_multi_row) {
+		plist.style.whiteSpace = "normal";
+		plist.style.overflowX = "hidden";
+	} else {
+		plist.style.whiteSpace = "";
+		plist.style.overflowX = "";
+	}
+	RefreshGUI();
+}
+
+function ApplyTheme(theme) {
+	RestoreStateOfGroupsToolbar();
+	ApplySizeSet(theme["TabsSizeSetNumber"]);
+	ApplyColorsSet(theme["ColorsSet"]);
+	ApplyTabsMargins(theme["TabsMargins"]);
+	RefreshGUI();
+	
+	for (var groupId in bggroups) {
+		let groupTitle = document.getElementById("_gte"+groupId);
+		if (groupTitle != null && bggroups[groupId].font == "") {
+			groupTitle.style.color = "";
+		}
+	}
+	Loadi18n();
+}
+
+// theme colors is an object with css variables (but without --), for example; {"button_background": "#f2f2f2", "filter_box_border": "#cccccc"}
+function ApplyColorsSet(ThemeColors){
+	let css_variables = "";
+	for (let css_variable in ThemeColors) {
+		css_variables = css_variables + "--" + css_variable + ":" + ThemeColors[css_variable] + ";";
+	}
+	for (let si = 0; si < document.styleSheets.length; si++) {
+		if (document.styleSheets[si].ownerNode.id == "theme_colors") {
+			document.styleSheets[si].deleteRule(document.styleSheets[si].cssRules.length-1);
+			document.styleSheets[si].insertRule("body { "+css_variables+" }", document.styleSheets[si].cssRules.length);
+		}
+	}
+}
+
+function ApplySizeSet(size){
+	for (let si = 0; si < document.styleSheets.length; si++) {
+		if ((document.styleSheets[si].ownerNode.id).match("sizes_preset") != null) {
+			if (document.styleSheets[si].ownerNode.id == "sizes_preset_"+size) {
+				document.styleSheets.item(si).disabled = false;
+			} else {
+				document.styleSheets.item(si).disabled = true;
+			}
+		}
+	}
+	if (browserId == "F") {
+		// for some reason top position for various things is different in firefox?????
+		if (size > 1) {
+			document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: -1px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+		} else {
+			document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: 0px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+		}
+	}
+}
+
+function ApplyTabsMargins(size){
+	for (let si = 0; si < document.styleSheets.length; si++) {
+		if ((document.styleSheets[si].ownerNode.id).match("tabs_margin") != null) {
+			if (document.styleSheets[si].ownerNode.id == "tabs_margin_"+size) {
+				document.styleSheets.item(si).disabled = false;
+			} else {
+				document.styleSheets.item(si).disabled = true;
+			}
+		}
+	}
+}
+
+
+// OPTIONS PAGE
+function LoadTheme(ThemeId, reloadInSidebar) {
+	
+	document.querySelectorAll(".theme_buttons").forEach(function(s){
+		s.disabled = true;
+	});
+	
+	chrome.storage.local.set({current_theme: ThemeId}, function() {
+		chrome.storage.local.get(null, function(storage) {
+			SelectedTheme = Object.assign({}, GetCurrentTheme(storage));
+			setTimeout(function() {
+				document.getElementById("new_theme_name").value = SelectedTheme.theme_name;
+				setTimeout(function() {
+					// SetToolbarEvents(true, false, false, "");
+					RemoveToolbarEditEvents();
+					
+					ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
+					ApplyColorsSet(SelectedTheme["ColorsSet"]);
+					document.getElementById("_gtetab_list").style.color = "";
+					document.getElementById("_gtetab_list2").style.color = "";
+
+					if (SelectedTheme["TabsMargins"]) {
+						document.getElementById("tabs_margin_spacing")[SelectedTheme["TabsMargins"]].checked = true;
+						ApplyTabsMargins(SelectedTheme["TabsMargins"]);
+					} else {
+						document.getElementById("tabs_margin_spacing")["2"].checked = true;
+					}
+
+					if (reloadInSidebar) {
+						chrome.runtime.sendMessage({command: "reload_theme", ThemeId: ThemeId, theme: SelectedTheme});
+					}
+					
+					document.querySelectorAll(".theme_buttons").forEach(function(s){
+						s.disabled = false;
+					});
+
+				}, 200);
+			}, 200);
+		});
+	});
+}
+
+function SaveTheme(ThemeId) {
+	chrome.storage.local.get(null, function(storage) {
+		
+		SelectedTheme.theme_version = DefaultTheme.theme_version;
+		
+		let LSthemes = storage.themes ? Object.assign({}, storage.themes) : {};
+		
+		LSthemes[ThemeId] = Object.assign({}, SelectedTheme);
+
+		chrome.storage.local.set({themes: LSthemes});
+
+		chrome.runtime.sendMessage({command: "reload_theme", ThemeId: ThemeId, theme: SelectedTheme});
+		return SelectedTheme;
+	});
+}
+
+function AddNewTheme() {
+	
+	let ThemeId = GenerateRandomID() + GenerateRandomID();
+	let ThemeList = document.getElementById("theme_list");
+	let ThemeNameBox = document.getElementById("new_theme_name");
+	let NewName = ThemeNameBox.value;
+	
+	if (ThemeNameBox.value == "") {
+		alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
+		return;
+	}
+
+	SelectedTheme = Object.assign({}, DefaultTheme);
+	SelectedTheme["ColorsSet"] = {};
+
+	// let Names = [];
+	
+	// for (let i = 0; i < ThemeList.options.length; i++) {
+		// Names.push(ThemeList.options[i].text);
+	// }
+	
+	// while (Names.indexOf(NewName) != -1) {
+		// let matched = NewName.match(/\(\d+\)+/);
+		// if (matched != null && matched.length > 0) {
+			// NewName = NewName.replace(matched[0], ("(" + (parseInt(matched[0].match(/\d+/)[0]) + 1 ) + ")")         );
+		// } else {
+			// NewName = NewName + "(1)";
+		// }
+	// }
+	
+	ThemeNameBox.value = NewName;
+	SelectedTheme["theme_name"] = NewName;
+
+	themes.push(ThemeId);
+
+	let ThemeNameOption = document.createElement("option");
+	
+	ThemeNameOption.value = ThemeId;
+	ThemeNameOption.text = NewName;
+
+	ThemeList.add(ThemeNameOption);
+	ThemeList.selectedIndex = ThemeList.options.length-1;
+	
+	SaveTheme(ThemeId);
+	setTimeout(function() {
+		LoadTheme(ThemeId, true);
+	}, 50);
+	
+	chrome.storage.local.set({current_theme: ThemeId});
+	RefreshFields();	
+}
+
+function DeleteSelectedTheme() {
+	chrome.storage.local.get(null, function(storage) {
+		let LSthemes = storage.themes ? Object.assign({}, storage.themes) : {};
+		
+		let ThemeList = document.getElementById("theme_list");
+		
+		themes.splice(ThemeList.selectedIndex, 1);
+		if (LSthemes[current_theme]) {
+			delete LSthemes[current_theme];
+		}
+		chrome.storage.local.set({themes: LSthemes});
+		
+		ThemeList.remove(ThemeList.selectedIndex);
+	
+		current_theme = (ThemeList.options.length > 0) ? ThemeList.value : "default";
+		
+		
+		chrome.storage.local.set({current_theme: current_theme});
+		
+		if (ThemeList.options.length == 0) {
+			current_theme = "";
+			SelectedTheme = Object.assign({}, DefaultTheme);
+			SelectedTheme["ColorsSet"] = {};
+			chrome.storage.local.set({themes: {}});
+			setTimeout(function() {
+				chrome.runtime.sendMessage({command: "reload_theme", themeName: "", theme: SelectedTheme});
+			}, 500);
+		}
+		LoadTheme(current_theme, true);
+		RefreshFields();
+	});
+}
+
+function RenameSelectedTheme() {
+	let ThemeList = document.getElementById("theme_list");
+	let ThemeNameBox = document.getElementById("new_theme_name");
+
+	// for (let i = 0; i < ThemeList.options.length; i++) {
+		// if (ThemeNameBox.value == ThemeList.options[i].text){
+			// alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
+			// return;
+		// }
+	// }
+	
+	if (ThemeNameBox.value == "") {
+		alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
+		return;
+	}
+	
+	
+	chrome.storage.local.get(null, function(storage) {
+		let LSthemes = storage.themes ? Object.assign({}, storage.themes) : {};
+		ThemeList.options[ThemeList.selectedIndex].text = ThemeNameBox.value;
+		SelectedTheme["theme_name"] = ThemeNameBox.value;
+		LSthemes[current_theme]["theme_name"] = ThemeNameBox.value;
+		chrome.storage.local.set({themes: LSthemes});
+		chrome.storage.local.set({current_theme: current_theme});
+	});
+}
+
+
+
+function CheckTheme(theme) {
+	if (theme.theme_version < 2) {
+		theme["ColorsSet"]["scrollbar_height"] = theme.ScrollbarPinList + "px";
+		theme["ColorsSet"]["scrollbar_width"] = theme.ScrollbarTabList + "px";
+	}
+	if (theme["TabsMargins"] == undefined) {
+		theme["TabsMargins"] = "2";
+	}
+	if (theme.theme_version < 4) {
+		delete theme["ColorsSet"]["active_font_weight"];
+		delete theme["ColorsSet"]["expand_lines"];
+		delete theme["ColorsSet"]["expand_open_border"];
+		delete theme["ColorsSet"]["expand_closed_border"];
+		
+		if (theme["ColorsSet"]["toolbar_background"]) {
+			theme["ColorsSet"]["toolbar_shelf_background"] = theme["ColorsSet"]["toolbar_background"];
+			theme["ColorsSet"]["button_on_background"] = theme["ColorsSet"]["toolbar_background"];
+		}
+		if (theme["ColorsSet"]["button_icons"]) {
+			theme["ColorsSet"]["button_on_icons"] = theme["ColorsSet"]["button_icons"];
+			theme["ColorsSet"]["button_shelf_icons"] = theme["ColorsSet"]["button_icons"];
+		}
+		if (theme["ColorsSet"]["button_background"]) {
+			theme["ColorsSet"]["button_shelf_background"] = theme["ColorsSet"]["button_background"];
+		}
+		if (theme["ColorsSet"]["button_hover_background"]) {
+			theme["ColorsSet"]["button_shelf_hover_background"] = theme["ColorsSet"]["button_hover_background"];
+		}
+		if (theme["ColorsSet"]["button_border"]) {
+			theme["ColorsSet"]["button_shelf_border"] = theme["ColorsSet"]["button_border"];
+		}
+		if (theme["ColorsSet"]["button_hover_border"]) {
+			theme["ColorsSet"]["button_shelf_hover_border"] = theme["ColorsSet"]["button_hover_border"];
+		}
+		if (theme["ColorsSet"]["button_icons_hover"]) {
+			theme["ColorsSet"]["button_shelf_icons_hover"] = theme["ColorsSet"]["button_icons_hover"];
+		}
+		
+		if (theme["ColorsSet"]["expand_hover_background"]) {
+			theme["ColorsSet"]["folder_icon_hover"] = theme["ColorsSet"]["expand_hover_background"];
+		}
+		if (theme["ColorsSet"]["expand_closed_background"]) {
+			theme["ColorsSet"]["folder_icon_closed"] = theme["ColorsSet"]["expand_closed_background"];
+		}
+		if (theme["ColorsSet"]["expand_open_background"]) {
+			theme["ColorsSet"]["folder_icon_open"] = theme["ColorsSet"]["expand_open_background"];
+		}
+	}
+		
+	return theme;
+}
+
+
+
+function ImportTheme() {
+	var file = document.getElementById("file_import");
+	var fr = new FileReader();
+	if (file.files[0] == undefined) return;
+	fr.readAsText(file.files[0]);
+	fr.onload = function() {
+		var data = fr.result;
+		file.parentNode.removeChild(file);
+
+		var themeObj = JSON.parse(data);
+
+		if (themeObj.theme_version > DefaultTheme["theme_version"]) {
+			alert(chrome.i18n.getMessage("options_loaded_theme_newer_version"));
+		}
+		if (themeObj.theme_version < DefaultTheme["theme_version"]) {
+			alert(chrome.i18n.getMessage("options_loaded_theme_older_version"));
+		}
+
+		if (themeObj.theme_version <= DefaultTheme["theme_version"]) {
+			let ThemeList = document.getElementById("theme_list");
+			let ThemeId = GenerateRandomID() + GenerateRandomID();
+			let correctedTheme = CheckTheme(themeObj);
+			
+			SelectedTheme = Object.assign({}, DefaultTheme);
+
+			for (var val in correctedTheme.ColorsSet) {
+				SelectedTheme["ColorsSet"][val] = correctedTheme.ColorsSet[val];
+			}
+			
+			SelectedTheme["TabsSizeSetNumber"] = correctedTheme.TabsSizeSetNumber;
+			SelectedTheme["TabsMargins"] = correctedTheme["TabsMargins"];
+			SelectedTheme["theme_version"] = DefaultTheme["theme_version"];
+			
+			// let Names = [];
+			// for (let i = 0; i < ThemeList.options.length; i++) {
+				// Names.push(ThemeList.options[i].text);
+			// }
+			
+			// if (Names.indexOf(correctedTheme.theme_name) == -1) {
+				SelectedTheme["theme_name"] = correctedTheme.theme_name;
+			// } else {
+				// let NewName = correctedTheme.theme_name;
+				// while (Names.indexOf(NewName) != -1) {
+					// let matched = NewName.match(/\(\d+\)+/);
+					// if (matched != null && matched.length > 0) {
+						// NewName = NewName.replace(matched[0], ("(" + (parseInt(matched[0].match(/\d+/)[0]) + 1 ) + ")")         );
+					// } else {
+						// NewName = NewName + "(1)";
+					// }
+				// }
+				// SelectedTheme["theme_name"] = NewName;
+			// }
+			
+			themes.push(ThemeId);
+			SaveTheme(ThemeId);
+			
+			var theme_name = document.createElement("option");
+			
+			theme_name.value = ThemeId;
+			theme_name.text = SelectedTheme["theme_name"];
+			
+			ThemeList.add(theme_name);
+			ThemeList.selectedIndex = ThemeList.options.length-1;
+			
+			current_theme = ThemeId;
+			document.createElement("new_theme_name").value = ThemeId;
+			
+			setTimeout(function() {
+				LoadTheme(ThemeId, true);
+			}, 500);
+			RefreshFields();
+			DefaultTheme["ColorsSet"] = {};
+			chrome.storage.local.set({current_theme: ThemeId});
+		}
+	}	 
+}

scripts/toolbar.js

@@ -113,7 +113,122 @@ function ShelfToggle(mousebutton, button, toolbarId, SendMessage) {
 	}
 }
 
-// ASSIGN MOUSE EVENTS FOR TOOLBAR BUTTONS, Buttons AND ToolbarShelfToggle, PARAMETERS DECIDE IF BUTTONS ARE CLICKABLE
+function RemoveToolbar() {
+	let toolbar = document.getElementById("toolbar");
+	while(toolbar.hasChildNodes()) {
+		toolbar.removeChild(toolbar.firstChild);
+	}
+}
+
+function RecreateToolbar(NewToolbar) {
+	let toolbar = document.getElementById("toolbar");
+	
+	for (var shelf in NewToolbar) {
+		let NewShelf = document.createElement("div");
+		NewShelf.id = shelf;
+		NewShelf.classList = "toolbar_shelf";
+		toolbar.appendChild(NewShelf);
+		
+		NewToolbar[shelf].forEach(function(button){
+			let Newbutton = document.createElement("div");
+			Newbutton.id = button;
+			Newbutton.classList = "button";
+			
+			NewShelf.appendChild(Newbutton);
+			
+			let NewbuttonIMG = document.createElement("div");
+			NewbuttonIMG.classList = "button_img";
+			Newbutton.appendChild(NewbuttonIMG);
+			
+		});
+		
+	}
+	
+	let toolbar_main = document.getElementById("toolbar_main");
+	let SearchShelf = document.getElementById("toolbar_search");
+
+	if (toolbar_main != null && SearchShelf != null) {
+		toolbar_main.classList.remove("toolbar_shelf");
+		
+		let SearchBox = document.createElement("div");
+		SearchBox.id = "toolbar_search_input_box";
+		SearchShelf.appendChild(SearchBox);
+		
+		let SearchInput = document.createElement("input");
+		SearchInput.classList = "text_input";
+		SearchInput.id = "filter_box";
+		SearchInput.type = "text";
+		SearchInput.placeholder = caption_searchbox;
+		SearchBox.appendChild(SearchInput);
+		
+		let ClearX = document.createElement("div");
+		ClearX.id = "button_filter_clear";
+		ClearX.type = "reset";
+		ClearX.style.opacity = "0";
+		ClearX.style.position = "absolute";
+		SearchBox.appendChild(ClearX);
+		
+		let SearchButtons = document.createElement("div");
+		SearchButtons.id = "toolbar_search_buttons";
+		SearchShelf.appendChild(SearchButtons);
+
+		let FilterType = document.getElementById("button_filter_type");
+		SearchButtons.appendChild(FilterType);
+		
+		let GoPrev = document.getElementById("filter_search_go_prev");
+		SearchButtons.appendChild(GoPrev);
+		
+		let GoNext = document.getElementById("filter_search_go_next");
+		SearchButtons.appendChild(GoNext);
+
+		Loadi18n();
+	}
+
+}
+
+function RecreateToolbarUnusedButtons(buttonsIds) {
+	let unused_buttons = document.getElementById("toolbar_unused_buttons");
+
+	buttonsIds.forEach(function(button){
+		let Newbutton = document.createElement("div");
+		Newbutton.id = button;
+		Newbutton.classList = "button";
+		unused_buttons.appendChild(Newbutton);
+		let NewbuttonIMG = document.createElement("div");
+		NewbuttonIMG.classList = "button_img";
+		Newbutton.appendChild(NewbuttonIMG);
+		
+	});
+}
+
+
+
+function SaveToolbar() {
+	let unused_buttons = [];
+	let toolbar = {};
+	
+	let u = document.querySelectorAll("#toolbar_unused_buttons .button");
+	u.forEach(function(b){
+		unused_buttons.push(b.id);
+	});
+
+	let t = document.getElementById("toolbar");
+	t.childNodes.forEach(function(s){
+		toolbar[s.id] = [];
+		let t = document.querySelectorAll("#"+s.id+" .button").forEach(function(b){
+			toolbar[s.id].push(b.id);
+		});
+	});
+
+	chrome.storage.local.set({toolbar: toolbar});
+	chrome.storage.local.set({unused_buttons: unused_buttons});
+	setTimeout(function() {
+		chrome.runtime.sendMessage({command: "reload_toolbar", toolbar: toolbar, opt: opt});
+	}, 50);
+}
+
+
+// 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) {
 
@@ -193,7 +308,7 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_new") {
 				s.onclick = function(event) {
 					if (event.which == 1) {
-						OpenNewTab();
+						OpenNewTab(false, active_group);
 					}
 				}
 				s.onmousedown = function(event) {
@@ -202,26 +317,21 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 						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) {
+							DuplicateTab(activeTab);
-								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;
+						chrome.tabs.query({currentWindow: true, active: true}, function(activeTab) {
-						if (activeTab != null) {
+							if (activeTab[0].pinned && opt.pin_list_multi_row == false) {
-							ScrollToTab(activeTab.id);
+								ScrollToTab(activeTab[0].id);
-						}
+							}
+							if (activeTab[0].pinned == false) {
+								let Tab = document.getElementById(activeTab[0].id);
+								let groupId = GetParentsByClass(Tab, "group")[0].id;
+								SetActiveGroup(groupId, true, true);
+							}
+						});
 					}
 				}
 			}
@@ -269,8 +379,8 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 							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) {
+								if (s.childNodes[1].childNodes.length > 0) {
-									document.querySelectorAll("#"+s.childNodes[4].id+" .tab").forEach(function(t){
+									document.querySelectorAll("#"+s.childNodes[1].id+" .tab").forEach(function(t){
 										tabsArr.push(parseInt(t.id));
 									});
 								}
@@ -281,15 +391,6 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 				}
 			}
 
-			// 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) {
@@ -331,7 +432,26 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 					}
 				}
 			}
-				
+
+			// SHOW/HIDE GROUPS TOOLBAR
+			if (s.id == "button_groups_toolbar_hide") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						GroupsToolbarToggle();
+					}
+				}
+			}
+
+			// SHOW GROUP MANAGER
+			if (s.id == "button_manager_window") {
+				s.onmousedown = function(event) {
+					if (event.which == 1 && document.getElementById("manager_window").style.top == "-500px") {
+						OpenManagerWindow();
+					} else {
+						HideRenameDialogs();
+					}
+				}
+			}
 			// NEW GROUP
 			if (s.id == "button_new_group") {
 				s.onmousedown = function(event) {
@@ -369,7 +489,7 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_export_group") {
 				s.onmousedown = function(event) {
 					if (event.which == 1) {
-						ExportGroup(bggroups[active_group].name+".tt_group");
+						ExportGroup(active_group, bggroups[active_group].name+".tt_group", false);
 					}
 				}
 			}
@@ -378,10 +498,9 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_import_group") {
 				s.onmousedown = function(event) {
 					if (event.which == 1) {
-						let inputFile = ShowOpenFileDialog("file_import_group", ".tt_group");
+						let inputFile = ShowOpenFileDialog(".tt_group");
 						inputFile.onchange = function(event) {
-							ImportGroup();
+							ImportGroup(true, false);
-							// this.parentNode.removeChild(this);
 						}
 					}
 				}
@@ -391,7 +510,7 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_new_folder") {
 				s.onmousedown = function(event) {
 					if (event.which == 1) {
-						AddNewFolder();
+						AddNewFolder(undefined, undefined, undefined, undefined, undefined, undefined, true);
 					}
 				}
 			}
@@ -440,10 +559,9 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_import_bak") {
 				s.onmousedown = function(event) {
 					if (event.which == 1) {
-						let inputFile = ShowOpenFileDialog("file_import_backup", ".tt_session");
+						let inputFile = ShowOpenFileDialog(".tt_session");
 						inputFile.onchange = function(event) {
-							ImportSession();
+							ImportSession(true, false, false);
-							// this.remove();
 						}
 					}
 				}
@@ -452,7 +570,8 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_export_bak") {
 				s.onmousedown = function(event) {
 					if (event.which == 1) {
-						ExportSession("Session.tt_session");
+						let d = new Date();
+						ExportSession((d.toLocaleString().replace("/", ".").replace("/", ".").replace(":", "꞉").replace(":", "꞉"))+".tt_session", true, false, false);
 					}
 				}
 			}
@@ -460,10 +579,10 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 			if (s.id == "button_import_merge_bak") {
 				s.onmousedown = function(event) {
 					if (event.which == 1) {
-						let inputFile = ShowOpenFileDialog("file_import_merge_backup", ".tt_session");
+						let inputFile = ShowOpenFileDialog(".tt_session");
 						inputFile.onchange = function(event) {
-							ImportMergeTabs();
+							ImportSession(false, false, true);
-							// this.remove();
+							// ImportMergeTabs();
 						}						
 					}
 				}
@@ -486,6 +605,17 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 					}
 				}
 			}
+
+			// EMERGENCY RELOAD
+			if (s.id == "button_reboot") {
+				s.onmousedown = function(event) {
+					if (event.which == 1) {
+						chrome.runtime.sendMessage({command: "reload"});
+						chrome.runtime.sendMessage({command: "reload_sidebar"});
+						location.reload();
+					}
+				}
+			}
 			
 			// SORT TABS
 			// if (s.id == "button_sort") {
@@ -556,18 +686,15 @@ function SetToolbarEvents(CleanPreviousBindings, Buttons, ToolbarShelfToggle, To
 					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) {
+							chrome.storage.local.get(null, function(storage) {
-								if (Object.keys(items["windows_BAK"+BakN]).length > 0) { chrome.storage.local.set({"windows": items["windows_BAK"+BakN]}); }
+								if (Object.keys(storage["windows_BAK"+BakN]).length > 0) { chrome.storage.local.set({"windows": storage["windows_BAK"+BakN]}); }
-								if (Object.keys(items["tabs_BAK"+BakN]).length > 0) { chrome.storage.local.set({"tabs": items["tabs_BAK"+BakN]}); alert("Loaded backup"); }
+								if (Object.keys(storage["tabs_BAK"+BakN]).length > 0) { chrome.storage.local.set({"tabs": storage["tabs_BAK"+BakN]}); alert("Loaded backup"); }
 								chrome.runtime.sendMessage({command: "reload"}); chrome.runtime.sendMessage({command: "reload_sidebar"}); location.reload();
 							});
 						}
 					}
 				}
-				
-				
 			}
-		
 		}
 
 	});

scripts/utils.js

@@ -3,6 +3,82 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 
+function RecheckFirefox() {
+	chrome.tabs.query({pinned: false, currentWindow: true}, function(tabs) {
+		let last_tabId = tabs[tabs.length-1].id;
+		let p = [];
+		let p_tt = [];
+		let t_ref = {};
+		let t_ind = 0;
+		let ok = 0;
+		let ti = 0;
+		let tc = tabs.length;
+		for (ti = 0; ti < tc; ti++) {
+			let tabId = tabs[ti].id;
+			p.push("");
+			p_tt.push("");
+			let t = Promise.resolve(browser.sessions.getTabValue(tabId, "TTdata")).then(function(TabData) {
+				if (TabData != undefined) {
+					t_ref[TabData.ttid] = tabs[t_ind].id;
+					p_tt[t_ind] = TabData.parent_ttid;
+					p[t_ind] = TabData.parent;
+				}
+				t_ind++;
+				if (tabId == last_tabId) {
+					let i = 0;
+					for (i = 0; i < p.length; i++) {
+						if (t_ref[p_tt[i]]) {
+							p[i] = t_ref[p_tt[i]];
+						}						
+					}
+					for (i = 0; i < p.length; i++) {
+						let Tab = document.getElementById(tabs[i].id);
+						if (Tab && p[i] == Tab.parentNode.parentNode.id) {
+							ok++;
+						}
+					}
+					if (ok < tabs.length*0.5) {
+						if (opt.debug) {
+							log("emergency reload");
+						}
+						chrome.storage.local.set({emergency_reload: true});
+						chrome.runtime.sendMessage({command: "reload"});
+						chrome.runtime.sendMessage({command: "reload_sidebar"});
+						location.reload();
+					} else {
+						if (opt.debug) {
+							log("f: RecheckFirefox, ok");
+						}
+					}
+				}
+			});
+		}
+	});
+}
+
+
+function AppendToNode(Node, AppendNode) {
+	if (Node != null && AppendNode != null) {
+		AppendNode.appendChild(Node);
+	}
+}
+
+function InsterBeforeNode(Node, BeforeNode) {
+	if (Node != null && BeforeNode != null) {
+		BeforeNode.parentNode.insertBefore(Node, BeforeNode);
+	}
+}
+
+function InsterAfterNode(Node, AfterNode) {
+	if (Node != null && AfterNode != null) {
+		if (AfterNode.nextSibling != null) {
+			AfterNode.parentNode.insertBefore(Node, AfterNode.nextSibling);
+		} else {
+			AfterNode.parentNode.appendChild(Node);
+		}
+	}
+}
+
 function HideRenameDialogs() {
 	document.querySelectorAll(".edit_dialog").forEach(function(s){
 		s.style.display = "none";
@@ -33,9 +109,25 @@ function GetParentsBy2Classes(Node, ClassA, ClassB) {
 	return Parents;
 }
 
+// color in format "rgb(r,g,b)" or simply "r,g,b" (can have spaces, but must contain "," between values)
+function RGBtoHex(color){
+	color = color.replace(/[rgb(]|\)|\s/g, ""); color = color.split(","); return color.map(function(v){ return ("0"+Math.min(Math.max(parseInt(v), 0), 255).toString(16)).slice(-2); }).join("");
+}
+
+function HexToRGB(hex, alpha){
+	hex = hex.replace('#', '');
+	let r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
+	let g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
+	let b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
+	if (alpha) { return 'rgba('+r+', '+g+', '+b+', '+alpha+')'; } else { return 'rgb('+r+', '+g+', '+b+')'; }
+}
 
 function GetSelectedFolders() {
-	if (opt.debug) console.log("function: GetSelectedFolders");
+	
+	if (opt.debug) {
+		log("f: GetSelectedFolders");
+	}
+	
 	let res = {Folders: {}, FoldersSelected: [], TabsIds: [], TabsIdsParents: []};
 	document.querySelectorAll("#"+active_group+" .selected_folder").forEach(function(s){
 		res.FoldersSelected.push(s.id);
@@ -50,12 +142,10 @@ function GetSelectedFolders() {
 			res.TabsIdsParents.push(tc.parentNode.id);
 		});
 	});
-	if (opt.debug) console.log(res);
 	return res;
 }
 
 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){
@@ -77,7 +167,6 @@ function GetSelectedTabs() {
 			res.TabsIdsParents.push(tc.parentNode.id);
 		});
 	});
-	if (opt.debug) console.log(res);
 	return res;
 }
 

sidebar.html

@@ -30,6 +30,7 @@
 
 		<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="../theme/theme_manager.css" id="manager" />
 	</head>
 	<body id="body" class="sidebar_body">
 
@@ -50,7 +51,7 @@
 		<input type="color" id="color_picker" style="position:absolute; left:-1000px; top:-1000px; width:1px; height:1px; overflow:hidden;">
 
 		<ul class="edit_dialog" id="group_edit">
-			<input class="edit_dialog_edit_name" id="group_edit_name" type="text"></input>
+			<input class="edit_dialog_edit_name text_input" id="group_edit_name" type="text"></input>
 			<div class="group_edit_color" id="group_edit_font"></div>
 			<br>
 			<div class="edit_dialog_discard" id="group_edit_discard"><span class="edit_dialog_button" id="group_edit_button_cancel"></span></div>
@@ -58,12 +59,59 @@
 		</ul>
 		
 		<ul class="edit_dialog" id="folder_edit">
-			<input class="edit_dialog_edit_name" id="folder_edit_name" type="text"></input>
+			<input class="edit_dialog_edit_name text_input" id="folder_edit_name" type="text"></input>
 			<br>
 			<div class="edit_dialog_discard" id="folder_edit_discard"><span class="edit_dialog_button" id="folder_edit_button_cancel"></span></div>
 			<div class="edit_dialog_confirm" id="folder_edit_confirm"><span class="edit_dialog_button" id="folder_edit_button_confirm"></span></div>
 		</ul>
 	
+		<ul class="edit_dialog" id="manager_window">
+			<div id="manager_window_header"><div id="manager_window_header_title"></div><div id="manager_window_close"><div class="close_img"></div></div></div>
+			
+			<div id="manager_window_toolbar">
+				<div class="manager_window_toolbar_button mw_on" id="manager_window_groups_button"> 
+					<div class="manager_window_toolbar_button_img"></div>
+				</div>
+				<div class="manager_window_toolbar_button" id="manager_window_sessions_button">
+					<div class="manager_window_toolbar_button_img"></div>
+				</div>
+				<div class="manager_window_toolbar_button" id="manager_window_autosave_button">
+					<div class="manager_window_toolbar_button_img"></div>
+				</div>
+			</div>
+
+
+			<div class="manager_window_panel mw_pan_on" id="manager_window_groups_panel">
+				<div class="manager_window_panel_buttons">
+					<div class="edit_dialog_confirm" id="manager_window_button_import_group"><span class="edit_dialog_button" id="manager_window_button_label_import_group"></span></div>
+					<div class="edit_dialog_confirm" id="manager_window_button_hibernate_group"><span class="edit_dialog_button" id="manager_window_button_label_hibernate_group"></span></div>
+				</div>
+				<div class="manager_window_list" id="manager_window_groups_list"></div>
+			</div>
+
+			<div class="manager_window_panel" id="manager_window_sessions_panel">
+				<div class="manager_window_panel_buttons">
+					<div class="edit_dialog_confirm" id="manager_window_button_import_session"><span class="edit_dialog_button" id="manager_window_button_label_import_session"></span></div>
+					<div class="edit_dialog_confirm" id="manager_window_button_save_current_session"><span class="edit_dialog_button" id="manager_window_button_label_save_current_session"></span></div>
+				</div>
+				<div class="manager_window_list" id="manager_window_sessions_list"></div>
+			</div>
+			
+			<div class="manager_window_panel" id="manager_window_autosave_panel">
+				<div class="manager_window_panel_buttons">
+						<span class="manager_window_label" id="manager_window_autosessions_maximum_saves_label"></span>
+						<br>
+						<input class="input_number" type="number" min="0" max="99999" step="1" id="manager_window_autosessions_maximum_saves"></input>
+						<br>
+						<span class="manager_window_label" id="manager_window_autosessions_save_timer_label"></span>
+						<br>
+						<input class="input_number" type="number" min="0" max="99999" step="1" id="manager_window_autosessions_save_timer"></input>
+				</div>
+				<div class="manager_window_list" id="manager_window_autosessions_list"></div>
+			</div>
+			
+		</ul>
+	
 		<ul class="menu" id="main_menu">
 			<li class="menu_item" id="menu_new_pin"></li>
 			<div class="separator" id="separator_newt"></div>
@@ -125,10 +173,13 @@
 			<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>
+			<li class="menu_item" id="menu_groups_unload"></li>
+			<div class="separator" id="separator_ghiber"></div>
+			<li class="menu_item" id="menu_groups_hibernate"></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_manager_window"></li>
 			<li class="menu_item" id="menu_treetabs_settings"></li>
 		</ul>
 
@@ -158,6 +209,7 @@
 		
 		<script type="text/javascript" src="../scripts/global.js"></script>
 		
+		<script type="text/javascript" src="../scripts/theme.js"></script>
 		<script type="text/javascript" src="../scripts/toolbar.js"></script>
 		<script type="text/javascript" src="../scripts/chrome.js"></script>
 		<script type="text/javascript" src="../scripts/refresh.js"></script>
@@ -168,6 +220,7 @@
 		<script type="text/javascript" src="../scripts/folders.js"></script>
 		<script type="text/javascript" src="../scripts/groups.js"></script>
 		<script type="text/javascript" src="../scripts/menu.js"></script>
+		<script type="text/javascript" src="../scripts/manager.js"></script>
 
 		<script type="text/javascript" src="sidebar.js"></script>
 		<script type="text/javascript" src="../scripts/events.js"></script>

sidebar.js

@@ -3,135 +3,117 @@
 // that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
 
 document.addEventListener("DOMContentLoaded", Run(), false);
-function Loadi18n() {
+
-	// toolbar labels
+
-	document.querySelectorAll(".button").forEach(function(s){
-		s.title = chrome.i18n.getMessage(s.id);
-	});
-	// menu labels and edit group dialog labels
-	document.querySelectorAll(".menu_item, .edit_dialog_button").forEach(function(s){
-		s.textContent = chrome.i18n.getMessage(s.id);
-	});
-}
-function RestorePinListRowSettings() {
-	plist = document.getElementById("pin_list");
-	if (opt.pin_list_multi_row) {
-		plist.style.whiteSpace = "normal";
-		plist.style.overflowX = "hidden";
-	} else {
-		plist.style.whiteSpace = "";
-		plist.style.overflowX = "";
-	}
-	RefreshGUI();
-}
 function Run() {
 	chrome.runtime.sendMessage({command: "is_bg_ready"}, function(response) {
-		setTimeout(function() {
+		if (response == true) {
-			if (response == true) {
+			Initialize();
-				Load();
+		} else {
-			} else {
+			setTimeout(function() {
 				Run();
-			}
+			},100);
-		},200);
+		}
 	});
 }
-function Load() {
+
-	chrome.windows.getCurrent({populate: false}, function(window) {
+function Initialize() {
-		CurrentWindowId = window.id;
+	
-		chrome.runtime.sendMessage({command: "get_preferences"}, function(response) {
+	chrome.tabs.query({currentWindow: true}, function(tabs) {
-			opt = Object.assign({}, response);
+		CurrentWindowId = tabs[0].windowId;
+
+		chrome.storage.local.get(null, function(storage) {
+			GetCurrentPreferences(storage);
+		
+			ApplyTheme(GetCurrentTheme(storage));
+
+			if (opt.show_toolbar) {
+				RecreateToolbar(GetCurrentToolbar(storage));
+				SetToolbarEvents(false, true, true, "mousedown");
+				RestoreToolbarShelf();
+				RestoreToolbarSearchFilter();
+			}
+			
 			chrome.runtime.sendMessage({command: "get_browser_tabs"}, function(response) {
-				bgtabs = Object.assign({}, response);
+				let bgtabs = Object.assign({}, response);
 				chrome.runtime.sendMessage({command: "get_folders", windowId: CurrentWindowId}, function(response) {
 					bgfolders = Object.assign({}, response);
 					chrome.runtime.sendMessage({command: "get_groups", windowId: CurrentWindowId}, function(response) {
 						bggroups = Object.assign({}, response);
-						chrome.runtime.sendMessage({command: "get_theme", windowId: CurrentWindowId}, function(response) {
+						// APPEND GROUPS
-							ApplyTheme(response);
+						AppendGroups(bggroups);
-							Initialize();
+						// APPEND FOLDERS
-						});
+						AppendFolders(bgfolders);
+						// APPEND TABS
+						let ti = 0;
+						let tc = tabs.length;
+						for (ti = 0; ti < tc; ti++) {
+							AppendTab(tabs[ti], false, false, false, true, false, true, false, true, false, false);
+						}
+						for (ti = 0; ti < tc; ti++) {
+							if (bgtabs[tabs[ti].id] && !tabs[ti].pinned) {
+								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 (ti = 0; ti < tc; ti++) {
+							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
+						SetActiveTabInEachGroup();
+						RearrangeTreeTabs(tabs, bgtabs, true);
+						RearrangeFolders(true);
+						StartChromeListeners();
+						SetMenu();
+						SetEvents();
+						SetManagerEvents();
+						HideMenus();
+						if (opt.switch_with_scroll) {
+							BindTabsSwitchingToMouseWheel("pin_list");
+						}
+						if (opt.syncro_tabbar_tabs_order || opt.syncro_tabbar_groups_tabs_order) {
+							RearrangeBrowserTabs();
+						}
+						RestorePinListRowSettings();
+						StartAutoSaveSession();
+						if (browserId == "V") {
+							VivaldiRefreshMediaIcons();
+						}
+						setTimeout(function() {
+							RefreshExpandStates();
+							RefreshCounters();
+							SetActiveTabInEachGroup();
+							if (browserId == "F" && opt.skip_load == false && storage.emergency_reload == undefined) {
+								RecheckFirefox();
+							}
+						}, 1000);
+						setTimeout(function() {
+							UpdateData();
+							delete debug;
+							delete running;
+							delete schedule_save;
+							delete windows;
+							delete tabs;
+							delete tt_ids;
+							delete DefaultToolbar;
+							delete DefaultTheme;
+							delete DefaultPreferences;
+							if (storage.emergency_reload != undefined) {
+								chrome.storage.local.remove("emergency_reload");
+							}
+						}, 5000);
+						if (browserId != "F") {
+							if (Object.keys(storage["windows_BAK1"]).length > 0 && document.getElementById("button_load_bak1") != null) { document.getElementById("button_load_bak1").classList.remove("disabled"); }
+							if (Object.keys(storage["windows_BAK2"]).length > 0 && document.getElementById("button_load_bak2") != null) { document.getElementById("button_load_bak2").classList.remove("disabled"); }
+							if (Object.keys(storage["windows_BAK3"]).length > 0 && document.getElementById("button_load_bak3") != null) { document.getElementById("button_load_bak3").classList.remove("disabled"); }
+						}
 					});
 				});
 			});
 		});
 	});
 }
-function Initialize() {
-	// APPEND GROUPS
-	AppendGroups(bggroups);
-	chrome.tabs.query({currentWindow: true}, function(tabs) {
-		// APPEND FOLDERS
-		AppendFolders(bgfolders);
-		// APPEND TABS
-		let tc = tabs.length;
-		for (var ti = 0; ti < tc; ti++) {
-			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) {
-				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 && bgtabs[tabs[ti].id].expand != "") {
-				document.getElementById(tabs[ti].id).classList.add(bgtabs[tabs[ti].id].expand);
-			}
-		}
-		// SET ACTIVE TAB FOR EACH GROUP
-		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);
-		StartChromeListeners();
-		SetMenu();
-		SetEvents();
-		HideMenus();
-		if (opt.switch_with_scroll) {
-			BindTabsSwitchingToMouseWheel("pin_list");
-		}
-		if (opt.syncro_tabbar_tabs_order || opt.syncro_tabbar_groups_tabs_order) {
-			RearrangeBrowserTabs();
-		}
-		RestorePinListRowSettings();
-		if (browserId == "V") {
-			VivaldiRefreshMediaIcons();
-		}
-		setTimeout(function() {
-			RefreshExpandStates();
-			RefreshCounters();
-		}, 3000);
-		setTimeout(function() {
-			UpdateData();
-			delete bgtabs;
-			delete theme;
-		}, 5000);
-		if (browserId != "F") {
-			chrome.storage.local.get(null, function(items) {
-				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/close.svg

@@ -26,15 +26,15 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="44.8"
-     inkscape:cx="4.1559123"
+     inkscape:cx="9.4572516"
-     inkscape:cy="4.8313983"
+     inkscape:cy="5.545684"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
      units="px"
      inkscape:window-width="1920"
-     inkscape:window-height="1028"
+     inkscape:window-height="1058"
-     inkscape:window-x="-8"
+     inkscape:window-x="1912"
      inkscape:window-y="-8"
      inkscape:window-maximized="1"
      inkscape:object-paths="true"
@@ -60,7 +60,7 @@
      transform="translate(0,-1040.3622)">
     <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:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-       d="m 2.9081908,1042.7622 c 0.2324213,0 0.4647584,0.089 0.6421314,0.2661 l 0.963197,0.9631 1.4864809,1.4848 1.484707,-1.4848 0.963197,-0.9631 c 0.3546774,-0.3548 0.9313595,-0.3548 1.2860364,0 0.3546775,0.3546 0.3546775,0.9294 0,1.2842 l -0.9631972,0.9632 -1.4864805,1.4865 1.4864805,1.4848 0.9631972,0.9631 c 0.3547465,0.3548 0.3547465,0.9314 0,1.286 -0.3546552,0.3548 -0.9312909,0.3548 -1.2860364,0 l -0.963197,-0.9631 -1.484707,-1.4865 -1.4864809,1.4865 -0.963197,0.9631 c -0.354677,0.3548 -0.9295858,0.3548 -1.2842627,0 -0.354677,-0.3546 -0.354677,-0.9312 0,-1.286 l 0.963197,-0.9631 1.484707,-1.4848 -1.484707,-1.4865 -0.963197,-0.9632 c -0.354746,-0.3548 -0.354746,-0.9296 0,-1.2842 0.1773275,-0.1771 0.40971,-0.2661 0.6421313,-0.2661 z"
+       d="m 2.9081906,1042.3622 c 0.2324213,0 0.4647584,0.089 0.6421314,0.2661 l 0.963197,0.9631 1.4864809,1.4848 1.484707,-1.4848 0.963197,-0.9631 c 0.3546774,-0.3548 0.9313595,-0.3548 1.2860364,0 0.3546777,0.3546 0.3546777,0.9294 0,1.2842 l -0.9631972,0.9632 -1.4864805,1.4865 1.4864805,1.4848 0.9631972,0.9631 c 0.3547467,0.3548 0.3547467,0.9314 0,1.286 -0.3546552,0.3548 -0.9312909,0.3548 -1.2860364,0 l -0.963197,-0.9631 -1.484707,-1.4865 -1.4864809,1.4865 -0.963197,0.9631 c -0.354677,0.3548 -0.9295858,0.3548 -1.2842627,0 -0.354677,-0.3546 -0.354677,-0.9312 0,-1.286 l 0.963197,-0.9631 1.484707,-1.4848 -1.484707,-1.4865 -0.963197,-0.9632 c -0.354746,-0.3548 -0.354746,-0.9296 0,-1.2842 0.1773275,-0.1771 0.40971,-0.2661 0.6421313,-0.2661 z"
        id="rect4134"
        inkscape:connector-curvature="0"
        sodipodi:nodetypes="sscccccccccscscccccccccscs" />

theme/theme_colors.css

@@ -9,11 +9,27 @@ body {
 	--toolbar_background: #f2f2f2;
 	--toolbar_border_bottom: #cccccc;
 
+	/* MAIN TOOLBAR "ON" BUTTONS COLORS */
+	--button_on_background: #f2f2f2;
+	--button_on_icons: #808080;
+
+	/* SHELF TOOLBAR */
+	--toolbar_shelf_background: #f2f2f2;
+
+	/* SHELF TOOLBAR BUTTONS COLORS */
+	--button_shelf_background: #f2f2f2;
+	--button_shelf_border: #f2f2f2;
+	--button_shelf_hover_background: #dcdcdc;
+	--button_shelf_hover_border: #dcdcdc;
+	--button_shelf_icons: #808080;
+	--button_shelf_icons_hover: #808080;
+
+
 	/* MAIN TOOLBAR BUTTONS COLORS */
 	--button_background: #f2f2f2;
 	--button_border: #f2f2f2;
 	--button_hover_background: #dcdcdc;
-	--button_hover_border: #bebebe;
+	--button_hover_border: #dcdcdc;
 	--button_icons: #808080;
 	--button_icons_hover: #808080;
 
@@ -29,7 +45,7 @@ body {
 	--group_list_default_font_color: #808080;
 	--group_list_button_hover_background: #dcdcdc;
 
-	/* TOTO GROUP EDIT DIALOG */
+	/* TODO GROUP EDIT DIALOG */
 
 
 	/* LISTS */
@@ -248,9 +264,12 @@ body {
 	--tab_filtered_selected_active_highlighted_search_hover_title_font_weight: bold;
 
 	/* folders */
-	/* --folder_list_background: #fafafa; */
+	--folder_icon_closed: #969696;
-	
+	--folder_icon_open: #339bf3;
-	
+	--folder_icon_hover: #ffa500;
+
+
+	/* TABS EXPAND INDICATOR */
 	--expand_hover_background: #ffa500;
 	--expand_closed_background: #969696;
 	--expand_open_background: #339bf3;

theme/theme_manager.css

@@ -0,0 +1,317 @@
+/* MANAGER_WINDOW */
+
+#manager_window {
+	top: 50px;
+	left: 0px;
+	height: auto;
+	width: calc(100% - 3px);
+	border: 1px solid var(--tabs_menu_border);
+	background-color: var(--tabs_menu_background);
+}
+
+
+#manager_window_header {
+	height: 20px;
+}
+#manager_window_header_title {
+	white-space: nowrap;
+	overflow: hidden;
+	width: calc(100% - 22px);
+	position: relative;
+	top: 3px;
+	left: 5px;
+}
+#manager_window_close {
+	background-color: var(--tabs_menu_background);
+	position: absolute;
+	top: 3px;
+	right: 2px;
+	width: 12px;
+	height: 12px;
+	border: 1px solid transparent;
+}
+#manager_window_close .close_img {
+	height: 12px;
+	width: 12px;
+	-webkit-mask-size: 12px 12px;
+	mask-size: 100%;
+}
+#manager_window_close:hover {
+	border: 1px solid var(--close_hover_border);
+	background-color: var(--close_hover_background);
+}
+
+
+
+
+/* LISTS */
+
+.manager_window_list {
+	position: relative;
+	white-space: nowrap;
+	overflow-x: hidden;
+	overflow-y: auto;
+	padding-top: 3px;
+	top: 4px;
+	left: 2px;
+	width: calc(100% - 6px);
+	background-color: var(--tabs_menu_background);
+	border: 1px solid var(--tabs_menu_border);
+}
+
+.saved_session_row,
+.hibernated_group_row {
+	white-space: nowrap;
+	height: 18px;
+}
+
+.manager_window_session_name,
+.manager_window_group_name {
+	display: inline-block;
+	position: relative;
+	top: -3px;
+	left: 2px;
+	font-size: 12px;
+	color: var(--tabs_menu_font);
+	min-width: 10px;
+}
+
+.export_saved_session,
+.export_hibernated_group {
+	-webkit-mask-image: url(../theme/toolbar_save.svg);
+	mask-image: url(../theme/toolbar_save.svg);
+}
+
+.load_saved_session,
+.load_hibernated_group {
+	-webkit-mask-image: url(../theme/toolbar_import.svg);
+	mask-image: url(../theme/toolbar_import.svg);
+}
+
+.merge_saved_session {
+	-webkit-mask-image: url(../theme/toolbar_merge.svg);
+	mask-image: url(../theme/toolbar_merge.svg);
+}
+
+.delete_saved_session,
+.delete_hibernated_group {
+	-webkit-mask-image: url(../theme/toolbar_trashcan.svg);
+	mask-image: url(../theme/toolbar_trashcan.svg);
+}
+
+
+.manager_window_list_button {
+	opacity: 0.5;
+	position: relative;
+	display: inline-block;
+	width: 18px;
+	height: 18px;
+	background-color: var(--button_icons);
+	mask-size: 18px 18px;
+	-webkit-mask-size: 18px 18px;
+}
+.manager_window_list_button:hover {
+	opacity: 1;
+	/* background-color: var(--tabs_menu_hover_background); */
+}
+
+
+
+/* PANEL BUTTONS */
+
+.manager_window_panel_buttons {
+	font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
+	font-size: 11px;
+	position: relative;
+	top: 1px;
+	left: 2px;
+	height: 22px;
+	width: calc(100% - 6px);
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+#manager_window_autosave_panel>.manager_window_panel_buttons {
+	overflow: hidden;
+}
+
+#manager_window_button_import_group {
+	top: 3px;
+	left: 0px;
+	width: calc(50% - 2px);
+}
+#manager_window_button_hibernate_group {
+	top: 3px;
+	left: calc(50% + 2px);
+	width: calc(50% - 2px);
+}
+
+
+#manager_window_autosave_panel>.manager_window_panel_buttons {
+	height: 78px;
+}
+
+
+#manager_window_button_import_session {
+	top: 3px;
+	left: 0px;
+	width: calc(50% - 2px);
+}
+#manager_window_button_save_current_session {
+	top: 3px;
+	left: calc(50% + 2px);
+	width: calc(50% - 2px);
+}
+
+
+
+#manager_window_autosessions_maximum_saves_label {
+	position: relative;
+	top: 3px;
+	left: 3px;
+}
+
+#manager_window_autosessions_save_timer_label {
+	position: relative;
+	top: 7px;
+	left: 3px;
+}
+
+#manager_window_autosessions_maximum_saves {
+	position: relative;
+	top: 5px;
+	left: 3px;
+	width: calc(100% - 8px);
+}
+
+#manager_window_autosessions_save_timer {
+	position: relative;
+	top: 9px;
+	left: 3px;
+	width: calc(100% - 8px);
+}
+
+
+
+
+/* PANELS */
+
+.manager_window_panel {
+	position: relative;
+	display: none;
+	background-color: var(--toolbar_shelf_background);
+	z-index: 200;
+}
+.manager_window_panel.mw_pan_on {
+	display: block;
+}
+
+
+
+/* TOOLBAR */
+
+#manager_window_toolbar {
+	position: relative;
+	left: 0px;
+	
+	height: 26px;
+	width: 100%;
+	border-top: 1px solid var(--toolbar_border_bottom);
+	border-bottom: 1px solid var(--toolbar_border_bottom);
+	background-color: var(--toolbar_background);
+}
+
+
+.manager_window_toolbar_button {
+	position: absolute;
+	display: inline-block;
+	vertical-align: top;
+	width: 24px;
+	height: 24px;
+	border: 1px solid var(--toolbar_background);
+}
+.manager_window_toolbar_button_img {
+	position: absolute;
+	top: 1px;
+	left: 1px;
+	width: 22px;
+	height: 22px;
+	-webkit-mask-size: 22px 22px;
+	mask-size: 22px 22px;
+	background-color: var(--button_icons);
+}
+
+
+
+.mw_on {
+	border-bottom: none;
+	border-top: none;
+	border-left: 1px solid var(--toolbar_border_bottom);
+	border-right: 1px solid var(--toolbar_border_bottom);
+	background-color: var(--toolbar_shelf_background);
+
+	height: 27px;
+	width: 26px;
+	z-index: 100;
+}
+
+
+
+.mw_on>.manager_window_toolbar_button_img {
+	top: 2px;
+	left: 2px;
+}
+
+
+.manager_window_toolbar_button:not(.mw_on) {
+	background-color: var(--button_background);
+}
+.manager_window_toolbar_button:hover:not(.mw_on) {
+	background-color: var(--button_hover_background);
+	border: 1px solid var(--button_hover_background);
+}
+.manager_window_toolbar_button:hover:not(.mw_on)>.manager_window_toolbar_button_img {
+	background-color: var(--button_icons_hover);
+}
+
+
+#manager_window_groups_button {
+	left: 0px;
+}
+#manager_window_groups_button.mw_on {
+	left: -1px;
+}
+#manager_window_sessions_button {
+	left: 26px;
+}
+#manager_window_sessions_button.mw_on {
+	left: 25px;
+}
+#manager_window_autosave_button {
+	left: 52px;
+}
+#manager_window_autosave_button.mw_on {
+	left: 51px;
+}
+
+
+#manager_window_groups_button>.manager_window_toolbar_button_img {
+	-webkit-mask-image: url(../theme/toolbar_groups.svg);
+	mask-image: url(../theme/toolbar_groups.svg);
+}
+
+#manager_window_sessions_button>.manager_window_toolbar_button_img {
+	-webkit-mask-image: url(../theme/toolbar_save.svg);
+	mask-image: url(../theme/toolbar_save.svg);
+}
+
+#manager_window_autosave_button>.manager_window_toolbar_button_img {
+	-webkit-mask-image: url(../theme/toolbar_history.svg);
+	mask-image: url(../theme/toolbar_history.svg);
+}
+
+.input_number {
+	background-color: var(--filter_box_background);
+	border: solid 1px var(--filter_box_border);
+	color: var(--filter_box_font);
+}

theme/theme_size_preset_0.css

@@ -2,7 +2,6 @@ body {
 	
 	--scrollbar_height: 4px;
 	--scrollbar_width: 16px;
-	--button_size: 22px;
 	
 	--pin_width: 22px;
 	--pin_height: 22px;
@@ -28,14 +27,11 @@ body {
 	--expand_mask_height: 4px;
 	--expand_mask_width: 4px;
 
-	--drag_area_top: 6px;
-	--drag_area_bottom: 4px;
-
 	--children_padding_left: 5px;
 	--close_top: 1px;
-	--close_right: 1px;
+	--close_right: 0px;
-	--close_height: 11px;
+	--close_height: 12px;
-	--close_width: 11px;
+	--close_width: 12px;
 	
 	--tab_mediaicon_height: 8px;
 	--tab_mediaicon_width: 8px;

theme/theme_size_preset_1.css

@@ -2,10 +2,9 @@ body {
 	
 	--scrollbar_height: 4px;
 	--scrollbar_width: 16px;
-	--button_size: 22px;
 	
-	--pin_width: 21px;
+	--pin_width: 22px;
-	--pin_height: 21px;
+	--pin_height: 22px;
 
 	--tab_height: 17px;
 	--tab_height_line: 19px;
@@ -28,14 +27,11 @@ body {
 	--expand_mask_height: 5px;
 	--expand_mask_width: 5px;
 
-	--drag_area_top: 6px;
-	--drag_area_bottom: 4px;
-
 	--children_padding_left: 5px;
-	--close_top: 2px;
+	--close_top: 1px;
-	--close_right: 2px;
+	--close_right: 1px;
-	--close_height: 11px;
+	--close_height: 13px;
-	--close_width: 11px;
+	--close_width: 13px;
 	
 	--tab_mediaicon_height: 9px;
 	--tab_mediaicon_width: 9px;

theme/theme_size_preset_2.css

@@ -2,13 +2,12 @@ body {
 	
 	--scrollbar_height: 4px;
 	--scrollbar_width: 16px;
-	--button_size: 22px;
 	
 	--pin_width: 24px;
 	--pin_height: 24px;
 
 	--tab_height: 20px;
-	--tab_height_line: 22px;
+	--tab_height_line: 23px;
 	
 	--title_font_size: 12px;
 
@@ -28,14 +27,11 @@ body {
 	--expand_mask_height: 6px;
 	--expand_mask_width: 6px;
 
-	--drag_area_top: 7px;
-	--drag_area_bottom: 5px;
-
 	--children_padding_left: 5px;
 	--close_top: 2px;
-	--close_right: 2px;
+	--close_right: 1px;
-	--close_height: 13px;
+	--close_height: 14px;
-	--close_width: 13px;
+	--close_width: 14px;
 	
 	--tab_mediaicon_height: 10px;
 	--tab_mediaicon_width: 10px;

theme/theme_size_preset_3.css

@@ -2,15 +2,14 @@ body {
 	
 	--scrollbar_height: 4px;
 	--scrollbar_width: 16px;
-	--button_size: 22px;
 	
 	--pin_width: 26px;
 	--pin_height: 26px;
 
 	--tab_height: 22px;
-	--tab_height_line: 25px;
+	--tab_height_line: 24px;
 	
-	--title_font_size: 12px;
+	--title_font_size: 13px;
 
 	--tab_title_text_padding_left: 25px;
 	--tab_title_text_padding_exp_left: 37px;
@@ -28,14 +27,11 @@ body {
 	--expand_mask_height: 7px;
 	--expand_mask_width: 7px;
 
-	--drag_area_top: 8px;
-	--drag_area_bottom: 5px;
-
 	--children_padding_left: 5px;
 	--close_top: 3px;
 	--close_right: 3px;
-	--close_height: 13px;
+	--close_height: 14px;
-	--close_width: 13px;
+	--close_width: 14px;
 	
 	--tab_mediaicon_height: 11px;
 	--tab_mediaicon_width: 11px;

theme/theme_size_preset_4.css

@@ -2,13 +2,12 @@ body {
 	
 	--scrollbar_height: 4px;
 	--scrollbar_width: 16px;
-	--button_size: 22px;
 	
 	--pin_width: 28px;
 	--pin_height: 28px;
 
 	--tab_height: 24px;
-	--tab_height_line: 25px;
+	--tab_height_line: 26px;
 
 	--title_font_size: 14px;
 
@@ -28,9 +27,6 @@ body {
 	--expand_mask_height: 7px;
 	--expand_mask_width: 7px;
 
-	--drag_area_top: 9px;
-	--drag_area_bottom: 6px;
-
 	--children_padding_left: 5px;
 	--close_top: 4px;
 	--close_right: 4px;

theme/theme_tabs_margin_0.css

@@ -1,35 +1,28 @@
 body {
-	/* vertical */
+	/* TABS */
-	--margin_top_first_tab: 2px;
+	--margin_tab_top: -1px;
-	--margin_top_tab: -1px;
+	--margin_tab_bottom: -1px;
+	--margin_tab_left: 1px;
+	--margin_tab_right: 1px;
 	
-	/* drag_bottom vertical */
+	/* drag_enter top, bottom */
+	--tab_drag_entered_top: 0px;
 	--tab_drag_entered_bottom: 0px;
 
-	/* drag_top vertical */
+	/* PINS */
-	--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;
 	
-	
+	/* drag_enter left, right */
 	--pin_drag_entered_top_left: 0px;
-	--pin_drag_entered_bottom_right: calc(50% - 2px);
+	--pin_drag_entered_bottom_right: 0px;
+
+	/* PIN LIST */
+	--pin_list_padding_top: 1px;
+	--pin_list_padding_bottom: 2px;
+	--pin_list_padding_left: 2px;
+	
+	--group_folders_top: 2px;
+	--group_tabs_top: 2px;
 }

theme/theme_tabs_margin_1.css

@@ -1,35 +1,28 @@
 body {
-	/* vertical */
+	/* TABS */
-	--margin_top_first_tab: 1px;
+	--margin_tab_top: 0px;
-	--margin_top_tab: 0px;
+	--margin_tab_bottom: 0px;
+	--margin_tab_left: 1px;
+	--margin_tab_right: 1px;
 	
-	/* drag_bottom vertical */
+	/* drag_enter top, bottom */
+	--tab_drag_entered_top: -1px;
 	--tab_drag_entered_bottom: 0px;
 
-	/* drag_top vertical */
+	/* PINS */
-	--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;
 	
+	/* drag_enter left, right */
+	--pin_drag_entered_top_left: 0px;
+	--pin_drag_entered_bottom_right: -1px;
+
+	/* PIN LIST */
+	--pin_list_padding_top: 1px;
+	--pin_list_padding_bottom: 1px;
+	--pin_list_padding_left: 1px;
 	
-	--pin_drag_entered_top_left: -1px;
+	--group_folders_top: 1px;
-	--pin_drag_entered_bottom_right: calc(50% - 2px);
+	--group_tabs_top: 1px;
 }

theme/theme_tabs_margin_2.css

@@ -1,35 +1,28 @@
 body {
-	/* vertical */
+	/* TABS */
-	--margin_top_first_tab: 1px;
+	--margin_tab_top: 1px;
-	--margin_top_tab: 1px;
+	--margin_tab_bottom: 0px;
+	--margin_tab_left: 1px;
+	--margin_tab_right: 1px;
 	
-	/* drag_bottom bottom vertical */
+	/* drag_enter top, bottom */
+	--tab_drag_entered_top: -1px;
 	--tab_drag_entered_bottom: -1px;
 	
-	/* drag_top vertical */
+	/* PINS */
-	--tab_drag_entered_top: -1px;
+	--pin_margin_left: 1px;
+	--pin_last_margin_right: 1px;
+	--pin_margin_bottom: 1px;
 
-	/* horizontal */
+	/* drag_enter left, right */
-	--tab_header_left: 1px;
+	--pin_drag_entered_top_left: -1px;
-	--tab_header_width: calc(100% - 4px);
+	--pin_drag_entered_bottom_right: -1px;
-
-	/* 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 */
 	--pin_list_padding_top: 1px;
 	--pin_list_padding_bottom: 0px;
 	--pin_list_padding_left: 0px;
 	
-	--pin_margin_left: 1px;
+	--group_folders_top: -1px;
-	--pin_last_margin_right: 1px;
+	--group_tabs_top: -1px;
-	--pin_margin_bottom: 1px;
-	
-	
-	--pin_drag_entered_top_left: -1px;
-	--pin_drag_entered_bottom_right: calc(50% - 1px);
 }

theme/toolbar_alert.svg

@@ -0,0 +1,69 @@
+<?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="svg3347"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="22"
+   height="22"
+   viewBox="0 0 22 22"
+   sodipodi:docname="toolbar_alert.svg">
+  <metadata
+     id="metadata3353">
+    <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="defs3351" />
+  <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="1058"
+     id="namedview3349"
+     showgrid="false"
+     inkscape:zoom="5.6568543"
+     inkscape:cx="-7.7273865"
+     inkscape:cy="-3.1662399"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg3347"
+     inkscape:snap-page="true"
+     inkscape:snap-center="true"
+     inkscape:snap-midpoints="true"
+     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:snap-intersection-paths="false"
+     inkscape:object-nodes="false"
+     inkscape:snap-smooth-nodes="true" />
+  <path
+     id="path4161"
+     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:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 10,13 0,-7 2,0 0,6.99999 z m 0,1 2,0 0,2 -2,0 z m 9,-3 c 0,4.418278 -3.581721,8 -8,8 -4.4182784,0 -8,-3.581722 -8,-8 0,-4.4182784 3.5817216,-8 8,-8 4.418279,0 8,3.5817216 8,8 z" />
+</svg>

theme/toolbar_window.svg

@@ -0,0 +1,81 @@
+<?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"
+   width="22"
+   height="22"
+   viewBox="0 0 22 22"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="toolbar_window.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.72384"
+     inkscape:cx="14.373308"
+     inkscape:cy="10.691459"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1028"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:snap-center="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-page="true"
+     inkscape:snap-object-midpoints="true" />
+  <metadata
+     id="metadata7">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1030.3622)">
+    <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:#ffffff;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="rect4424"
+       width="5.009901"
+       height="11.700142"
+       x="33.714809"
+       y="1056.0536" />
+    <path
+       id="rect4142"
+       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:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 15,1035.3622 1,0 0,1 -1,0 z m -11,-2 0,16 14,0 0,-16 z m 13,5 0,10 -12,0 0,-10 z m -11,-3 0,1 7,0 0,-1 z m -1,-1 12,0 0,3 -12,0 z"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccccccccccccccccc" />
+  </g>
+</svg>