-
-
-
-
-
+
-
-
+
+
+
-
+
-
-
-
+
+
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
diff --git a/options.js b/options.js
deleted file mode 100644
index 5e0fc03..0000000
--- a/options.js
+++ /dev/null
@@ -1,581 +0,0 @@
-// ********** OPTIONS ***************
-
-var bg;
-if (navigator.userAgent.match("Firefox") !== null){
- bg = browser.extension.getBackgroundPage();
-} else {
- bg = chrome.extension.getBackgroundPage();
-}
-
-var themes = [];
-var theme = {};
-
-document.addEventListener("DOMContentLoaded", function(){
- document.title = "Tree Tabs";
-
- if (bg.opt == undefined){
- setTimeout(function(){
- location.reload();
- }, 3000);
- }
-
- if (localStorage.getItem("themes") != null){
- themes = JSON.parse(localStorage["themes"]);
- }
- if (localStorage.getItem("current_theme") != null){
- LoadTheme(localStorage["current_theme"]);
- }
-
- GetOptions();
- RefreshFields();
- SetEvents();
-});
-
-
-// AppendCSSSheets from theme
-function AppendCSSSheets(theme){
- var css_variables = "";
- for (var css_variable in theme.TabsSizeSet){
- css_variables = css_variables + "--" + css_variable + ":" + theme.TabsSizeSet[css_variable] + ";";
- }
-
- for (var css_variable in theme.ColorsSet){
- ColorsSet[css_variable] = theme.ColorsSet[css_variable];
- if ($("#"+css_variable)[0]) $("#"+css_variable)[0].value = theme.ColorsSet[css_variable];
- css_variables = css_variables + "--" + css_variable + ":" + theme.ColorsSet[css_variable] + ";";
- }
-
- // remove previous css rules in css sheet 0
- for (var r = 0; r < document.styleSheets[0].cssRules.length; r++){
- if (document.styleSheets[0].cssRules[r].cssText.match("--pin_width") !== null){
- document.styleSheets[0].deleteRule(r);
- }
- if (document.styleSheets[0].cssRules[r].cssText.match("::-webkit-scrollbar") !== null){
- document.styleSheets[0].deleteRule(r);
- }
- }
- document.styleSheets[0].insertRule("body { "+css_variables+" }", 0);
-
- // scrollbars
- if (navigator.userAgent.match("Firefox") === null){
- document.styleSheets[0].insertRule("::-webkit-scrollbar { width:"+theme.ScrollbarTabList+"px; height:"+theme.ScrollbarPinList+"px; }", 3);
- }
-}
-
-function LoadTheme(themeName){
- var theme = JSON.parse(localStorage["theme"+themeName]);
-
- TabsSizeSet = theme.TabsSizeSetNumber;
-
- // append toolbar from theme
- $("#toolbar").html(theme.toolbar);
-
- AppendCSSSheets(theme);
-
- $("#button_filter_type").addClass("url").removeClass("title");
-
- // expand toolbar options
- ToolbarShow = $("#show_toolbar")[0].checked = theme.ToolbarShow;
- $("#field_show_toolbar").css({"height": $("#show_toolbar")[0].checked ? "" : "6"});
- ToolbarShow ? $("#options_available_buttons, #toolbar, #toolbar_colors").show() : $("#options_available_buttons, #toolbar, #toolbar_colors").hide();
-
- // append example tabs
- $("#pin_list, #tab_list").html("");
- // pins
- AppendTab({tab: {id: "p0", pinned: true}, Append: true});
- AppendTab({tab: {id: "p1", pinned: true, active: true}, Append: true});
-
- // tabs
- AppendTab({tab: {id: "t2", pinned: false}, Append: true});
- $("#tab_titlet2")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal");
-
- AppendTab({tab: {id: "t3", pinned: false, active: true}, Append: true, ParentId: "t2"});
- $("#tab_titlet3")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected");
- $(".tab#t3").addClass("c selected");
-
-
- AppendTab({tab: {id: "t5", pinned: false, discarded: true}, Append: true});
- $("#tab_titlet5")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded");
-
- AppendTab({tab: {id: "t6", pinned: false}, Append: true});
- $("#tab_titlet6")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result");
- $(".tab#t6").addClass("filtered");
-
-
- AppendTab({tab: {id: "t7", pinned: false}, Append: true});
- $("#tab_titlet7")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_higlighted");
- $(".tab#t7").addClass("filtered highlighted_search");
-
-
- AppendTab({tab: {id: "t8", pinned: false}, Append: true});
- $("#tab_titlet8")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected");
- $(".tab#t8").addClass("selected filtered");
-
-
-
- AppendTab({tab: {id: "t9", pinned: false}, Append: true});
- $("#tab_titlet9")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active");
- $(".tab#t9").addClass("active selected filtered");
-
- // drag&drop indicator
- $(".drag_entered_bottom").first().addClass("highlighted_drop_target");
-
- // toolbar events
- $("#toolbar_tools, #toolbar_search").addClass("hidden");
- $(".on").removeClass("on");
-
- ScrollbarPinList = $("#scrollbar_pin_list")[0].value = theme.ScrollbarPinList;
- ScrollbarTabList = $("#scrollbar_tab_list")[0].value = theme.ScrollbarTabList;
-
- $("#active_tab_font_bold")[0].checked = theme.ColorsSet.active_font_weight == "normal" ? false : true;
- $("#body").css({"background-color": "transparent"});
-
-}
-
-
-// document events
-function GetOptions(){
- // get language labels
- $(".label").each(function(){
- $(this).text(chrome.i18n.getMessage(this.id));
- });
- // get language for color pick labels
- $(".cpl").each(function(){
- $(this).text(chrome.i18n.getMessage(this.id));
- });
- // get language for menu labels
- $(".menu_item").each(function(){
- $(this).text(chrome.i18n.getMessage("options_example_menu_item"));
- });
-
- // get checkboxes from saved states
- $(".opt_checkbox").each(function(){
- $(this)[0].checked = bg.opt[this.id];
- });
- $(".set_button").each(function(){
- $(this)[0].textContent = chrome.i18n.getMessage(this.id);
- });
-
- // get language dropdown menus
- $(".bg_opt_drop_down_menu").each(function(){
- $(this)[0].textContent = chrome.i18n.getMessage(this.id);
- });
-
-
- // get options for append child tab
- for (var i = 0; i < $("#append_child_tab")[0].options.length; i++){
- if ($("#append_child_tab")[0].options[i].value === bg.opt.append_child_tab){
- $("#append_child_tab")[0].selectedIndex = i;
- break;
- }
- }
-
- // get options for append child tab after limit
- for (var i = 0; i < $("#append_child_tab_after_limit")[0].options.length; i++){
- if ($("#append_child_tab_after_limit")[0].options[i].value === bg.opt.append_child_tab_after_limit){
- $("#append_child_tab_after_limit")[0].selectedIndex = i;
- break;
- }
- }
-
- // get options for append orphan tab
- for (var i = 0; i < $("#append_orphan_tab")[0].options.length; i++){
- if ($("#append_orphan_tab")[0].options[i].value === bg.opt.append_orphan_tab){
- $("#append_orphan_tab")[0].selectedIndex = i;
- break;
- }
- }
-
- // get options for action after closing active tab
- for (var i = 0; i < $("#after_closing_active_tab")[0].options.length; i++){
- if ($("#after_closing_active_tab")[0].options[i].value === bg.opt.after_closing_active_tab){
- $("#after_closing_active_tab")[0].selectedIndex = i;
- break;
- }
- }
-
- // get options for tabs tree depth option
- $("#max_tree_depth")[0].value = bg.opt.max_tree_depth;
-
- // append themes to dropdown menu
- for (var i = 0; i < themes.length; i++){
- var t_list = document.getElementById("theme_list");
- var theme_name = document.createElement("option");
- theme_name.value = themes[i];
- theme_name.text = themes[i];
- t_list.add(theme_name);
- }
-
- // select current theme in dropdown list
- for (var i = 0; i < $("#theme_list")[0].options.length; i++){
- if ($("#theme_list")[0].options[i].value === localStorage["current_theme"]){
- $("#theme_list")[0].selectedIndex = i;
- break;
- }
- }
-}
-
-
-function ExportTheme(filename) {
- var themeObj = {
- "ToolbarShow": ToolbarShow,
- "ColorsSet": ColorsSet,
- "TabsSizeSetNumber": TabsSizeSet,
- "TabsSizeSet": TabsSizeSets[TabsSizeSet],
- "ScrollbarPinList": ScrollbarPinList,
- "ScrollbarTabList": ScrollbarTabList,
- "theme_name": $("#theme_list").val(),
- "theme_version": CurrentThemeVersion,
- "toolbar": ToolbarSet
- };
- var data = JSON.stringify(themeObj);
- var body = document.getElementById("body");
- var link = document.createElement("a");
- link.target = "_blank";
- link.download = filename;
- link.href = "data:text/csv;charset=utf-8," + encodeURIComponent(data);
- body.appendChild(link);
- link.click();
- link.remove();
-}
-
-
-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;
- var themeObj = JSON.parse(data);
-
- if (themeObj.theme_version > CurrentThemeVersion){
- alert(chrome.i18n.getMessage("options_loaded_theme_newer_version"));
- }
- if (themeObj.theme_version < CurrentThemeVersion){
- alert(chrome.i18n.getMessage("options_loaded_theme_older_version"));
- }
-
- if (themeObj.theme_version <= CurrentThemeVersion){
- for (var val in ColorsSet){
- ColorsSet[val] = themeObj.ColorsSet[val];
- }
-
- ToolbarShow = themeObj.ToolbarShow;
- TabsSizeSet = themeObj.TabsSizeSetNumber;
- ScrollbarPinList = themeObj.ScrollbarPinList;
- ScrollbarTabList = themeObj.ScrollbarTabList;
-
- $("#toolbar").html(themeObj.toolbar);
- ToolbarSet = themeObj.toolbar;
-
- if (themes.indexOf(themeObj.theme_name) != -1){
- themeObj.theme_name = themeObj.theme_name + "(1)";
- }
-
- themes.push(themeObj.theme_name);
-
- SaveTheme(themeObj.theme_name);
- var t_list = document.getElementById("theme_list");
- var theme_name = document.createElement("option");
- theme_name.value = themeObj.theme_name;
- theme_name.text = theme_name.value;
- t_list.add(theme_name);
-
- $("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1;
-
- localStorage["themes"] = JSON.stringify(themes);
- localStorage["current_theme"] = themeObj.theme_name;
- LoadTheme(themeObj.theme_name);
- RefreshFields();
- }
- }
-
-}
-
-
-
-// document events
-function SetEvents(){
-
- // import theme preset button
- $(document).on("click", "#options_import_theme_button", function(event){
- $("#import_theme").click();
- });
- $(document).on("change", "#import_theme", function(event){
- ImportTheme();
- });
-
- // export theme preset button
- $(document).on("click", "#options_export_theme_button", function(event){
- if ($("#theme_list")[0].options.length == 0){
- alert(chrome.i18n.getMessage("options_no_theme_to_export"));
- } else {
- ExportTheme($("#theme_list").val() + ".tt_theme");
- }
- });
-
-
- // rename theme preset button
- $(document).on("click", "#options_rename_theme_button", function(event){
-
- if (themes.indexOf($("#new_theme_name")[0].value) != -1){
- alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
- return;
- }
-
- if ($("#new_theme_name")[0].value == ""){
- alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
- return;
- }
-
-
- localStorage["theme"+($("#new_theme_name")[0].value)] = localStorage["theme"+($("#theme_list").val())];
- localStorage.removeItem("theme"+($("#theme_list").val()));
-
- var t_list = document.getElementById("theme_list");
-
- themes[themes.indexOf(t_list.options[t_list.selectedIndex].value)] = $("#new_theme_name")[0].value;
- t_list.options[t_list.selectedIndex].value = t_list.options[t_list.selectedIndex].text = $("#new_theme_name")[0].value;
- localStorage["themes"] = JSON.stringify(themes);
- localStorage["current_theme"] = $("#theme_list").val();
- });
-
-
-
- // set checkbox options on/off and save
- $(document).on("click", ".bg_opt", function(event){
- bg.opt[this.id] = $(this)[0].checked ? true : false;
- chrome.runtime.sendMessage({command: "options_save"});
- });
-
- // set dropdown menu options
- $("#append_child_tab, #append_child_tab_after_limit, #after_closing_active_tab, #append_orphan_tab").change(function(){
- bg.opt[this.id] = $(this).val();
- chrome.runtime.sendMessage({command: "options_save"});
- });
-
-
- // set tabs tree depth option
- $(document).on("input", "#max_tree_depth", function(event){
- bg.opt.max_tree_depth = $(this)[0].value;
- chrome.runtime.sendMessage({command: "options_save"});
- });
-
-
- // set toolbar on/off and show/hide all toolbar options
- $(document).on("click", "#show_toolbar", function(event){
- ToolbarShow = $("#show_toolbar")[0].checked ? true : false;
- SaveTheme($("#theme_list").val());
- $("#field_show_toolbar").css({"height": $("#show_toolbar")[0].checked ? "" : "6"});
- ToolbarShow ? $("#options_available_buttons, #toolbar, #toolbar_colors").show() : $("#options_available_buttons, #toolbar, #toolbar_colors").hide();
- });
-
-
- // block system dragging
- $(document).bind("drop dragover", function(event){
- event.preventDefault();
- });
-
- var dragged_button;
- $(document).on("mousedown", ".button", function(event){
- if ($(this).is("#button_filter_type, #filter_search_go_prev, #filter_search_go_next")){
- return;
- }
- $(this).attr("draggable", "true");
- dragged_button = this;
- });
-
- // set dragged button node
- $(document).on("dragstart", ".button", function(event){
- event.originalEvent.dataTransfer.setData(" "," ");
- event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
- });
-
- // remove draggable attribute to clean html which will be saved in the toolbar
- $(document).on("mouseleave", ".button", function(event){
- $(".button").removeAttr("draggable");
- });
-
- // save toolbar
- $(document).on("dragend", ".button", function(event){
- ToolbarSet = $("#toolbar").html();
- SaveTheme($("#theme_list").val());
- });
-
-
- // drag&drop buttons to lists
- $(document).on("dragenter", "#toolbar_main, #toolbar_tools, #toolbar_unused_buttons", function(event){
- if ($(dragged_button).is("#button_tools, #button_search") && $(this).is("#toolbar_tools")){
- return;
- }
- if (dragged_button.parentNode.id != this.id){
- $("#"+dragged_button.id).appendTo($(this));
- }
- });
-
- // move (flip) buttons
- $(document).on("dragenter", ".button", function(event){
- if ($(dragged_button).is("#button_tools, #button_search") && $(this).parent().is("#toolbar_tools")){
- return;
- }
- if ($(this).parent().is("#toolbar_search, #toolbar_search_buttons")){
- return;
- }
- if ( $(this).index() <= $("#"+dragged_button.id).index()){
- $("#"+dragged_button.id).insertBefore($(this));
- } else {
- $("#"+dragged_button.id).insertAfter($(this));
- }
- });
-
- // add new theme preset button
- $(document).on("click", "#options_add_theme_button", function(event){
- if (themes.indexOf($("#new_theme_name")[0].value) != -1){
- alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
- return;
- }
-
- if ($("#new_theme_name")[0].value == ""){
- alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
- return;
- }
-
- LoadTheme("Default");
- themes.push($("#new_theme_name")[0].value);
- var t_list = document.getElementById("theme_list");
- var theme_name = document.createElement("option");
- theme_name.value = $("#new_theme_name")[0].value;
- theme_name.text = theme_name.value;
- t_list.add(theme_name);
-
- $("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1;
- SaveTheme(theme_name.value);
- localStorage["themes"] = JSON.stringify(themes);
- localStorage["current_theme"] = $("#theme_list").val();
- RefreshFields();
- });
-
- // remove theme preset button
- $(document).on("click", "#options_remove_theme_button", function(event){
- if ($("#theme_list")[0].options.length == 0){
- localStorage["current_theme"] = "Default";
- return;
- }
-
- themes.splice(themes.indexOf($("#theme_list").val()), 1);
- localStorage["themes"] = JSON.stringify(themes);
-
- localStorage.removeItem("theme"+($("#theme_list").val()));
- var x = document.getElementById("theme_list");
- x.remove(x.selectedIndex);
-
- localStorage["current_theme"] = ($("#theme_list")[0].options.length > 0) ? $("#theme_list").val() : "Default";
- LoadTheme(localStorage["current_theme"]);
- RefreshFields();
- });
-
- // select theme from list
- $("#theme_list").change(function(){
- localStorage["current_theme"] = $(this).val();
- LoadTheme($(this).val());
- });
-
-
- // change colors with color pickers
- $(document).on("input", ".cp", function(event){
- ColorsSet[this.id] = $(this)[0].value;
- AppendCSSSheets(SaveTheme($("#theme_list").val()));
- });
-
- // set scrollbar sizes
- $(document).on("input", "#scrollbar_pin_list, #scrollbar_tab_list", function(event){
- ScrollbarPinList = $("#scrollbar_pin_list")[0].value;
- ScrollbarTabList = $("#scrollbar_tab_list")[0].value;
- SaveTheme($("#theme_list").val());
- document.styleSheets[0].addRule("::-webkit-scrollbar", "width:"+ScrollbarTabList+"px; height:"+ScrollbarPinList+"px;");
- });
-
-
- // change tabs size preset(up)
- $(document).on("click", "#options_tabs_size_up", function(event){
- if (TabsSizeSet < TabsSizeSets.length-1){
- TabsSizeSet++;
- AppendCSSSheets(SaveTheme($("#theme_list").val()));
- }
- });
-
- // change tabs size preset(down)
- $(document).on("click", "#options_tabs_size_down", function(event){
- if (TabsSizeSet > 0){
- TabsSizeSet--;
- AppendCSSSheets(SaveTheme($("#theme_list").val()));
- }
- });
-
- // change active_tab_font_bold
- $(document).on("click", "#active_tab_font_bold", function(event){
- ColorsSet.active_font_weight = $(this)[0].checked ? "bold" : "normal";
- AppendCSSSheets(SaveTheme($("#theme_list").val()));
- });
-
- // show close button on hover
- $(document).on("mouseenter", ".close", function(event){
- $(this).addClass("close_hover");
- });
- $(document).on("mouseleave", ".close", function(event){
- $(".close_hover").removeClass("close_hover");
- });
-
- // tabs on hover
- $(document).on("mouseover", ".tab_header", function(event){
- $(this).addClass("tab_header_hover").addClass("close_show");
- });
-
- $(document).on("mouseleave", ".tab_header", function(event){
- $(this).removeClass("tab_header_hover").removeClass("close_show");
- });
-
- $(document).on("click", "#button_tools, #button_search", function(event){
- if (event.button != 0){
- return;
- }
- if ($(this).is(".on")){
- $("#button_tools, #button_search").removeClass("on");
- $("#toolbar_tools, #toolbar_search").addClass("hidden");
- } else {
- $(this).addClass("on");
- if ($(this).is("#button_tools")){
- $("#button_search").removeClass("on");
- $("#toolbar_search").addClass("hidden");
- $("#toolbar_tools").removeClass("hidden");
- } else {
- $("#button_tools").removeClass("on");
- $("#toolbar_tools").addClass("hidden");
- $("#toolbar_search").removeClass("hidden");
- }
- }
- });
-
-}
-
-// shrink or expand theme field
-function RefreshFields(){
- if ($("#theme_list")[0].options.length == 0){
- $("#field_theme").css({"height": "45px"});
- } else {
- $("#field_theme").css({"height": ""});
- }
- if (navigator.userAgent.match("Firefox") !== null){
- $("#field_scrollbars").hide();
- } else {
- $("#faster_scroll_for_firefox").hide();
- }
- if (navigator.userAgent.match("Vivaldi") !== null){
- $("#url_for_web_panel").val(chrome.runtime.getURL("sidebar.html"));
- $("#url_for_web_panel").prop("readonly", true);
- $("#url_for_web_panel").select();
- } else{
- $("#field_vivaldi").hide();
- }
-}
\ No newline at end of file
diff --git a/options/donate_bitcoin.png b/options/donate_bitcoin.png
new file mode 100644
index 0000000..39044c6
Binary files /dev/null and b/options/donate_bitcoin.png differ
diff --git a/options/donate_eth.png b/options/donate_eth.png
new file mode 100644
index 0000000..02f97ce
Binary files /dev/null and b/options/donate_eth.png differ
diff --git a/options/donate_paypal.png b/options/donate_paypal.png
new file mode 100644
index 0000000..040dad1
Binary files /dev/null and b/options/donate_paypal.png differ
diff --git a/options/donate_title.svg b/options/donate_title.svg
new file mode 100644
index 0000000..e4e50ab
--- /dev/null
+++ b/options/donate_title.svg
@@ -0,0 +1,86 @@
+
+
+
+
diff --git a/options/options.css b/options/options.css
new file mode 100644
index 0000000..cdf9fb2
--- /dev/null
+++ b/options/options.css
@@ -0,0 +1,101 @@
+:hover #donate {
+ animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
+ transform: translate3d(0, 0, 0);
+ backface-visibility: hidden;
+ perspective: 1000px;
+}
+
+#donate {
+ position:absolute;
+ top:17px;
+ left:700px;
+ width: 100px;
+ height: 20px;
+ background-image: url(../options/donate_title.svg);
+}
+
+#donate_paypal {
+ position:absolute;
+ top:14px;
+ left:790px;
+ width: 32px;
+ height: 32px;
+ background-image: url(../options/donate_paypal.png);
+ background-size: 30px 30px;
+}
+#donate_paypal:hover {
+ top: 13px;
+ left:789px;
+ background-size: 32px 32px;
+}
+#donate_bitcoin {
+ position:absolute;
+ top:14px;
+ left:825px;
+ width: 32px;
+ height: 32px;
+ background-image: url(../options/donate_bitcoin.png);
+ background-size: 30px 30px;
+}
+#donate_bitcoin:hover {
+ top: 13px;
+ left:824px;
+ background-size: 32px 32px;
+}
+#donate_ethereum {
+ position:absolute;
+ top:14px;
+ left:860px;
+ width: 32px;
+ height: 32px;
+ background-image: url(../options/donate_eth.png);
+ background-size: 30px 30px;
+}
+#donate_ethereum:hover {
+ top: 13px;
+ left:859px;
+ background-size: 32px 32px;
+}
+
+@keyframes shake {
+ 10%, 90% {
+ transform: translate3d(-1px, 0, 0);
+ }
+ 20%, 80% {
+ transform: translate3d(2px, 0, 0);
+ }
+ 30%, 50%, 70% {
+ transform: translate3d(-4px, 0, 0);
+ }
+ 40%, 60% {
+ transform: translate3d(4px, 0, 0);
+ }
+}
+body {
+ margin: 20px;
+ background-color: transparent;
+ border: none;
+ width: auto;
+ height: auto;
+ overflow: auto;
+ padding: 0;
+ font-family: Arial;
+ font-size: 13px;
+}
+.field {
+ width: 850px;
+ word-wrap: break-word;
+ overflow: hidden;
+ margin-bottom:15px;
+}
+ul:not(#tabs_menu) {
+ padding-left: 22px;
+}
+
+ul:not(#tabs_menu) li {
+ margin: 5px;
+}
+.label {
+ padding-left: 6px;
+ padding-right: 6px;
+}
\ No newline at end of file
diff --git a/options/options.js b/options/options.js
new file mode 100644
index 0000000..ec3d892
--- /dev/null
+++ b/options/options.js
@@ -0,0 +1,645 @@
+// 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/
+
+// ********** OPTIONS ***************
+
+var themes = [];
+var SelectedTheme = Object.assign({}, DefaultTheme);
+var dragged_button;
+active_group = "tab_list";
+
+document.addEventListener("DOMContentLoaded", function() {
+ LoadPreferences();
+ document.title = "Tree Tabs";
+
+ themes = LoadData("themes", []);
+ if (localStorage.getItem("current_theme") != null) {
+ LoadTheme(localStorage["current_theme"]);
+ }
+
+ GetOptions();
+ RefreshFields();
+ SetEvents();
+ SetToolbarShelfToggle("click");
+
+ AppendGroupToList("tab_list", caption_ungrouped_group, "");
+ AppendGroupToList("tab_list2", caption_ungrouped_group, "");
+
+ AppendSampleTabs();
+
+});
+
+
+// document events
+function GetOptions() {
+ // get language labels
+ $(".label").each(function() {
+ $(this).text(chrome.i18n.getMessage(this.id));
+ });
+ // get language for color pick labels
+ $(".cpl").each(function() {
+ $(this).text(chrome.i18n.getMessage(this.id));
+ });
+ // get language for menu labels
+ $(".menu_item").each(function() {
+ $(this).text(chrome.i18n.getMessage("options_example_menu_item"));
+ });
+
+ // get checkboxes from saved states
+ $(".opt_checkbox").each(function() {
+ $(this)[0].checked = opt[this.id];
+ });
+ $(".set_button").each(function() {
+ $(this)[0].textContent = chrome.i18n.getMessage(this.id);
+ });
+
+ // get language dropdown menus
+ $(".bg_opt_drop_down_menu").each(function() {
+ $(this)[0].textContent = chrome.i18n.getMessage(this.id);
+ });
+
+
+
+
+ // get language for color pick labels
+ $(".color_border").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage("options_color_pick_border"));
+ });
+ $(".color_bucket").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage("options_color_pick_background"));
+ });
+ $(".pick_col_hover").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage("options_color_pick_hover"));
+ });
+ $(".font_color").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage("options_color_pick_font"));
+ });
+
+ $(".options_button_minus, .options_button_plus").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage(this.id));
+ });
+ $("#filter_clear_icon").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage("options_color_pick_filter_clear_icon"));
+ });
+
+
+
+
+ // get options for append child tab
+ for (var i = 0; i < $("#append_child_tab")[0].options.length; i++) {
+ if ($("#append_child_tab")[0].options[i].value === opt.append_child_tab) {
+ $("#append_child_tab")[0].selectedIndex = i;
+ break;
+ }
+ }
+
+ // get options for append child tab after limit
+ for (var i = 0; i < $("#append_child_tab_after_limit")[0].options.length; i++) {
+ if ($("#append_child_tab_after_limit")[0].options[i].value === opt.append_child_tab_after_limit) {
+ $("#append_child_tab_after_limit")[0].selectedIndex = i;
+ break;
+ }
+ }
+
+ // get options for append orphan tab
+ for (var i = 0; i < $("#append_orphan_tab")[0].options.length; i++) {
+ if ($("#append_orphan_tab")[0].options[i].value === opt.append_orphan_tab) {
+ $("#append_orphan_tab")[0].selectedIndex = i;
+ break;
+ }
+ }
+
+ // get options for action after closing active tab
+ for (var i = 0; i < $("#after_closing_active_tab")[0].options.length; i++) {
+ if ($("#after_closing_active_tab")[0].options[i].value === opt.after_closing_active_tab) {
+ $("#after_closing_active_tab")[0].selectedIndex = i;
+ break;
+ }
+ }
+
+ // get options for tabs tree depth option
+ $("#max_tree_depth")[0].value = opt.max_tree_depth;
+
+ // append themes to dropdown menu
+ for (var i = 0; i < themes.length; i++) {
+ var t_list = document.getElementById("theme_list");
+ var theme_name = document.createElement("option");
+ theme_name.value = themes[i];
+ theme_name.text = themes[i];
+ t_list.add(theme_name);
+ }
+
+ // select current theme in dropdown list
+ for (var i = 0; i < $("#theme_list")[0].options.length; i++) {
+ if ($("#theme_list")[0].options[i].value == localStorage["current_theme"]) {
+ $("#theme_list")[0].selectedIndex = i;
+ break;
+ }
+ }
+}
+
+
+
+function RemoveRedPreview() {
+ 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 events
+function SetEvents() {
+// --------------------------------DONATIONS------------------------------------------------------------------------------
+
+ // Donate
+ $(document).on("click", "#donate_paypal", function(event) {
+ chrome.tabs.create({url: "https://www.paypal.me/KarolJagiello/1"});
+ });
+
+ $(document).on("click", "#donate_bitcoin", function(event) {
+ copyStringToClipboard("19Z8w1RJEcBQpKSdiWa3UTBuKRJUkr96nJ");
+ alert(chrome.i18n.getMessage("options_copied_wallet_address"));
+ });
+
+ $(document).on("click", "#donate_ethereum", function(event) {
+ copyStringToClipboard("0x70B05eAD03bF08220d5aF4E1E868C351bfe145D6");
+ alert(chrome.i18n.getMessage("options_copied_wallet_address"));
+ });
+
+
+
+
+// --------------------------------COPY VIVALDI LINK----------------------------------------------------------------------
+
+ $(document).on("click", "#copy_vivaldi_url_for_web_panel", function(event) {
+ copyStringToClipboard(chrome.runtime.getURL("sidebar.html"));
+ alert(chrome.i18n.getMessage("options_vivaldi_copied_url"));
+ });
+
+// --------------------------------ADD RED PREVIEW------------------------------------------------------------------------
+
+ $(document).on("mouseenter", ".pick_col, #filter_box_font", function(event) {
+ document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": red; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+ });
+ $(document).on("mouseenter", ".font_weight_normal", function(event) {
+ document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": normal; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+ });
+ $(document).on("mouseenter", ".font_weight_bold", function(event) {
+ document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": bold; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+ });
+
+ $(document).on("mouseenter", ".font_style_normal", function(event) {
+ document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": normal; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+ });
+ $(document).on("mouseenter", ".font_style_italic", function(event) {
+ document.styleSheets[document.styleSheets.length-1].insertRule("body { --"+this.id+": italic; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+ });
+
+ $(document).on("mouseleave", ".pick_col, .font_weight_normal, .font_weight_bold, .font_style_normal, .font_style_italic, #filter_box_font", function(event) {
+ RemoveRedPreview();
+ });
+
+ $(document).on("mouseenter", "#scrollbar_thumb_hover", function(event) {
+ $("#group_scrollbar_thumb, #pin_list_scrollbar_thumb").addClass("hover_blinking");
+ });
+
+ $(document).on("mouseleave", "#scrollbar_thumb_hover", function(event) {
+ $("#group_scrollbar_thumb, #pin_list_scrollbar_thumb").removeClass("hover_blinking");
+ });
+
+ $(document).on("mouseenter", "#group_list_button_hover_background", function(event) {
+ $("#_tab_list2").addClass("hover_blinking");
+ });
+
+ $(document).on("mouseleave", "#group_list_button_hover_background", function(event) {
+ $("#_tab_list2").removeClass("hover_blinking");
+ });
+
+ $(document).on("mouseenter", "#button_hover_background", function(event) {
+ $(".button").addClass("hover_blinking");
+ });
+ $(document).on("mouseleave", "#button_hover_background", function(event) {
+ $(".button").removeClass("hover_blinking");
+ });
+
+ $(document).on("mouseenter", "#button_icons_hover", function(event) {
+ $(".button_img").addClass("hover_blinking");
+ });
+ $(document).on("mouseleave", "#button_icons_hover", function(event) {
+ $(".button_img").removeClass("hover_blinking");
+ });
+
+ $(document).on("mouseenter", "#button_hover_border", function(event) {
+ $(".button").addClass("hover_border_blinking");
+ });
+ $(document).on("mouseleave", "#button_hover_border", function(event) {
+ $(".button").removeClass("hover_border_blinking");
+ });
+
+
+
+// filter_box_font
+
+ $(document).on("mouseenter", "#options_tab_list_scrollbar_width_up, #options_tab_list_scrollbar_width_down", function(event) {
+ $("#group_scrollbar, #group_scrollbar_thumb").css({ "background-color": "red" });
+ });
+ $(document).on("mouseleave", "#options_tab_list_scrollbar_width_up, #options_tab_list_scrollbar_width_down", function(event) {
+ $("#group_scrollbar, #group_scrollbar_thumb").css({ "background-color": "" });
+ });
+
+ $(document).on("mouseenter", "#options_tab_list_scrollbar_height_up, #options_tab_list_scrollbar_height_down", function(event) {
+ $("#pin_list_scrollbar, #pin_list_scrollbar_thumb").css({ "background-color": "red" });
+ });
+ $(document).on("mouseleave", "#options_tab_list_scrollbar_height_up, #options_tab_list_scrollbar_height_down", function(event) {
+ $("#pin_list_scrollbar, #pin_list_scrollbar_thumb").css({ "background-color": "" });
+ });
+
+
+
+// --------------------------------------COLOR PICKER---------------------------------------------------------------------
+
+ // change fonts weight
+ $(document).on("mousedown", ".font_weight_normal, .font_weight_bold", function(event) {
+ event.stopPropagation();
+ SelectedTheme["ColorsSet"][this.id] = $(this).is(".font_weight_normal") ? "normal" : "bold";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ });
+
+ // change fonts style
+ $(document).on("mousedown", ".font_style_normal, .font_style_italic", function(event) {
+ event.stopPropagation();
+ SelectedTheme["ColorsSet"][this.id] = $(this).is(".font_style_normal") ? "normal" : "italic";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ });
+
+
+ // show color picker
+ $(document).on("click", ".pick_col", function(event) {
+ RemoveRedPreview();
+ // if (event.shiftKey || event.ctrlKey) return;
+ event.stopPropagation();
+ PickColor = this.id;
+ let bod = document.getElementById("body");
+ let color = window.getComputedStyle(bod, null).getPropertyValue("--"+this.id);
+ $("#color_picker")[0].value = color.replace(" ", "");
+ $("#color_picker").click();
+ });
+ $(document).on("input", "#color_picker", function(event) {
+ event.stopPropagation();
+ SelectedTheme["ColorsSet"][PickColor] = $("#color_picker")[0].value;
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ });
+
+
+
+
+// ----------------------------------EVENTS FOR CHECKBOXES AND DROPDOWN MENUS---------------------------------------------
+ // set checkbox options on/off and save
+ $(document).on("click", ".bg_opt", function(event) {
+ opt[this.id] = $(this)[0].checked ? true : false;
+ SavePreferences();
+ });
+
+ // options that need reload
+ $(document).on("click", "#syncro_tabbar_tabs_order, #allow_pin_close, #switch_with_scroll, #always_show_close, #never_show_close, #close_other_trees", function(event) {
+ chrome.runtime.sendMessage({command: "reload_sidebar"});
+ });
+
+ // set dropdown menu options
+ $("#append_child_tab, #append_child_tab_after_limit, #after_closing_active_tab, #append_orphan_tab").change(function() {
+ opt[this.id] = $(this).val();
+ SavePreferences();
+ });
+
+
+ // set tabs tree depth option
+ $(document).on("input", "#max_tree_depth", function(event) {
+ opt.max_tree_depth = $(this)[0].value;
+ SavePreferences();
+ });
+
+
+ // set toolbar on/off and show/hide all toolbar options
+ $(document).on("click", "#show_toolbar", function(event) {
+ SelectedTheme.ToolbarShow = $("#show_toolbar")[0].checked ? true : false;
+ SaveTheme($("#theme_list").val());
+ LoadTheme($("#theme_list").val());
+ });
+
+
+// ------------------------------OTHER------------------------------------------------------------------------------------
+
+ // block system dragging
+ $(document).bind("drop dragover", function(event) {
+ event.preventDefault();
+ });
+
+// ----------------------------TOOLBAR CUSTOMIZATION----------------------------------------------------------------------
+
+
+ $(document).on("mousedown", ".button", function(event) {
+ $("#button_filter_clear").css({"opacity": "1", "position": "absolute"});
+ if ($(this).is("#button_filter_type, #filter_search_go_prev, #filter_search_go_next")) {
+ return;
+ }
+ $(this).attr("draggable", "true");
+ dragged_button = this;
+ });
+
+ // set dragged button node
+ $(document).on("dragstart", ".button", function(event) {
+ event.originalEvent.dataTransfer.setData(" "," ");
+ event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+ });
+
+ // remove draggable attribute to clean html which will be saved in the toolbar
+ $(document).on("mouseleave", ".button", function(event) {
+ $(".button").removeAttr("draggable");
+ });
+
+
+
+ // drag&drop buttons to lists
+ $(document).on("dragenter", "#toolbar_main, .toolbar_shelf, #toolbar_unused_buttons", function(event) {
+ if ($(dragged_button).is("#button_tools, #button_search, #button_groups, #button_backup, #button_folders") && $(this).is(".toolbar_shelf")) {
+ return;
+ }
+ if (dragged_button.parentNode.id != this.id) {
+ // if ($(dragged_button).is("#button_tools, #button_search, #button_groups, #button_backup, #button_folders") && $(this).is("#toolbar_unused_buttons")) {
+ // $(".on").removeClass("on");
+ // }
+ $("#"+dragged_button.id).appendTo($(this));
+ }
+ });
+
+ // move (flip) buttons
+ $(document).on("dragenter", ".button", function(event) {
+ if ($(dragged_button).is("#button_tools, #button_search, #button_groups, #button_backup, #button_folders") && $(this).parent().is(".toolbar_shelf")) {
+ return;
+ }
+ if ($(this).parent().is("#toolbar_search, #toolbar_search_buttons")) {
+ return;
+ }
+ if ( $(this).index() <= $("#"+dragged_button.id).index()) {
+ $("#"+dragged_button.id).insertBefore($(this));
+ } else {
+ $("#"+dragged_button.id).insertAfter($(this));
+ }
+ });
+
+ // save toolbar
+ $(document).on("dragend", ".button", function(event) {
+ $("#button_filter_clear").css({"opacity": "0"});
+
+ SelectedTheme.toolbar = $("#toolbar").html();
+ SelectedTheme.unused_buttons = $("#toolbar_unused_buttons").html();
+ SaveTheme($("#theme_list").val());
+ $("#button_filter_clear").css({"opacity": "1"});
+ });
+
+ // reset toolbar
+ $(document).on("click", "#options_reset_toolbar_button", function(event) {
+ SelectedTheme["toolbar"] = DefaultToolbar;
+ SelectedTheme["unused_buttons"] = "";
+ $("#toolbar").html(DefaultToolbar);
+ $("#toolbar_unused_buttons").html("");
+ SaveTheme($("#theme_list").val());
+ $(".on").removeClass("on");
+ RefreshGUI();
+ });
+
+
+// --------------------------------------THEME BUTTONS--------------------------------------------------------------------
+
+
+ // add new theme preset button
+ $(document).on("click", "#options_add_theme_button", function(event) {
+ AddNewTheme();
+ });
+
+ // remove theme preset button
+ $(document).on("click", "#options_remove_theme_button", function(event) {
+ DeleteSelectedTheme();
+ });
+
+ // select theme from list
+ $("#theme_list").change(function() {
+ localStorage["current_theme"] = $(this).val();
+ LoadTheme($(this).val());
+ });
+
+ // import theme preset button
+ $(document).on("click", "#options_import_theme_button", function(event) {
+ ShowOpenFileDialog("import_theme", ".tt_theme");
+ });
+ $(document).on("change", "#import_theme", function(event) {
+ ImportTheme();
+ });
+
+ // export theme preset button
+ $(document).on("click", "#options_export_theme_button", function(event) {
+ if ($("#theme_list")[0].options.length == 0) {
+ alert(chrome.i18n.getMessage("options_no_theme_to_export"));
+ } else {
+ SaveFile($("#theme_list").val() + ".tt_theme", SelectedTheme);
+ }
+ });
+
+ // rename theme preset button
+ $(document).on("click", "#options_rename_theme_button", function(event) {
+ RenameSelectedTheme();
+ });
+
+
+
+
+
+// -------------------------------INDENTATION ADJUSTMENT------------------------------------------------------------------
+
+ // change tabs size preset(down)
+ $(document).on("click", "#options_tabs_indentation_down", function(event) {
+ let bod = document.getElementById("body");
+ var indentation = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--children_padding_left")).replace("p","").replace("x",""));
+ if (indentation > 0) {
+ indentation--;
+ SelectedTheme["ColorsSet"]["children_padding_left"] = indentation+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+ // change tabs size preset(up)
+ $(document).on("click", "#options_tabs_indentation_up", function(event) {
+ let bod = document.getElementById("body");
+ var indentation = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--children_padding_left")).replace("p","").replace("x",""));
+ if (indentation < 50) {
+ indentation++;
+ SelectedTheme["ColorsSet"]["children_padding_left"] = indentation+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+
+// --------------------------TABS ROUNDNESS ADJUSTMENT--------------------------------------------------------------------
+
+ // change tabs roundness preset(down)
+ $(document).on("click", "#options_tabs_roundness_down", function(event) {
+ let bod = document.getElementById("body");
+ var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--tab_header_border_radius").replace("p","").replace("x","")));
+ if (border_radius > 0) {
+ border_radius--;
+ SelectedTheme["ColorsSet"]["tab_header_border_radius"] = border_radius+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+ // change tabs roundness preset(up)
+ $(document).on("click", "#options_tabs_roundness_up", function(event) {
+ let bod = document.getElementById("body");
+ var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--tab_header_border_radius")).replace("p","").replace("x",""));
+ if (border_radius < 25) {
+ border_radius++;
+ SelectedTheme["ColorsSet"]["tab_header_border_radius"] = border_radius+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+// -------------------------------SIZE ADJUSTMENT-------------------------------------------------------------------------
+
+ // change tabs size preset(down)
+ $(document).on("click", "#options_tabs_size_down", function(event) {
+ if (SelectedTheme["TabsSizeSetNumber"] > 0) {
+ SelectedTheme["TabsSizeSetNumber"]--;
+ ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
+ ApplySizeOptionsSet(SelectedTheme["TabsSizeSetNumber"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+ // change tabs size preset(up)
+ $(document).on("click", "#options_tabs_size_up", function(event) {
+ if (SelectedTheme["TabsSizeSetNumber"] < 4) {
+ SelectedTheme["TabsSizeSetNumber"]++;
+ ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
+ ApplySizeOptionsSet(SelectedTheme["TabsSizeSetNumber"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+
+// -------------------------------TABS SCROLLBAR SIZE ADJUSTMENT----------------------------------------------------------
+
+ // change tab list scrollbar preset(down)
+ $(document).on("mousedown", "#options_tab_list_scrollbar_width_down", function(event) {
+ let bod = document.getElementById("body");
+ var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_width").replace("p","").replace("x","")));
+ if (border_radius > 0) {
+ border_radius--;
+ SelectedTheme["ColorsSet"]["scrollbar_width"] = border_radius+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+ // change tab list scrollbar preset(up)
+ $(document).on("mousedown", "#options_tab_list_scrollbar_width_up", function(event) {
+ let bod = document.getElementById("body");
+ var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_width")).replace("p","").replace("x",""));
+ if (border_radius < 20) {
+ border_radius++;
+ SelectedTheme["ColorsSet"]["scrollbar_width"] = border_radius+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+ // change pin list scrollbar preset(down)
+ $(document).on("mousedown", "#options_tab_list_scrollbar_height_down", function(event) {
+ let bod = document.getElementById("body");
+ var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_height").replace("p","").replace("x","")));
+ if (border_radius > 0) {
+ border_radius--;
+ SelectedTheme["ColorsSet"]["scrollbar_height"] = border_radius+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+ // change pin list scrollbar preset(up)
+ $(document).on("mousedown", "#options_tab_list_scrollbar_height_up", function(event) {
+ let bod = document.getElementById("body");
+ var border_radius = parseInt((window.getComputedStyle(bod, null).getPropertyValue("--scrollbar_height")).replace("p","").replace("x",""));
+ if (border_radius < 20) {
+ border_radius++;
+ SelectedTheme["ColorsSet"]["scrollbar_height"] = border_radius+"px";
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ SaveTheme($("#theme_list").val());
+ }
+ });
+
+
+
+// ----------------------CLEAR DATA BUTTON--------------------------------------------------------------------------------
+
+
+ // clear data
+ $(document).on("click", "#options_clear_data", function(event) {
+ localStorage.clear();
+ chrome.runtime.sendMessage({command: "reload"});
+ chrome.runtime.sendMessage({command: "reload_sidebar"});
+ location.reload();
+ });
+
+
+
+
+// THIIIIIIIIIIIS IS TO MOVE ICONS FOR SETUP OPTIONS PAGE
+
+ // $(document).bind("contextmenu", function(event) {
+ // if (event.ctrlKey || event.shiftKey) {
+ // event.preventDefault();
+ // }
+ // });
+ // $(document).on("mousedown", "*", function(event) {
+ // $(document).on("mousedown", ".pick_col", function(event) {
+ // event.stopPropagation();
+ // if (event.button == 0 && event.shiftKey) {
+ // $(this).css({ "left": $(this).position().left-1 });
+ // }
+ // if (event.button == 2 && event.shiftKey) {
+ // $(this).css({ "left": $(this).position().left+1 });
+ // }
+ // if (event.button == 0 && event.ctrlKey) {
+ // $(this).css({ "top": $(this).position().top-1 });
+ // }
+ // if (event.button == 2 && event.ctrlKey) {
+ // $(this).css({ "top": $(this).position().top+1 });
+ // }
+ // console.log(this.id + " top: " + $(this).position().top + "px; left: " + $(this).position().left + "px;");
+ // console.log(this.id);
+ // });
+}
+
+
+function copyStringToClipboard(string) {
+ function handler (event){
+ event.clipboardData.setData('text/plain', string);
+ event.preventDefault();
+ document.removeEventListener('copy', handler, true);
+ }
+ document.addEventListener('copy', handler, true);
+ document.execCommand('copy');
+}
+
+
+// dummy functions
+function BindTabsSwitchingToMouseWheel() {}
+function GetFaviconAndTitle() {}
+function RefreshMediaIcon() {}
\ No newline at end of file
diff --git a/options/options_color_border.svg b/options/options_color_border.svg
new file mode 100644
index 0000000..4c2e1d4
--- /dev/null
+++ b/options/options_color_border.svg
@@ -0,0 +1,68 @@
+
+
+
+
diff --git a/options/options_color_border_hover - Copy.svg b/options/options_color_border_hover - Copy.svg
new file mode 100644
index 0000000..fa4efc9
--- /dev/null
+++ b/options/options_color_border_hover - Copy.svg
@@ -0,0 +1,64 @@
+
+
+
+
diff --git a/options/options_color_border_hover.svg b/options/options_color_border_hover.svg
new file mode 100644
index 0000000..fa4efc9
--- /dev/null
+++ b/options/options_color_border_hover.svg
@@ -0,0 +1,64 @@
+
+
+
+
diff --git a/options/options_color_brush.svg b/options/options_color_brush.svg
new file mode 100644
index 0000000..2ce8e7c
--- /dev/null
+++ b/options/options_color_brush.svg
@@ -0,0 +1,94 @@
+
+
+
+
diff --git a/options/options_color_brush_hover.svg b/options/options_color_brush_hover.svg
new file mode 100644
index 0000000..891bc73
--- /dev/null
+++ b/options/options_color_brush_hover.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_color_bucket.svg b/options/options_color_bucket.svg
new file mode 100644
index 0000000..0aa2800
--- /dev/null
+++ b/options/options_color_bucket.svg
@@ -0,0 +1,77 @@
+
+
+
+
diff --git a/options/options_color_bucket_hover.svg b/options/options_color_bucket_hover.svg
new file mode 100644
index 0000000..7a9a553
--- /dev/null
+++ b/options/options_color_bucket_hover.svg
@@ -0,0 +1,74 @@
+
+
+
+
diff --git a/options/options_color_toolbar_icon.svg b/options/options_color_toolbar_icon.svg
new file mode 100644
index 0000000..7ab628f
--- /dev/null
+++ b/options/options_color_toolbar_icon.svg
@@ -0,0 +1,77 @@
+
+
+
+
diff --git a/options/options_color_toolbar_icon_hover.svg b/options/options_color_toolbar_icon_hover.svg
new file mode 100644
index 0000000..4dc2f37
--- /dev/null
+++ b/options/options_color_toolbar_icon_hover.svg
@@ -0,0 +1,77 @@
+
+
+
+
diff --git a/options/options_color_x.svg b/options/options_color_x.svg
new file mode 100644
index 0000000..88d8e68
--- /dev/null
+++ b/options/options_color_x.svg
@@ -0,0 +1,75 @@
+
+
+
+
diff --git a/options/options_color_x_hover.svg b/options/options_color_x_hover.svg
new file mode 100644
index 0000000..5ace84c
--- /dev/null
+++ b/options/options_color_x_hover.svg
@@ -0,0 +1,72 @@
+
+
+
+
diff --git a/options/options_copy_icon.png b/options/options_copy_icon.png
new file mode 100644
index 0000000..f897004
Binary files /dev/null and b/options/options_copy_icon.png differ
diff --git a/options/options_font_color.svg b/options/options_font_color.svg
new file mode 100644
index 0000000..6b70442
--- /dev/null
+++ b/options/options_font_color.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_font_color_hover.svg b/options/options_font_color_hover.svg
new file mode 100644
index 0000000..d13d5a1
--- /dev/null
+++ b/options/options_font_color_hover.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_font_style_italic.svg b/options/options_font_style_italic.svg
new file mode 100644
index 0000000..88a8492
--- /dev/null
+++ b/options/options_font_style_italic.svg
@@ -0,0 +1,67 @@
+
+
+
+
diff --git a/options/options_font_style_italic_hover.svg b/options/options_font_style_italic_hover.svg
new file mode 100644
index 0000000..ae00d0e
--- /dev/null
+++ b/options/options_font_style_italic_hover.svg
@@ -0,0 +1,67 @@
+
+
+
+
diff --git a/options/options_font_style_normal.svg b/options/options_font_style_normal.svg
new file mode 100644
index 0000000..ce6099f
--- /dev/null
+++ b/options/options_font_style_normal.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_font_style_normal_hover.svg b/options/options_font_style_normal_hover.svg
new file mode 100644
index 0000000..087e660
--- /dev/null
+++ b/options/options_font_style_normal_hover.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_font_weight_bold.svg b/options/options_font_weight_bold.svg
new file mode 100644
index 0000000..cd11cbf
--- /dev/null
+++ b/options/options_font_weight_bold.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_font_weight_bold_hover.svg b/options/options_font_weight_bold_hover.svg
new file mode 100644
index 0000000..ca12eb8
--- /dev/null
+++ b/options/options_font_weight_bold_hover.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_scale_minus.svg b/options/options_scale_minus.svg
new file mode 100644
index 0000000..85f5426
--- /dev/null
+++ b/options/options_scale_minus.svg
@@ -0,0 +1,62 @@
+
+
+
+
diff --git a/options/options_scale_minus_hover.svg b/options/options_scale_minus_hover.svg
new file mode 100644
index 0000000..3291de0
--- /dev/null
+++ b/options/options_scale_minus_hover.svg
@@ -0,0 +1,70 @@
+
+
+
+
diff --git a/options/options_scale_plus.svg b/options/options_scale_plus.svg
new file mode 100644
index 0000000..60d528a
--- /dev/null
+++ b/options/options_scale_plus.svg
@@ -0,0 +1,67 @@
+
+
+
+
diff --git a/options/options_scale_plus_hover.svg b/options/options_scale_plus_hover.svg
new file mode 100644
index 0000000..b376da2
--- /dev/null
+++ b/options/options_scale_plus_hover.svg
@@ -0,0 +1,75 @@
+
+
+
+
diff --git a/options/options_scrollbar_size_indicator.svg b/options/options_scrollbar_size_indicator.svg
new file mode 100644
index 0000000..6147654
--- /dev/null
+++ b/options/options_scrollbar_size_indicator.svg
@@ -0,0 +1,107 @@
+
+
+
+
diff --git a/options/options_tabs_indentation_indicator.svg b/options/options_tabs_indentation_indicator.svg
new file mode 100644
index 0000000..a61bfbb
--- /dev/null
+++ b/options/options_tabs_indentation_indicator.svg
@@ -0,0 +1,109 @@
+
+
+
+
diff --git a/options/options_tabs_roundness_indicator.svg b/options/options_tabs_roundness_indicator.svg
new file mode 100644
index 0000000..cfc8ac0
--- /dev/null
+++ b/options/options_tabs_roundness_indicator.svg
@@ -0,0 +1,94 @@
+
+
+
+
diff --git a/options/options_tabs_size_indicator.svg b/options/options_tabs_size_indicator.svg
new file mode 100644
index 0000000..07cb040
--- /dev/null
+++ b/options/options_tabs_size_indicator.svg
@@ -0,0 +1,109 @@
+
+
+
+
diff --git a/options/refresh.js b/options/refresh.js
new file mode 100644
index 0000000..296d83b
--- /dev/null
+++ b/options/refresh.js
@@ -0,0 +1,35 @@
+// 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/
+
+// shrink or expand theme field
+function RefreshFields() {
+ if ($("#theme_list")[0].options.length == 0) {
+ $("#field_theme").css({"height": "45px"});
+ } else {
+ $("#field_theme").css({"height": ""});
+ }
+ if (browserId != "F") {
+ $("#faster_scroll_for_firefox").hide();
+ }
+ if (browserId == "F") {
+ $("#scrollbar_size_indicator").hide();
+ }
+ if (browserId == "V") {
+ $("#url_for_web_panel").val(chrome.runtime.getURL("sidebar.html"));
+ $("#url_for_web_panel").prop("readonly", true);
+ // $("#url_for_web_panel").select();
+ } else{
+ $("#field_vivaldi").hide();
+ }
+}
+
+function RefreshGUI() {
+ $("#button_filter_type").addClass("url").removeClass("title");
+ if ($(".button").is(".on")) {
+ $("#toolbar").css({ "height": 53 });
+ } else {
+ $("#toolbar").css({ "height": 26 });
+ }
+}
+
diff --git a/options/sample_tabs.js b/options/sample_tabs.js
new file mode 100644
index 0000000..ba04a3e
--- /dev/null
+++ b/options/sample_tabs.js
@@ -0,0 +1,125 @@
+// 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 AppendSampleTabs() {
+ // pins
+ AppendTab({tab: {id: 0, pinned: true}, Append: true});
+ AppendTab({tab: {id: 1, pinned: true, active: false}, Append: true});
+
+ AppendTab({tab: {id: 10, pinned: true, active: false}, Append: true});
+ $(".pin#10").addClass("attention");
+
+
+ // regular tabs
+ AppendTab({tab: {id: 2, pinned: false}, Append: true});
+ $("#tab_title2")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal");
+
+ AppendTab({tab: {id: 11, pinned: false}, Append: true, ParentId: "2"});
+ $("#tab_title11")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_hover");
+ $("#tab_header11").addClass("tab_header_hover").addClass("close_show");
+
+ AppendTab({tab: {id: 12, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "selected"});
+ $("#tab_title12")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_selected");
+
+ AppendTab({tab: {id: 13, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "selected"});
+ $("#tab_title13")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_normal_selected_hover");
+ $("#tab_header13").addClass("tab_header_hover").addClass("close_show");
+ $("#close13").addClass("close_hover");
+
+ // regular active tabs
+ AppendTab({tab: {id: 3, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "active"});
+ $("#tab_title3")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active");
+
+ AppendTab({tab: {id: 15, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "active"});
+ $("#tab_title15")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_hover");
+ $("#tab_header15").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 14, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "c selected active"});
+ $("#tab_title14")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected");
+
+ AppendTab({tab: {id: 16, pinned: false}, Append: true, ParentId: "2", AdditionalClass: "c selected active"});
+ $("#tab_title16")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_active_selected_hover");
+ $("#tab_header16").addClass("tab_header_hover");
+ $("#exp16").addClass("hover");
+
+ // discarded tabs
+ AppendTab({tab: {id: 5, pinned: false, discarded: true}, Append: true});
+ $("#tab_title5")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded");
+
+ AppendTab({tab: {id: 17, pinned: false, discarded: true}, Append: true, ParentId: "5"});
+ $("#tab_title17")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_hover");
+ $("#tab_header17").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 19, pinned: false, discarded: true}, Append: true, ParentId: "5", AdditionalClass: "selected"});
+ $("#tab_title19")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected");
+
+ AppendTab({tab: {id: 20, pinned: false, discarded: true}, Append: true, ParentId: "5", AdditionalClass: "selected"});
+ $("#tab_title20")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_discarded_selected_hover");
+ $("#tab_header20").addClass("tab_header_hover");
+
+ // search result
+ AppendTab({tab: {id: 6, pinned: false}, Append: true, AdditionalClass: "filtered"});
+ $("#tab_title6")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result");
+
+ AppendTab({tab: {id: 21, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "filtered"});
+ $("#tab_title21")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_hover");
+ $("#tab_header21").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 22, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "filtered active"});
+ $("#tab_title22")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_active");
+
+ AppendTab({tab: {id: 23, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "filtered active"});
+ $("#tab_title23")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_active_hover");
+ $("#tab_header23").addClass("tab_header_hover");
+
+
+ // search result selected
+ AppendTab({tab: {id: 8, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected filtered"});
+ $("#tab_title8")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected");
+
+ AppendTab({tab: {id: 18, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected filtered"});
+ $("#tab_title18")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_hover");
+ $("#tab_header18").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 25, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected filtered active"});
+ $("#tab_title25")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active");
+
+
+ AppendTab({tab: {id: 26, pinned: false}, Append: true, ParentId: "6", AdditionalClass: "selected filtered active"});
+ $("#tab_title26")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_selected_active_hover");
+ $("#tab_header26").addClass("tab_header_hover");
+
+ // search result highlighted
+ AppendTab({tab: {id: 30, pinned: false}, Append: true, AdditionalClass: "filtered highlighted_search"});
+ $("#tab_title30")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted");
+
+ AppendTab({tab: {id: 31, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "filtered highlighted_search"});
+ $("#tab_title31")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_hover");
+ $("#tab_header31").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 32, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "filtered highlighted_search active"});
+ $("#tab_title32")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_active");
+
+ AppendTab({tab: {id: 33, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "filtered highlighted_search active"});
+ $("#tab_title33")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_active_hover");
+ $("#tab_header33").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 34, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected filtered highlighted_search"});
+ $("#tab_title34")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected");
+
+ AppendTab({tab: {id: 35, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected filtered highlighted_search"});
+ $("#tab_title35")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_hover");
+ $("#tab_header35").addClass("tab_header_hover");
+
+ AppendTab({tab: {id: 36, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected filtered highlighted_search active"});
+ $("#tab_title36")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_active");
+
+
+ AppendTab({tab: {id: 37, pinned: false}, Append: true, ParentId: "30", AdditionalClass: "selected filtered highlighted_search active"});
+ $("#tab_title37")[0].textContent = chrome.i18n.getMessage("options_theme_tabs_sample_text_search_result_highlighted_selected_active_hover");
+ $("#tab_header37").addClass("tab_header_hover");
+
+ $("#_tab_list").addClass("active_group");
+
+}
\ No newline at end of file
diff --git a/options/theme.js b/options/theme.js
new file mode 100644
index 0000000..31c0330
--- /dev/null
+++ b/options/theme.js
@@ -0,0 +1,193 @@
+// 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) {
+ if (localStorage.getItem("theme"+themeName) != null) {
+ SelectedTheme = JSON.parse(localStorage["theme"+themeName]);
+ $("#new_theme_name")[0].value = themeName;
+ setTimeout(function() {
+ ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
+ ApplyColorsSet(SelectedTheme["ColorsSet"]);
+ ApplySizeOptionsSet(SelectedTheme["TabsSizeSetNumber"]);
+
+ $("#toolbar").html(SelectedTheme.toolbar);
+ $("#toolbar_unused_buttons").html(SelectedTheme.unused_buttons);
+
+ // expand toolbar options
+ SelectedTheme.ToolbarShow = $("#show_toolbar")[0].checked = SelectedTheme.ToolbarShow;
+ $("#field_show_toolbar").css({"height": $("#show_toolbar")[0].checked ? "" : "6"});
+ SelectedTheme.ToolbarShow ? $("#options_available_buttons, #toolbar, #toolbar_colors").show() : $("#options_available_buttons, #toolbar, #toolbar_colors").hide();
+
+ $(".on").removeClass("on");
+ RefreshGUI();
+
+ chrome.runtime.sendMessage({command: "reload_theme", themeName: "theme"+themeName});
+ }, 200);
+ }
+}
+
+function SaveTheme(themeName) {
+ localStorage["theme"+themeName] = JSON.stringify(SelectedTheme);
+ chrome.runtime.sendMessage({command: "reload_theme", themeName: "theme"+themeName});
+ return SelectedTheme;
+}
+
+function AddNewTheme() {
+ if (themes.indexOf($("#new_theme_name")[0].value) != -1) {
+ alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
+ return;
+ }
+
+ if ($("#new_theme_name")[0].value == "") {
+ alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
+ return;
+ }
+
+ $("#toolbar").html(DefaultToolbar);
+ SelectedTheme = Object.assign({}, DefaultTheme);
+ SelectedTheme["ColorsSet"] = {};
+ DefaultTheme["ColorsSet"] = {};
+
+ themes.push($("#new_theme_name")[0].value);
+ var t_list = document.getElementById("theme_list");
+ var theme_name = document.createElement("option");
+ theme_name.value = $("#new_theme_name")[0].value;
+ theme_name.text = theme_name.value;
+ t_list.add(theme_name);
+
+ $("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1;
+ SaveTheme(theme_name.value);
+ LoadTheme(theme_name.value);
+
+ localStorage["themes"] = JSON.stringify(themes);
+ localStorage["current_theme"] = $("#theme_list").val();
+ RefreshFields();
+}
+
+function DeleteSelectedTheme() {
+ if ($("#theme_list")[0].options.length == 0) {
+ localStorage["current_theme"] = "Default";
+ return;
+ }
+ themes.splice(themes.indexOf($("#theme_list").val()), 1);
+ localStorage["themes"] = JSON.stringify(themes);
+
+ // localStorage.removeItem("theme"+($("#theme_list").val()));
+ localStorage.removeItem("theme"+SelectedTheme["theme_name"]);
+
+ var x = document.getElementById("theme_list");
+ x.remove(x.selectedIndex);
+
+ localStorage["current_theme"] = ($("#theme_list")[0].options.length > 0) ? $("#theme_list").val() : "Default";
+ LoadTheme(localStorage["current_theme"]);
+ RefreshFields();
+ if ($("#theme_list")[0].options.length == 0) {
+ SelectedTheme = Object.assign({}, DefaultTheme);
+ SelectedTheme["ColorsSet"] = {};
+ chrome.runtime.sendMessage({command: "reload_theme", themeName: "themeDefault"});
+ }
+}
+
+function RenameSelectedTheme() {
+ if (themes.indexOf($("#new_theme_name")[0].value) != -1) {
+ alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
+ return;
+ }
+ if ($("#new_theme_name")[0].value == "") {
+ alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
+ return;
+ }
+ var t_list = document.getElementById("theme_list");
+ localStorage.removeItem("theme"+SelectedTheme["theme_name"]);
+ SelectedTheme["theme_name"] = $("#new_theme_name")[0].value;
+ themes[themes.indexOf(t_list.options[t_list.selectedIndex].value)] = SelectedTheme["theme_name"];
+ t_list.options[t_list.selectedIndex].value = t_list.options[t_list.selectedIndex].text = SelectedTheme["theme_name"];
+ localStorage["current_theme"] = SelectedTheme["theme_name"];
+ localStorage["themes"] = JSON.stringify(themes);
+ SaveTheme(SelectedTheme["theme_name"]);
+}
+
+
+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.remove();
+ 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 (themes.indexOf(themeObj.theme_name) == -1) {
+ SelectedTheme["theme_name"] = themeObj.theme_name;
+ } else {
+ SelectedTheme["theme_name"] = themeObj.theme_name + "(1)";
+ }
+
+ themes.push(SelectedTheme["theme_name"]);
+
+ SaveTheme(SelectedTheme["theme_name"]);
+ var t_list = document.getElementById("theme_list");
+ var theme_name = document.createElement("option");
+ theme_name.value = SelectedTheme["theme_name"];
+ theme_name.text = theme_name.value;
+ t_list.add(theme_name);
+
+ localStorage["themes"] = JSON.stringify(themes);
+ localStorage["current_theme"] = themeObj.theme_name;
+
+ $("#theme_list")[0].selectedIndex = $("#theme_list")[0].options.length-1;
+
+ LoadTheme(SelectedTheme["theme_name"]);
+ RefreshFields();
+
+ DefaultTheme["ColorsSet"] = {};
+ }
+ }
+
+}
+
+
+function ApplySizeOptionsSet(size){
+ for (let si = 0; si < document.styleSheets.length; si++) {
+ if ((document.styleSheets[si].ownerNode.id).match("size_settings") != null) {
+ if (document.styleSheets[si].ownerNode.id == "size_settings_"+size) {
+ document.styleSheets.item(si).disabled = false;
+ } else {
+ document.styleSheets.item(si).disabled = true;
+ }
+ }
+
+ }
+}
diff --git a/options/theme_size_settings_0.css b/options/theme_size_settings_0.css
new file mode 100644
index 0000000..573fa7a
--- /dev/null
+++ b/options/theme_size_settings_0.css
@@ -0,0 +1,168 @@
+/* OPTIONS IMAGES */
+.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
+.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
+.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
+.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
+.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
+.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
+
+.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
+.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
+
+.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
+.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
+
+.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
+.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
+
+.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
+.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
+
+.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
+.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
+
+.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
+.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
+.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
+.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
+
+@keyframes hover_blinking {
+ 0% {background-color: transparent;}
+ 100% {background-color: blue;}
+}
+.hover_blinking {
+ animation: hover_blinking 1s infinite;
+}
+
+@keyframes hover_border_blinking {
+ 0% {border: 1px solid transparent;}
+ 100% {border: 1px solid blue;}
+}
+.hover_border_blinking {
+ animation: hover_border_blinking 1s infinite;
+}
+
+/* MAIN TOOLBAR */
+#toolbar_background { top: 0px; left: 307px; }
+#toolbar_border_bottom { top: 0px; left: 328px; }
+
+#button_icons { top: 0px; left: 59px; }
+#button_icons_hover { top: 0px; left: 80px; }
+
+#button_background { top: 0px; left: 4px; }
+#button_hover_background { top: 0px; left: 25px; }
+
+#button_border { top: 0px; left: 115px; }
+#button_hover_border { top: 0px; left: 136px; }
+
+#filter_box_font { top: 0px; left: 175px; }
+#filter_clear_icon { top: 0px; left: 238px; }
+#filter_box_background { top: 0px; left: 196px; }
+#filter_box_border { top: 0px; left: 217px; }
+
+
+/* BIG OPTIONS BUTTONS */
+#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
+#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
+#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
+
+/* SCROLLBAR RESIZE */
+#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
+#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
+#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
+#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
+#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
+
+
+/* PIN LIST AND SCROLLBAR */
+#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
+
+#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
+#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
+#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+
+
+
+/* PINS */
+#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
+#pin_list_background { top: 1px; left: 187px; }
+#pin_list_border_bottom { top: 1px; left: 164px; }
+
+
+/* ATTENTION PIN */
+#attention_background { top: 1px; left: 72px; }
+#attention_border { top: 1px; left: 93px; }
+
+
+
+/* TAB LIST AND SCROLLBAR */
+#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
+
+#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
+#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
+#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
+#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
+#scrollbar_track { position: absolute; top: 410px; left: 790px; }
+
+#Tabs {
+ --row_image_size: 16px 16px;
+}
+/* TABS */
+#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
+
+.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 18px; /* background:rgba(255,0,0,0.1); */ }
+.tab_color_options_row>.color_border {top: 1px; left: 659px; background-size: var(--row_image_size);}
+.tab_color_options_row>.color_bucket {top: 1px; left: 680px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_color {top: 1px; left: 509px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_normal {top: 1px; left: 538px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_bold {top: 1px; left: 559px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_normal {top: 1px; left: 588px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_italic {top: 1px; left: 609px; background-size: var(--row_image_size);}
+
+
+/* DRAG AND DROP INDICATOR */
+#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
+#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_x { top: -14px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_background { top: 18px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#expand_hover_background { top: 1px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_closed_background { top: 1px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_open_background { top: 1px; left: 4px; background-size: var(--row_image_size);}
+
+
+#tab_list_background { top: 835px; left: 50px; }
+
+
+
+#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
+#_gtetab_list { width: 200px; height: 20px; }
+#_gtetab_list2 { width: 200px; height: 20px; }
+#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
+
+#group_list_background { top: 835px; left: 20px; }
+#group_list_borders { top: 631px; left: 20px; }
+#group_list_default_font_color { top: 652px; left: 20px; }
+#group_list_button_hover_background { top: 610px; left: 20px; }
+
+
+/* MENU */
+#tabs_menu_border { top: 59px; left: 80px; }
+#tabs_menu_background { top: 59px; left: 102px; }
+#tabs_menu_font { top: 36px; left: 102px; }
+#tabs_menu_hover_border { top: 14px; left: 80px; }
+#tabs_menu_hover_background { top: 14px; left: 102px; }
+#tabs_menu_separator { top: 36px; left: 80px; }
+
diff --git a/options/theme_size_settings_1.css b/options/theme_size_settings_1.css
new file mode 100644
index 0000000..e37931a
--- /dev/null
+++ b/options/theme_size_settings_1.css
@@ -0,0 +1,168 @@
+/* OPTIONS IMAGES */
+.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
+.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
+.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
+.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
+.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
+.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
+
+.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
+.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
+
+.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
+.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
+
+.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
+.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
+
+.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
+.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
+
+.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
+.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
+
+.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
+.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
+.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
+.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
+
+@keyframes hover_blinking {
+ 0% {background-color: transparent;}
+ 100% {background-color: blue;}
+}
+.hover_blinking {
+ animation: hover_blinking 1s infinite;
+}
+
+@keyframes hover_border_blinking {
+ 0% {border: 1px solid transparent;}
+ 100% {border: 1px solid blue;}
+}
+.hover_border_blinking {
+ animation: hover_border_blinking 1s infinite;
+}
+
+/* MAIN TOOLBAR */
+#toolbar_background { top: 0px; left: 307px; }
+#toolbar_border_bottom { top: 0px; left: 328px; }
+
+#button_icons { top: 0px; left: 59px; }
+#button_icons_hover { top: 0px; left: 80px; }
+
+#button_background { top: 0px; left: 4px; }
+#button_hover_background { top: 0px; left: 25px; }
+
+#button_border { top: 0px; left: 115px; }
+#button_hover_border { top: 0px; left: 136px; }
+
+#filter_box_font { top: 0px; left: 175px; }
+#filter_clear_icon { top: 0px; left: 238px; }
+#filter_box_background { top: 0px; left: 196px; }
+#filter_box_border { top: 0px; left: 217px; }
+
+
+/* BIG OPTIONS BUTTONS */
+#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
+#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
+#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
+
+/* SCROLLBAR RESIZE */
+#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
+#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
+#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
+#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
+#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
+
+
+/* PIN LIST AND SCROLLBAR */
+#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
+
+#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
+#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
+#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+
+
+
+/* PINS */
+#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
+#pin_list_background { top: 1px; left: 187px; }
+#pin_list_border_bottom { top: 1px; left: 164px; }
+
+
+/* ATTENTION PIN */
+#attention_background { top: 1px; left: 72px; }
+#attention_border { top: 1px; left: 93px; }
+
+
+
+/* TAB LIST AND SCROLLBAR */
+#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
+
+#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
+#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
+#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
+#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
+#scrollbar_track { position: absolute; top: 410px; left: 790px; }
+
+#Tabs {
+ --row_image_size: 18px 18px;
+}
+/* TABS */
+#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
+
+.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 20px; /* background:rgba(255,0,0,0.1); */ }
+.tab_color_options_row>.color_border {top: 1px; left: 659px; background-size: var(--row_image_size);}
+.tab_color_options_row>.color_bucket {top: 1px; left: 680px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_color {top: 1px; left: 509px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_normal {top: 1px; left: 538px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_bold {top: 1px; left: 559px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_normal {top: 1px; left: 588px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_italic {top: 1px; left: 609px; background-size: var(--row_image_size);}
+
+
+/* DRAG AND DROP INDICATOR */
+#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
+#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_x { top: -16px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_background { top: 20px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#expand_hover_background { top: 1px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_closed_background { top: 1px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_open_background { top: 1px; left: 4px; background-size: var(--row_image_size);}
+
+
+#tab_list_background { top: 835px; left: 50px; }
+
+
+
+#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
+#_gtetab_list { width: 200px; height: 20px; }
+#_gtetab_list2 { width: 200px; height: 20px; }
+#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
+
+#group_list_background { top: 835px; left: 20px; }
+#group_list_borders { top: 631px; left: 20px; }
+#group_list_default_font_color { top: 652px; left: 20px; }
+#group_list_button_hover_background { top: 610px; left: 20px; }
+
+
+/* MENU */
+#tabs_menu_border { top: 59px; left: 80px; }
+#tabs_menu_background { top: 59px; left: 102px; }
+#tabs_menu_font { top: 36px; left: 102px; }
+#tabs_menu_hover_border { top: 14px; left: 80px; }
+#tabs_menu_hover_background { top: 14px; left: 102px; }
+#tabs_menu_separator { top: 36px; left: 80px; }
+
diff --git a/options/theme_size_settings_2.css b/options/theme_size_settings_2.css
new file mode 100644
index 0000000..d60a9ed
--- /dev/null
+++ b/options/theme_size_settings_2.css
@@ -0,0 +1,168 @@
+/* OPTIONS IMAGES */
+.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
+.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
+.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
+.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
+.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
+.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
+
+.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
+.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
+
+.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
+.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
+
+.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
+.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
+
+.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
+.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
+
+.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
+.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
+
+.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
+.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
+.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
+.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
+
+@keyframes hover_blinking {
+ 0% {background-color: transparent;}
+ 100% {background-color: blue;}
+}
+.hover_blinking {
+ animation: hover_blinking 1s infinite;
+}
+
+@keyframes hover_border_blinking {
+ 0% {border: 1px solid transparent;}
+ 100% {border: 1px solid blue;}
+}
+.hover_border_blinking {
+ animation: hover_border_blinking 1s infinite;
+}
+
+/* MAIN TOOLBAR */
+#toolbar_background { top: 0px; left: 307px; }
+#toolbar_border_bottom { top: 0px; left: 328px; }
+
+#button_icons { top: 0px; left: 59px; }
+#button_icons_hover { top: 0px; left: 80px; }
+
+#button_background { top: 0px; left: 4px; }
+#button_hover_background { top: 0px; left: 25px; }
+
+#button_border { top: 0px; left: 115px; }
+#button_hover_border { top: 0px; left: 136px; }
+
+#filter_box_font { top: 0px; left: 175px; }
+#filter_clear_icon { top: 0px; left: 238px; }
+#filter_box_background { top: 0px; left: 196px; }
+#filter_box_border { top: 0px; left: 217px; }
+
+
+/* BIG OPTIONS BUTTONS */
+#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
+#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
+#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
+
+/* SCROLLBAR RESIZE */
+#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
+#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
+#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
+#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
+#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
+
+
+/* PIN LIST AND SCROLLBAR */
+#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
+
+#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
+#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
+#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+
+
+
+/* PINS */
+#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
+#pin_list_background { top: 3px; left: 187px; }
+#pin_list_border_bottom { top: 3px; left: 164px; }
+
+
+/* ATTENTION PIN */
+#attention_background { top: 3px; left: 72px; }
+#attention_border { top: 3px; left: 93px; }
+
+
+
+/* TAB LIST AND SCROLLBAR */
+#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
+
+#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
+#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
+#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
+#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
+#scrollbar_track { position: absolute; top: 410px; left: 790px; }
+
+#Tabs {
+ --row_image_size: 20px 20px;
+}
+/* TABS */
+#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
+
+.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 22px; /* background:rgba(255,0,0,0.1); */ }
+.tab_color_options_row>.color_border {top: 1px; left: 659px; background-size: var(--row_image_size);}
+.tab_color_options_row>.color_bucket {top: 1px; left: 680px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_color {top: 1px; left: 509px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_normal {top: 1px; left: 538px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_bold {top: 1px; left: 559px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_normal {top: 1px; left: 588px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_italic {top: 1px; left: 609px; background-size: var(--row_image_size);}
+
+
+/* DRAG AND DROP INDICATOR */
+#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
+#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_x { top: -18px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_background { top: 22px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#expand_hover_background { top: 1px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_closed_background { top: 1px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_open_background { top: 1px; left: 4px; background-size: var(--row_image_size);}
+
+
+#tab_list_background { top: 835px; left: 50px; }
+
+
+
+#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
+#_gtetab_list { width: 200px; height: 20px; }
+#_gtetab_list2 { width: 200px; height: 20px; }
+#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
+
+#group_list_background { top: 835px; left: 20px; }
+#group_list_borders { top: 631px; left: 20px; }
+#group_list_default_font_color { top: 652px; left: 20px; }
+#group_list_button_hover_background { top: 610px; left: 20px; }
+
+
+/* MENU */
+#tabs_menu_border { top: 59px; left: 80px; }
+#tabs_menu_background { top: 59px; left: 102px; }
+#tabs_menu_font { top: 36px; left: 102px; }
+#tabs_menu_hover_border { top: 14px; left: 80px; }
+#tabs_menu_hover_background { top: 14px; left: 102px; }
+#tabs_menu_separator { top: 36px; left: 80px; }
+
diff --git a/options/theme_size_settings_3.css b/options/theme_size_settings_3.css
new file mode 100644
index 0000000..cc7ee79
--- /dev/null
+++ b/options/theme_size_settings_3.css
@@ -0,0 +1,168 @@
+/* OPTIONS IMAGES */
+.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
+.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
+.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
+.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
+.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
+.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
+
+.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
+.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
+
+.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
+.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
+
+.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
+.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
+
+.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
+.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
+
+.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
+.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
+
+.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
+.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
+.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
+.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
+
+@keyframes hover_blinking {
+ 0% {background-color: transparent;}
+ 100% {background-color: blue;}
+}
+.hover_blinking {
+ animation: hover_blinking 1s infinite;
+}
+
+@keyframes hover_border_blinking {
+ 0% {border: 1px solid transparent;}
+ 100% {border: 1px solid blue;}
+}
+.hover_border_blinking {
+ animation: hover_border_blinking 1s infinite;
+}
+
+/* MAIN TOOLBAR */
+#toolbar_background { top: 0px; left: 307px; }
+#toolbar_border_bottom { top: 0px; left: 328px; }
+
+#button_icons { top: 0px; left: 59px; }
+#button_icons_hover { top: 0px; left: 80px; }
+
+#button_background { top: 0px; left: 4px; }
+#button_hover_background { top: 0px; left: 25px; }
+
+#button_border { top: 0px; left: 115px; }
+#button_hover_border { top: 0px; left: 136px; }
+
+#filter_box_font { top: 0px; left: 175px; }
+#filter_clear_icon { top: 0px; left: 238px; }
+#filter_box_background { top: 0px; left: 196px; }
+#filter_box_border { top: 0px; left: 217px; }
+
+
+/* BIG OPTIONS BUTTONS */
+#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
+#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
+#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
+
+/* SCROLLBAR RESIZE */
+#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
+#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
+#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
+#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
+#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
+
+
+/* PIN LIST AND SCROLLBAR */
+#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
+
+#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
+#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
+#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+
+
+
+/* PINS */
+#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
+#pin_list_background { top: 3px; left: 187px; }
+#pin_list_border_bottom { top: 3px; left: 164px; }
+
+
+/* ATTENTION PIN */
+#attention_background { top: 3px; left: 72px; }
+#attention_border { top: 3px; left: 93px; }
+
+
+
+/* TAB LIST AND SCROLLBAR */
+#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
+
+#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
+#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
+#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
+#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
+#scrollbar_track { position: absolute; top: 410px; left: 790px; }
+
+#Tabs {
+ --row_image_size: 20px 20px;
+}
+/* TABS */
+#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
+
+.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 24px; /* background:rgba(255,0,0,0.1); */ }
+.tab_color_options_row>.color_border {top: 2px; left: 659px; background-size: var(--row_image_size);}
+.tab_color_options_row>.color_bucket {top: 2px; left: 680px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_color {top: 2px; left: 509px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_normal {top: 2px; left: 538px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_bold {top: 2px; left: 559px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_normal {top: 2px; left: 588px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_italic {top: 2px; left: 609px; background-size: var(--row_image_size);}
+
+
+/* DRAG AND DROP INDICATOR */
+#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
+#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_x { top: -18px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_border { top: 2px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_background { top: 22px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#expand_hover_background { top: 2px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_closed_background { top: 2px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_open_background { top: 2px; left: 4px; background-size: var(--row_image_size);}
+
+
+#tab_list_background { top: 835px; left: 50px; }
+
+
+
+#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
+#_gtetab_list { width: 200px; height: 20px; }
+#_gtetab_list2 { width: 200px; height: 20px; }
+#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
+
+#group_list_background { top: 835px; left: 20px; }
+#group_list_borders { top: 631px; left: 20px; }
+#group_list_default_font_color { top: 652px; left: 20px; }
+#group_list_button_hover_background { top: 610px; left: 20px; }
+
+
+/* MENU */
+#tabs_menu_border { top: 59px; left: 80px; }
+#tabs_menu_background { top: 59px; left: 102px; }
+#tabs_menu_font { top: 36px; left: 102px; }
+#tabs_menu_hover_border { top: 14px; left: 80px; }
+#tabs_menu_hover_background { top: 14px; left: 102px; }
+#tabs_menu_separator { top: 36px; left: 80px; }
+
diff --git a/options/theme_size_settings_4.css b/options/theme_size_settings_4.css
new file mode 100644
index 0000000..f943b49
--- /dev/null
+++ b/options/theme_size_settings_4.css
@@ -0,0 +1,168 @@
+/* OPTIONS IMAGES */
+.font_color {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_color.svg);}
+.font_color:hover {background-image: url(../options/options_font_color_hover.svg);}
+.font_weight_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_weight_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_weight_bold {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_weight_bold.svg);}
+.font_weight_bold:hover {background-image: url(../options/options_font_weight_bold_hover.svg);}
+.font_style_normal {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_normal.svg);}
+.font_style_normal:hover {background-image: url(../options/options_font_style_normal_hover.svg);}
+.font_style_italic {z-index: 1000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_font_style_italic.svg);}
+.font_style_italic:hover {background-image: url(../options/options_font_style_italic_hover.svg);}
+
+.color_toolbar_icon {z-index: 10000; position: absolute; display: block; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_toolbar_icon.svg);}
+.color_toolbar_icon:hover {background-image: url(../options/options_color_toolbar_icon_hover.svg);}
+
+.color_bucket {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_bucket.svg);}
+.color_bucket:hover {background-image: url(../options/options_color_bucket_hover.svg);}
+
+.color_brush {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_brush.svg);}
+.color_brush:hover {background-image: url(../options/options_color_brush_hover.svg);}
+
+.color_border {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_border.svg);}
+.color_border:hover {background-image: url(../options/options_color_border_hover.svg);}
+
+.color_x {z-index: 10000; position: absolute; display: float; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_color_x.svg);}
+.color_x:hover {background-image: url(../options/options_color_x_hover.svg);}
+
+.options_button_minus {z-index: 10000; display: float; position: absolute; top: 5px; left: 6px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_minus.svg);}
+.options_button_minus:hover {background-image: url(../options/options_scale_minus_hover.svg);}
+.options_button_plus {z-index: 10000; display: float; position: absolute; top: 5px; left: 54px; height: 20px; width: 20px; background-size: 20px 20px; background-image: url(../options/options_scale_plus.svg);}
+.options_button_plus:hover {background-image: url(../options/options_scale_plus_hover.svg);}
+
+@keyframes hover_blinking {
+ 0% {background-color: transparent;}
+ 100% {background-color: blue;}
+}
+.hover_blinking {
+ animation: hover_blinking 1s infinite;
+}
+
+@keyframes hover_border_blinking {
+ 0% {border: 1px solid transparent;}
+ 100% {border: 1px solid blue;}
+}
+.hover_border_blinking {
+ animation: hover_border_blinking 1s infinite;
+}
+
+/* MAIN TOOLBAR */
+#toolbar_background { top: 0px; left: 307px; }
+#toolbar_border_bottom { top: 0px; left: 328px; }
+
+#button_icons { top: 0px; left: 59px; }
+#button_icons_hover { top: 0px; left: 80px; }
+
+#button_background { top: 0px; left: 4px; }
+#button_hover_background { top: 0px; left: 25px; }
+
+#button_border { top: 0px; left: 115px; }
+#button_hover_border { top: 0px; left: 136px; }
+
+#filter_box_font { top: 0px; left: 175px; }
+#filter_clear_icon { top: 0px; left: 238px; }
+#filter_box_background { top: 0px; left: 196px; }
+#filter_box_border { top: 0px; left: 217px; }
+
+
+/* BIG OPTIONS BUTTONS */
+#options_tabs_indentation_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 550px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_indentation_indicator.svg);}
+#options_tabs_roundness_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 640px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_roundness_indicator.svg);}
+#options_tabs_size_indicator { z-index: 3000; display: float; position: absolute; top: 25px; left: 730px; height: 30px; width: 80px; background-size: 80px 30px; background-image: url(../options/options_tabs_size_indicator.svg);}
+
+/* SCROLLBAR RESIZE */
+#scrollbar_size_indicator {z-index: 3000; display: float; position: absolute; top: 20px; left: 335px; height: 80px; width: 80px; background-size: 80px 80px; background-image: url(../options/options_scrollbar_size_indicator.svg); }
+#options_tab_list_scrollbar_width_down { left: 3px; top: 30px; }
+#options_tab_list_scrollbar_width_up { left: 57px; top: 30px; }
+#options_tab_list_scrollbar_height_up { left: 30px; top: 3px; }
+#options_tab_list_scrollbar_height_down { left: 30px; top: 57px; }
+
+
+/* PIN LIST AND SCROLLBAR */
+#pin_list { position: absolute; height: calc(var(--scrollbar_height) + var(--pin_height)); width: 788px; top: 30px; left: 20px;}
+
+#pin_list_scrollbar { position: absolute; height: var(--scrollbar_height); width: 790px; top: calc(var(--pin_height) + 31px); left: 20px; z-index: 1000; background-color: var(--scrollbar_track); }
+#pin_list_scrollbar_thumb { position: relative; height: 100%; width: 100px; top: 0px; left: 0px; z-index: 1200; background-color: var(--scrollbar_thumb); }
+#pin_list_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+
+
+
+/* PINS */
+#pin_list_options_block {z-index: 2000; position:absolute; width: 500px; height: var(--pin_height); top: 30px; left: 20px; margin: 0; /* background:rgba(0,0,255,0.1); */ }
+#pin_list_background { top: 4px; left: 187px; }
+#pin_list_border_bottom { top: 4px; left: 164px; }
+
+
+/* ATTENTION PIN */
+#attention_background { top: 4px; left: 72px; }
+#attention_border { top: 4px; left: 93px; }
+
+
+
+/* TAB LIST AND SCROLLBAR */
+#tab_list { position: absolute; height: 800px; width: calc(770px - var(--scrollbar_width)); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: 40px; z-index: 1000 }
+
+#group_scrollbar { position: absolute; height: 800px; width: var(--scrollbar_width); top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); left: calc(810px - var(--scrollbar_width)); z-index: 1000; background-color: var(--scrollbar_track); }
+#group_scrollbar_thumb { position: relative; height: 200px; width: 100%; top: 140px; left: 0px; z-index: 1000; background-color: var(--scrollbar_thumb); }
+#group_scrollbar_thumb:hover { background-color: var(--scrollbar_thumb_hover); }
+#scrollbar_thumb { position: absolute; top: 370px; left: 790px; }
+#scrollbar_thumb_hover { position: absolute; top: 390px; left: 790px; }
+#scrollbar_track { position: absolute; top: 410px; left: 790px; }
+
+#Tabs {
+ --row_image_size: 20px 20px;
+}
+/* TABS */
+#tabs_options_block {z-index: 2000; position:absolute; width: 740px; height: auto; top: calc(var(--scrollbar_height) + var(--pin_height) + 36px); left: 50px; margin: 0; /* background:rgba(0,255,0,0.5); */ }
+
+.tab_color_options_row {z-index: 2000; position:relative; width: 740px; height: 26px; /* background:rgba(255,0,0,0.1); */ }
+.tab_color_options_row>.color_border {top: 0px; left: 659px; background-size: var(--row_image_size);}
+.tab_color_options_row>.color_bucket {top: 0px; left: 680px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_color {top: 0px; left: 509px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_normal {top: 0px; left: 538px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_weight_bold {top: 0px; left: 559px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_normal {top: 0px; left: 588px; background-size: var(--row_image_size);}
+.tab_color_options_row>.font_style_italic {top: 0px; left: 609px; background-size: var(--row_image_size);}
+
+
+/* DRAG AND DROP INDICATOR */
+#dd19 { display: inline-block; border-bottom: 2px solid var(--drag_indicator); }
+#drag_indicator { top: 8px; left: 350px; background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#close_x { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_x { top: -20px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_border { top: 0px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+#close_hover_background { top: 20px; left: calc(753px - var(--scrollbar_width)); background-size: var(--row_image_size);}
+
+
+/* CLOSE TAB BUTTON OPTIONS */
+#expand_hover_background { top: 0px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_closed_background { top: 0px; left: calc(var(--children_padding_left) + 4px); background-size: var(--row_image_size);}
+#expand_open_background { top: 0px; left: 4px; background-size: var(--row_image_size);}
+
+
+#tab_list_background { top: 835px; left: 50px; }
+
+
+
+#toolbar_groups_block { position: absolute; left: 20px; top: calc(var(--scrollbar_height) + var(--pin_height) + 32px); width: 19px; height: 800px; background-color: var(--group_list_background); border-right: 1px solid var(--group_list_borders); overflow: visible; }
+#_gtetab_list { width: 200px; height: 20px; }
+#_gtetab_list2 { width: 200px; height: 20px; }
+#_tab_list2:hover { background-color: var(--group_list_button_hover_background); }
+
+#group_list_background { top: 835px; left: 20px; }
+#group_list_borders { top: 631px; left: 20px; }
+#group_list_default_font_color { top: 652px; left: 20px; }
+#group_list_button_hover_background { top: 610px; left: 20px; }
+
+
+/* MENU */
+#tabs_menu_border { top: 59px; left: 80px; }
+#tabs_menu_background { top: 59px; left: 102px; }
+#tabs_menu_font { top: 36px; left: 102px; }
+#tabs_menu_hover_border { top: 14px; left: 80px; }
+#tabs_menu_hover_background { top: 14px; left: 102px; }
+#tabs_menu_separator { top: 36px; left: 80px; }
+
diff --git a/scripts/IO.js b/scripts/IO.js
index 678e69c..28225eb 100644
--- a/scripts/IO.js
+++ b/scripts/IO.js
@@ -1,92 +1,72 @@
+// Copyright (c) 2017 kroppy. All rights reserved.
+// Use of this source code is governed by a Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) license
+// that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
+
// ********** KEYBOARD AND MOUSE ***************
-function SetIOEvents(){
-
- // scroll horizontally on pin list
- $("#pin_list").bind("mousewheel DOMMouseScroll", function(event) {
- event = event.originalEvent;
- var delta = event.wheelDelta > 0 || event.detail < 0 ? -1 : 1;
- var multiplier = 1;
- for (var t = 1; t < 20; t++){
- setTimeout(function(){
- $("#pin_list").scrollLeft($("#pin_list").scrollLeft()+(delta*multiplier));
- }, t);
- multiplier++;
- }
- multiplier = 20;
- for (var t = 21; t < 40; t++){
- setTimeout(function(){
- $("#pin_list").scrollLeft($("#pin_list").scrollLeft()+(delta*multiplier));
- }, t);
- multiplier--;
- }
-
+function BindTabsSwitchingToMouseWheel() {
+ // switch tabs with mouse scroll
+ $("#pin_list, .group").bind("mousewheel DOMMouseScroll", function(event) {
+ let prev = event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0;
+ if (prev) {
+ ActivatePrevTab();
+ } else {
+ ActivateNextTab();
+ }
+ event.preventDefault();
});
-
- // this is for faster scrolling in firefox, for some reason its default scrolling is slow
- if (bg.opt.faster_scroll){
- $("#tab_list").bind("mousewheel DOMMouseScroll", function(event) {
- event = event.originalEvent;
- var delta = event.wheelDelta > 0 || event.detail < 0 ? -1.5 : 1.5;
- var multiplier = 1;
- for (var t = 1; t < 40; t++){
- setTimeout(function(){
- $("#tab_list").scrollTop($("#tab_list").scrollTop()+(delta*multiplier));
+}
+
+function SetIOEvents() {
+ if (!opt.switch_with_scroll) {
+ $("#pin_list").bind("mousewheel DOMMouseScroll", function(event) {
+ let direction = (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) ? -1 : 1;
+ let speed = 0.1;
+ for (let t = 1; t < 40; t++) {
+ setTimeout(function() {
+ if (t < 30) {
+ speed = speed+0.1; // accelerate
+ } else {
+ speed = speed-0.3; // decelerate
+ }
+ $("#pin_list").scrollLeft($("#pin_list").scrollLeft()+(direction*speed));
}, t);
- multiplier++;
- }
- multiplier = 40;
- for (var t = 41; t < 80; t++){
- setTimeout(function(){
- $("#tab_list").scrollTop($("#tab_list").scrollTop()+(delta*multiplier));
- }, t);
- multiplier--;
}
});
}
-
+
// catch keyboard keys
- $(document).keydown(function(event){
- if (MouseHoverOver == "pin_list"){
+ $(document).keydown(function(event) {
+ if (MouseHoverOver == "pin_list") {
// ctrl+a to select all
- if (event.ctrlKey && event.which == 65){
+ if (event.ctrlKey && event.which == 65) {
$(".pin").addClass("selected");
}
// ctrl+i to invert selection
- if (event.ctrlKey && event.which == 73){
+ if (event.ctrlKey && event.which == 73) {
$(".pin").toggleClass("selected");
}
}
- if (MouseHoverOver == "tab_list"){
+ if (MouseHoverOver.match("g_|tab_list") !== null) {
// ctrl+a to select all
- if (event.ctrlKey && event.which == 65){
- $(".tab").addClass("selected");
+ if (event.ctrlKey && event.which == 65) {
+ $("#"+active_group).children(".tab:visible").addClass("selected");
}
// ctrl+i to invert selection
- if (event.ctrlKey && event.which == 73){
- $(".tab").toggleClass("selected");
+ if (event.ctrlKey && event.which == 73) {
+ $(".tab:visible").toggleClass("selected");
}
}
RefreshGUI();
});
- $(document).on("dragenter", "#toolbar", function(event){ // set mouse over id
- MouseHoverOver = this.id;
- });
- $(document).on("mouseenter", "#pin_list, #tab_list, #toolbar", function(event){ // set mouse over id
- MouseHoverOver = this.id;
- });
- $(document).on("mouseleave", window, function(event){
- MouseHoverOver = "";
- });
-
// remove middle mouse and set hiding menu
- document.body.onmousedown = function(event){
- if (event.button == 1 && bg.opt.close_with_MMB == true){
+ document.body.onmousedown = function(event) {
+ if (event.button == 1 && opt.close_with_MMB == true) {
event.preventDefault();
}
- if (event.button == 0 && !$(event.target).is(".menu_item")){
- $(".menu").hide(0);
+ if (event.button == 0 && !$(event.target).is(".menu_item")) {
+ $(".menu").hide(300);
}
};
}
diff --git a/scripts/backup.js b/scripts/backup.js
new file mode 100644
index 0000000..78e279f
--- /dev/null
+++ b/scripts/backup.js
@@ -0,0 +1,266 @@
+// 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 ExportGroup(filename) {
+ let GroupToSave = [0,[]];
+ GroupToSave[0] = bggroups[active_group];
+ let lastId = parseInt($("#"+active_group+" .tab").last()[0].id);
+
+ $("#"+active_group+" .tab").each(function() {
+ chrome.tabs.get(parseInt(this.id), function(tab) {
+ GroupToSave[1].push([tab.id, ($("#"+tab.id).parent(".group")[0] ? $("#"+tab.id).parent()[0].id : $("#"+tab.id).parent().parent(".tab")[0].id), $("#"+tab.id).index(), ($("#"+tab.id).is(".n") ? "n" : ($("#"+tab.id).is(".c") ? "c" : "o")), tab.url]);
+ if (tab.id == lastId) {
+ SaveFile(filename, GroupToSave);
+ }
+ });
+ })
+}
+
+function ImportGroup() {
+ let file = document.getElementById("file_import_group");
+ let fr = new FileReader();
+ if (file.files[0] == undefined) return;
+ fr.readAsText(file.files[0]);
+ fr.onload = function() {
+ let data = fr.result;
+ file.remove();
+ let LoadedGroup = JSON.parse(data);
+ let RefsTabs = {};
+ let newTabs = {};
+ let lastId = LoadedGroup[1][LoadedGroup[1].length-1][0];
+ let NewGroupId = AddNewGroup({name: LoadedGroup[0].name, font: LoadedGroup[0].font});
+ SetActiveGroup(NewGroupId, false, false);
+ LoadedGroup[1].forEach(function(LTab){
+ chrome.tabs.create({url: LTab[4]}, function(tab) {
+ RefsTabs[LTab[0]] = tab.id;
+ newTabs[tab.id] = {i: LTab[2]};
+ if (LTab[0] == lastId) {
+ setTimeout(function() {
+ LoadedGroup[1].forEach(function(LTab){
+ $("#"+NewGroupId).append($("#"+LTab[0]));
+ });
+ }, 2000);
+ setTimeout(function() {
+ LoadedGroup[1].forEach(function(LTab){
+ if ($("#"+RefsTabs[LTab[1]])[0] && $("#"+LTab[0])[0]) {
+ $("#ch"+RefsTabs[LTab[1]]).append($("#"+LTab[0]));
+ }
+ });
+ LoadedGroup[1].forEach(function(LTab){
+ $("#"+LTab[0]).addClass(LTab[3]);
+ });
+ chrome.tabs.query({currentWindow: true}, function(tabs) {
+ RearrangeTreeTabs(tabs, newTabs, true);
+ RefreshExpandStates();
+ RefreshGUI();
+ });
+ }, 4000);
+ }
+ LTab[0] = tab.id;
+ });
+ });
+ }
+}
+
+function ExportTabs(filename) {
+ chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
+ chrome.runtime.sendMessage({command: "get_browser_tabs"}, function(response) {
+ let tabs = Object.assign({}, response);
+ chrome.runtime.sendMessage({command: "get_windows"}, function(response) {
+ let windows = Object.assign({}, response);
+ let WindowsToSave = [];
+ w.forEach(function(CWin){
+ if (windows[CWin.id] != undefined && windows[CWin.id].group_bar != undefined && windows[CWin.id].active_shelf != undefined && windows[CWin.id].active_group != undefined && windows[CWin.id].groups != undefined && windows[CWin.id].folders != undefined) {
+ WindowsToSave.push([[], CWin.id, CWin.tabs[0].url, CWin.tabs[CWin.tabs.length-1].url, windows[CWin.id].group_bar, windows[CWin.id].group_bar, windows[CWin.id].active_shelf, windows[CWin.id].active_group, windows[CWin.id].groups, windows[CWin.id].folders, 0]);
+ }
+
+ CWin.tabs.forEach(function(CTab){
+ if (tabs[CTab.id] != undefined && tabs[CTab.id].parent != undefined && tabs[CTab.id].index != undefined && tabs[CTab.id].expand != undefined) {
+ WindowsToSave[WindowsToSave.length-1][0].push([CTab.id, CTab.url, tabs[CTab.id].parent, tabs[CTab.id].index, tabs[CTab.id].expand]);
+ }
+ });
+ });
+ SaveFile(filename, WindowsToSave);
+ });
+ });
+ });
+}
+
+
+function ImportTabs() {
+ let file = document.getElementById("file_import_backup");
+ 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.remove();
+ chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
+
+ //make global variables
+ LoadedWindows = JSON.parse(data);
+ RefsTabs = {};
+ TotalTabsCount = 0;
+
+ LoadedWindows.forEach(function(LWin){
+ TotalTabsCount += LWin[0].length;
+ });
+
+ LoadedWindows.forEach(function(LWin){
+ chrome.windows.create({}, function(new_window) {
+ LWin[1] = new_window.id;
+ LWin[2] = "";
+ LWin[3] = "";
+
+ setTimeout(function() {
+ chrome.runtime.sendMessage({command: "save_groups", groups: LWin[8], windowId: new_window.id});
+ }, 1000);
+
+ LWin[0].forEach(function(LTab){
+ chrome.tabs.create({url: LTab[1], pinned: (LTab[2] == "pin_list" ? true : false), windowId: new_window.id}, function(tab) {
+ RefsTabs[LTab[0]] = tab.id;
+ LTab[0] = tab.id;
+ LTab[1] = "";
+ TotalTabsCount--;
+
+ if (TotalTabsCount < 2) {
+ setTimeout(function() {
+ chrome.runtime.sendMessage({command: "get_windows"}, function(response) {
+ let windows = Object.assign({}, response);
+
+ LoadedWindows.forEach(function(LWin){
+ LWin[0].forEach(function(LTab){
+ schedule_update_data -= 2;
+ chrome.runtime.sendMessage({command: "update_tab", tabId: LTab[0], tab: {parent: (RefsTabs[LTab[2]] ? RefsTabs[LTab[2]] : LTab[2]), index: LTab[3], expand: LTab[4]}});
+ });
+ });
+
+ setTimeout(function() {
+ chrome.runtime.sendMessage({command: "reload_sidebar"});
+ location.reload();
+ }, 3000);
+ });
+ chrome.tabs.remove(new_window.tabs[0].id, null);
+ }, 1000);
+ }
+ });
+ });
+ });
+ });
+ });
+ }
+}
+
+function ImportMergeTabs() {
+ let file = document.getElementById("file_import_merge_backup");
+ let fr = new FileReader();
+ if (file.files[0] == undefined) return;
+ fr.readAsText(file.files[0]);
+ fr.onload = function() {
+ let data = fr.result;
+ file.remove();
+
+ //make global variables
+ LoadedWindows = JSON.parse(data);
+ RefsTabs = {};
+ RefsWins = {};
+ TotalTabsCount = 0;
+ LoadedWindows.forEach(function(LWin){
+ TotalTabsCount += LWin[0].length;
+ });
+
+ chrome.windows.getAll({windowTypes: ['normal'], populate: true}, function(w) {
+ w.forEach(function(CWin){ // loop Current Windows (CWin)
+ LoadedWindows.forEach(function(LWin){ // loop Loaded Windows (LWin)
+ CWin.tabs.forEach(function(CTab){ // loop Tabs of each Current Window
+ schedule_update_data -= 2;
+ for (let LWinTabInd = 0; LWinTabInd < LWin[0].length; LWinTabInd++) { // loop Tabs of each Loaded Window
+ if (CTab.url == LWin[0][LWinTabInd][1]) {
+ // TabsMatched++;
+ RefsTabs[LWin[0][LWinTabInd][0]] = CTab.id;
+ LWin[0][LWinTabInd][0] = CTab.id;
+ LWin[0][LWinTabInd][1] = "";
+ LWin[10]++;
+ TotalTabsCount--;
+ break;
+ }
+ }
+ });
+ if (CWin.tabs[0].url == LWin[2] && CWin.tabs[CWin.tabs.length-1].url == LWin[3] && LWin[10] > LWin[0].length*0.5) {
+ RefsWins[LWin[1]] = CWin.id;
+ LWin[1] = CWin.id;
+ LWin[2] = "";
+ LWin[3] = "";
+ }
+ });
+ });
+
+ LoadedWindows.forEach(function(LWin){
+ if (LWin[2] != "" && LWin[3] != "") { // missing window, lets make one
+ chrome.windows.create({}, function(new_window) {
+ RefsWins[LWin[1]] = new_window.id;
+ LWin[1] = new_window.id;
+
+ LWin[2] = "";
+ LWin[3] = "";
+
+ LWin[0].forEach(function(LTab){
+ if (LTab[1] != "") { // missing tab of missing window, lets make one
+ chrome.tabs.create({url: LTab[1], windowId: new_window.id}, function(tab) {
+
+ // chrome.tabs.executeScript(tab.id, {code: "setTimeout(function() { window.stop(); }, 5000);", runAt: "document_start"}, function(){});
+
+ RefsTabs[LTab[0]] = tab.id;
+ LTab[0] = tab.id;
+ LTab[1] = "";
+ TotalTabsCount--;
+ });
+
+ }
+ });
+ chrome.tabs.remove(new_window.tabs[0].id, null);
+ });
+ } else {
+ LWin[0].forEach(function(LTab){
+ if (LTab[1] != "") { // missing tab, lets make one
+ chrome.tabs.create({url: LTab[1], windowId: LWin[1]}, function(tab) {
+ RefsTabs[LTab[0]] = tab.id;
+ LTab[0] = tab.id;
+ LTab[1] = "";
+ TotalTabsCount--;
+
+ if (TotalTabsCount < 2) {
+ setTimeout(function() {
+ chrome.runtime.sendMessage({command: "get_windows"}, function(response) {
+ let windows = Object.assign({}, response);
+
+ LoadedWindows.forEach(function(LWin){
+ for (let lGroup in LWin[8]) {
+ if (windows[LWin[1]] && windows[LWin[1]].groups[lGroup] == undefined) {
+ windows[LWin[1]].groups[lGroup] = Object.assign({}, LWin[8][lGroup]);
+ chrome.runtime.sendMessage({command: "save_groups", groups: windows[LWin[1]].groups, windowId: LWin[1]});
+ }
+ }
+
+ LWin[0].forEach(function(LTab){
+ schedule_update_data -= 2;
+ chrome.runtime.sendMessage({command: "update_tab", tabId: LTab[0], tab: {parent: (RefsTabs[LTab[2]] ? RefsTabs[LTab[2]] : LTab[2]), index: LTab[3], expand: LTab[4]}});
+ });
+ });
+
+ setTimeout(function() {
+ chrome.runtime.sendMessage({command: "reload_sidebar"});
+ location.reload();
+ }, 1000);
+ });
+ }, 1000);
+ }
+ });
+ }
+ });
+ }
+ });
+ });
+ }
+}
\ No newline at end of file
diff --git a/scripts/chrome.js b/scripts/chrome.js
new file mode 100644
index 0000000..1573fea
--- /dev/null
+++ b/scripts/chrome.js
@@ -0,0 +1,170 @@
+// 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/
+
+// ********** CHROME EVENTS ***************
+
+function StartChromeListeners(){
+
+ chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
+ if (message.command == "drag_drop") {
+ DragAndDrop.DragNodeClass = message.DragNodeClass;
+ DragAndDrop.SelectedTabsIds = message.SelectedTabsIds;
+ DragAndDrop.TabsIds = message.TabsIds;
+ DragAndDrop.Parents = message.Parents;
+ DragAndDrop.ComesFromWindowId = message.ComesFromWindowId;
+ DragAndDrop.Depth = message.Depth;
+ }
+ if (message.command == "drag_dropped") {
+ DragAndDrop.Dropped = message.Dropped;
+ }
+ if (message.command == "reload_sidebar") {
+ window.location.reload();
+ }
+ if (message.command == "reload_options") {
+ LoadPreferences();
+ setTimeout(function() {
+ RestorePinListRowSettings();
+ },200);
+ }
+ if (message.command == "reload_theme") {
+ let theme = LoadData(message.themeName, DefaultTheme);
+ ApplySizeSet(theme["TabsSizeSetNumber"]);
+ ApplyColorsSet(theme["ColorsSet"]);
+ if (theme.ToolbarShow) {
+ $("#toolbar").html(theme.toolbar);
+ } else {
+ $("#toolbar").html("");
+ }
+ RestoreToolbarSearchFilter();
+ RestoreToolbarShelf();
+ }
+ if (message.windowId == CurrentWindowId) {
+ switch(message.command) {
+ case "tab_created":
+
+ // if set to treat unparented tabs as active tab's child
+ if (opt.append_orphan_tab == "as_child" && message.tab.openerTabId == undefined && $(".active:visible")[0]) {
+ message.tab.openerTabId = $(".active:visible")[0].id;
+ }
+
+ // child case
+ if (message.tab.openerTabId) {
+ // append to tree
+ if (opt.max_tree_depth < 0 || (opt.max_tree_depth > 0 && $("#"+message.tab.openerTabId).parents(".tab").length < opt.max_tree_depth)) {
+ if (opt.append_child_tab == "top") {
+ AppendTab({ tab: message.tab, ParentId: message.tab.openerTabId, Append: false, Scroll: true });
+ }
+ if (opt.append_child_tab == "bottom") {
+ AppendTab({ tab: message.tab, ParentId: message.tab.openerTabId, Append: true, Scroll: true });
+ }
+ }
+
+ // if reached depth limit of the tree
+ if (opt.max_tree_depth > 0 && $("#"+message.tab.openerTabId).parents(".tab").length >= opt.max_tree_depth) {
+ if (opt.append_child_tab_after_limit == "after") {
+ AppendTab({ tab: message.tab, InsertAfterId: message.tab.openerTabId, Append: true, Scroll: true });
+ }
+ if (opt.append_child_tab_after_limit == "top") {
+ AppendTab({ tab: message.tab, ParentId: $("#"+message.tab.openerTabId).parent().parent()[0].id, Append: false, Scroll: true });
+ }
+ if (opt.append_child_tab_after_limit == "bottom") {
+ AppendTab({ tab: message.tab, ParentId: $("#"+message.tab.openerTabId).parent().parent()[0].id, Append: true, Scroll: true });
+ }
+ }
+
+ // place tabs flat, (should I merge it with orphans case?)
+ if (opt.max_tree_depth == 0) {
+ if (opt.append_child_tab_after_limit == "after") {
+ AppendTab({ tab: message.tab, InsertAfterId: message.tab.openerTabId, Append: false, Scroll: true });
+ }
+ if (opt.append_child_tab_after_limit == "top") {
+ AppendTab({ tab: message.tab, Append: false, Scroll: true });
+ }
+ if (opt.append_child_tab_after_limit == "bottom") {
+ AppendTab({ tab: message.tab, Append: true, Scroll: true });
+ }
+ }
+ // orphan case
+ } else {
+ if (opt.append_orphan_tab == "after_active") {
+ AppendTab({ tab: message.tab, InsertAfterId: $(".active:visible")[0] ? $(".active:visible")[0].id : undefined, Append: false });
+ }
+ if (opt.append_orphan_tab == "top") {
+ AppendTab({ tab: message.tab, Append: false });
+ }
+ if (opt.append_orphan_tab == "bottom" || opt.append_orphan_tab == "as_child") {
+ AppendTab({ tab: message.tab, Append: true });
+ }
+ }
+ if ($("#"+message.tab.openerTabId).is(".c")) {
+ $("#"+message.tab.openerTabId).removeClass("c").addClass("o");
+ }
+ RefreshExpandStates();
+ schedule_update_data++;
+ RefreshGUI();
+ break;
+ case "tab_attached":
+ AppendTab({ tab: message.tab, ParentId: message.ParentId, Append: true});
+ RefreshGUI();
+ break;
+ case "tab_detached":
+ if (opt.promote_children && $("#"+message.tabId).is(".tab")) {
+ $("#ch"+message.tabId).children().insertAfter($("#"+message.tabId));
+ } else {
+ $("#"+message.tabId).find(".tab").each(function() {
+ RemoveTabFromList(this.id);
+ });
+ }
+ RemoveTabFromList(message.tabId);
+ setTimeout(function() { schedule_update_data++; },300);
+ RefreshGUI();
+ break;
+ case "tab_removed":
+ if ($(".tab#"+message.tabId)[0]) {
+ if (opt.promote_children) {
+ $("#ch"+message.tabId).children().insertAfter($("#"+message.tabId));
+ } else {
+ $("#"+message.tabId).find(".tab").each(function() {
+ chrome.tabs.remove(parseInt(this.id));
+ });
+ }
+ }
+ RemoveTabFromList(message.tabId);
+ RefreshExpandStates();
+ setTimeout(function() { schedule_update_data++; },300);
+ RefreshGUI();
+ break;
+ case "tab_activated":
+ setTimeout(function() { SetActiveTab(message.tabId); },100);
+ break;
+ case "tab_attention":
+ SetAttentionIcon(message.tabId);
+ break;
+ case "tab_updated":
+ if (message.changeInfo.favIconUrl != undefined || message.changeInfo.url != undefined) {
+ setTimeout(function() { GetFaviconAndTitle(message.tabId); },100);
+ }
+ if (message.changeInfo.title != undefined) {
+ setTimeout(function() { GetFaviconAndTitle(message.tabId); },1000);
+ }
+
+ if (message.changeInfo.audible != undefined || message.changeInfo.mutedInfo != undefined) {
+ RefreshMediaIcon(message.tabId);
+ }
+ if (message.changeInfo.discarded != undefined) {
+ RefreshDiscarded(message.tabId);
+ }
+ if (message.changeInfo.pinned != undefined) {
+ if ((message.tab.pinned && $("#"+message.tabId).is(".tab")) || (!message.tab.pinned && $("#"+message.tabId).is(".pin"))) {
+ SetTabClass({ id: message.tabId, pin: message.tab.pinned });
+ schedule_update_data++;
+ }
+ RefreshExpandStates();
+ }
+ break;
+ }
+ }
+
+ });
+}
\ No newline at end of file
diff --git a/scripts/drag_and_drop.js b/scripts/drag_and_drop.js
new file mode 100644
index 0000000..1c277cc
--- /dev/null
+++ b/scripts/drag_and_drop.js
@@ -0,0 +1,323 @@
+// Copyright (c) 2017 kroppy. All rights reserved.
+// Use of this source code is governed by a Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) license
+// that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
+
+// ********** TABS EVENTS ***************
+
+function SetDragAndDropEvents() {
+
+ $(document).on("mouseleave", window, function(event) {
+ MouseHoverOver = "";
+ });
+ $(document).on("dragleave", window, function(event) {
+ MouseHoverOver = "";
+ });
+ $(document).on("dragleave", "body", function(event) {
+ MouseHoverOver = "";
+ });
+ $(document).on("dragover", "#toolbar_groups, #toolbar, #pin_list, .group", function(event) {
+ MouseHoverOver = this.id;
+ });
+ $(document).on("mouseover", "#toolbar_groups, #toolbar, #pin_list, .group", function(event) { // set mouse over id
+ MouseHoverOver = this.id;
+ });
+
+ // PREVENT THE DEFAULT BROWSER DROP ACTION
+ $(document).bind("drop dragover", function(event) {
+ event.preventDefault();
+ });
+
+
+ // bring to front drop zones
+ $(document).on("dragenter", ".tab_header, .folder", function(event) {
+ DropTargetsSendToFront();
+ });
+
+
+
+ // SET FOLDER DRAG SOURCE
+ $(document).on("dragstart", ".folder_header", function(event) {
+ DragAndDrop.DragNodeClass = "folder";
+ DragAndDrop.Dropped = false;
+ event.stopPropagation();
+ event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+ event.originalEvent.dataTransfer.setData("text", "");
+
+
+ DragAndDrop.ComesFromWindowId = CurrentWindowId;
+ DragAndDrop.SelectedTabsIds.splice(0, DragAndDrop.SelectedTabsIds.length);
+ DragAndDrop.TabsIds.splice(0, DragAndDrop.TabsIds.length);
+ DragAndDrop.Parents.splice(0, DragAndDrop.Parents.length);
+
+ // chrome.runtime.sendMessage({command: "drag_drop", DragNodeClass: "tab", SelectedTabsIds: DragAndDrop.SelectedTabsIds, TabsIds: DragAndDrop.TabsIds, Parents: DragAndDrop.Parents, ComesFromWindowId: CurrentWindowId, Depth: DragAndDrop.Depth});
+ });
+
+
+ // SET TAB DRAG SOURCE
+ $(document).on("dragstart", ".tab_header", function(event) {
+ DragAndDrop.DragNodeClass = "tab";
+ DragAndDrop.Dropped = false;
+ event.stopPropagation();
+ event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+ event.originalEvent.dataTransfer.setData("text", "");
+
+ if ($(this).parent().is(".active")) {
+ $(this).parent().addClass("selected_temporarly").addClass("selected");
+ }
+ $(".close").removeClass("show");
+ $(".tab_header_hover").removeClass("tab_header_hover");
+
+ if ($(this).parent().is(":not(.selected)")) {
+ $(".selected").addClass("selected_frozen").removeClass("selected");
+ $(this).parent().addClass("selected_temporarly").addClass("selected");
+ }
+
+ $(".selected:not(:visible)").addClass("selected_frozen").removeClass("selected");
+
+ DragAndDrop.ComesFromWindowId = CurrentWindowId;
+ DragAndDrop.SelectedTabsIds.splice(0, DragAndDrop.SelectedTabsIds.length);
+ DragAndDrop.TabsIds.splice(0, DragAndDrop.TabsIds.length);
+ DragAndDrop.Parents.splice(0, DragAndDrop.Parents.length);
+
+ DragAndDrop.Depth = 0;
+ $(".selected:visible").find(".tab").each(function() {
+ if ($(this).parents(".tab").length > DragAndDrop.Depth) { DragAndDrop.Depth = $(this).parents(".tab").length; }
+ });
+ DragAndDrop.Depth -= $(this).parents(".tab").length-1;
+ if (DragAndDrop.Depth < 0) {
+ DragAndDrop.Depth = 0;
+ }
+
+ $(".selected:visible").each(function() {
+ DragAndDrop.SelectedTabsIds.push(parseInt(this.id));
+ DragAndDrop.TabsIds.push(parseInt(this.id));
+ DragAndDrop.Parents.push($(this).parent()[0].id);
+ if ($("#ch" + this.id).children().length > 0) {
+ $($("#ch" + this.id).find(".tab")).each(function() {
+ DragAndDrop.TabsIds.push(parseInt(this.id));
+ DragAndDrop.Parents.push($(this).parent()[0].id);
+ });
+ }
+ });
+ chrome.runtime.sendMessage({command: "drag_drop", DragNodeClass: "tab", SelectedTabsIds: DragAndDrop.SelectedTabsIds, TabsIds: DragAndDrop.TabsIds, Parents: DragAndDrop.Parents, ComesFromWindowId: CurrentWindowId, Depth: DragAndDrop.Depth});
+ });
+
+ // REMOVE DROP TARGET WHEN DRAG LEAVES
+ $(document).on("dragleave", ".highlighted_drop_target", function(event) {
+ $(".highlighted_drop_target").removeClass("highlighted_drop_target");
+ });
+
+ // SET DROP TARGET WHEN ENTERING PINS AND TABS
+ $(document).on("dragenter", ".tab>.drag_entered_top:not(.highlighted_drop_target), .tab>.drag_entered_bottom:not(.highlighted_drop_target), .tab>.drag_enter_center:not(.highlighted_drop_target)", function(event) {
+ event.stopPropagation();
+ if ($(".selected:visible").find($(this)).length > 0 || DragAndDrop.DragNodeClass != "tab") { return; }
+ if (opt.max_tree_drag_drop && opt.max_tree_depth >= 0) {
+ if ($(this).is(".drag_enter_center")) {
+ if (opt.max_tree_depth == 0) { return; }
+ if ($(this).parents(".tab").length + DragAndDrop.Depth > opt.max_tree_depth) { return; }
+ } else {
+ if ($(this).parents(".tab").length + DragAndDrop.Depth > opt.max_tree_depth+1) { return; }
+ }
+ }
+ $(".highlighted_drop_target").removeClass("highlighted_drop_target");
+ $(this).addClass("highlighted_drop_target");
+ });
+
+ // SET DROP TARGET WHEN ENTERING FOLDERS
+ $(document).on("dragenter", ".folder>.drag_entered_top:not(.highlighted_drop_target), .folder>.drag_entered_bottom:not(.highlighted_drop_target), .folder>.drag_enter_center:not(.highlighted_drop_target)", function(event) {
+ event.stopPropagation();
+ if (DragAndDrop.DragNodeClass == "group") { return; }
+ // if (/* $(".selected:visible").find($(this)).length > 0 || */ DragAndDrop.DragNodeClass != "folder") { return; }
+ $(".highlighted_drop_target").removeClass("highlighted_drop_target");
+ $(this).addClass("highlighted_drop_target");
+ });
+
+ // SET DROP TARGET, PIN_LIST, TAB_LIST, GROUP OR GROUP_BUTTON
+ $(document).on("dragover", "#pin_list, .group, .group_drag_box", function(event) {
+ if (DragAndDrop.DragNodeClass != "group" && $(".highlighted_drop_target").length == 0 && event.target.className == $(this)[0].className) {
+ $(this).addClass("highlighted_drop_target");
+ }
+ });
+
+ // TIMER FOR FOR AUTO EXPAND
+ $(document).on("dragenter", ".drag_enter_center", function(event) {
+ event.stopPropagation();
+ DragAndDrop.timeout = false;
+ setTimeout(function() { DragAndDrop.timeout = true; }, 1800);
+ });
+ $(document).on("dragleave", ".drag_enter_center", function(event) {
+ DragAndDrop.timeout = false;
+ });
+ $(document).on("dragover", ".c > .drag_enter_center", function(event) {
+ if (DragAndDrop.timeout && opt.open_tree_on_hover) {
+ $(this).parent().addClass("o").removeClass("c");
+ DragAndDrop.timeout = false;
+ }
+ });
+
+ // DROP
+ $(document).on("drop", "*", function(event) {
+ DragAndDrop.Dropped = true;
+ chrome.runtime.sendMessage({command: "drag_dropped", DragAndDrop: true});
+ event.stopPropagation();
+
+ if (DragAndDrop.ComesFromWindowId == CurrentWindowId && MouseHoverOver != "" && $(".highlighted_drop_target")[0] != undefined) {
+ DropToTarget($(".highlighted_drop_target"));
+ }
+
+ if (DragAndDrop.ComesFromWindowId != CurrentWindowId && $(".highlighted_drop_target")[0] != undefined) {
+ $(".selected").addClass("selected_frozen").removeClass("selected");
+ let target = $(".highlighted_drop_target");
+ let counter = DragAndDrop.TabsIds.length;
+ (DragAndDrop.TabsIds).forEach(function(TabId) {
+ chrome.tabs.move(TabId, { windowId: CurrentWindowId, index: -1 }, function(MovedTab) {
+ counter--;
+ setTimeout(function() {
+ if (counter == 0) {
+ setTimeout(function() {
+ (DragAndDrop.SelectedTabsIds).forEach(function(selectedTabId) {
+ if ($("#"+selectedTabId)[0]){
+ $("#"+selectedTabId).addClass("selected_temporarly").addClass("selected");
+ }
+ });
+ if (browserId != "F") { // I HAVE TO EXLUDE THIS IN FIREFOX SINCE MOVED TAB LOSES ITS ORIGINAL ID - WHAT IN THE ACTUAL F*CK MOZILLA!
+ for (var tabsIdsIndex = 1; tabsIdsIndex < (DragAndDrop.TabsIds).length; tabsIdsIndex++) {
+ if ($("#"+DragAndDrop.TabsIds[tabsIdsIndex])[0] && $("#"+DragAndDrop.Parents[tabsIdsIndex])[0]){
+ $("#"+DragAndDrop.Parents[tabsIdsIndex]).append($("#"+DragAndDrop.TabsIds[tabsIdsIndex]));
+ }
+
+ }
+ }
+ DropToTarget(target);
+ },300);
+ }
+ },300);
+ });
+ });
+ }
+ });
+
+ // DETACH
+ $(document).on("dragend", ".tab_header", function(event) {
+ setTimeout(function() {
+ if (DragAndDrop.Dropped == false && MouseHoverOver == "" && $(".highlighted_drop_target")[0] == undefined) {
+ DetachTabs(DragAndDrop.TabsIds);
+ }
+ },1100);
+ });
+
+
+ // dragging groups
+ $(document).on("dragstart", ".group_drag_box", function(event) {
+ event.originalEvent.dataTransfer.setData("null", "null");
+ event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
+ DragAndDrop.DragNodeClass = "group";
+ DragAndDrop.DragNode = $(this).parent();
+ $(".highlighted_drop_target").removeClass("highlighted_drop_target");
+ });
+
+
+ // when dragging the group, move it up or down
+ $(document).on("dragenter", ".group_drag_box", function(event) {
+ if (DragAndDrop.DragNode != undefined && DragAndDrop.DragNodeClass == "group" && $(this).parent() != DragAndDrop.DragNode) {
+ if ( $(this).parent().index() <= DragAndDrop.DragNode.index() ) {
+ DragAndDrop.DragNode.insertBefore($(this).parent());
+ } else {
+ if ($(this).parent().index() > DragAndDrop.DragNode.index()) {
+ DragAndDrop.DragNode.insertAfter($(this).parent());
+ }
+ }
+ $(".highlighted_drop_target").removeClass("highlighted_drop_target");
+ }
+ });
+
+ // when finished dragging the group
+ $(document).on("dragend", ".group_drag_box", function(event) {
+ DragAndDrop.DragNodeClass = "";
+ DragAndDrop.DragNode = undefined;
+ UpdateBgGroupsOrder();
+ $(".highlighted_drop_target").removeClass("highlighted_drop_target");
+ });
+}
+
+
+function DropToTarget(TargetNode) {
+ // dropped on pin
+ if (TargetNode.parent().is(".pin")) {
+ $(".selected").each(function() {
+ SetTabClass({ id: this.id, pin: true });
+ if (TargetNode.is(".drag_entered_top")) {
+ $(this).insertBefore(TargetNode.parent());
+ } else {
+ $(this).insertAfter(TargetNode.parent());
+ }
+ });
+ }
+
+ // dropped on pin_list
+ if (TargetNode.is("#pin_list")) {
+ $(".selected").each(function() {
+ SetTabClass({ id: this.id, pin: true });
+ });
+ TargetNode.append($(".selected"));
+ }
+
+ // dropped on tab
+ if (TargetNode.parent().is(".tab, .folder")) {
+ if (TargetNode.parent().is(".selected")) {
+ TargetNode.parent().addClass("highlighted_selected").removeClass("selected");
+ }
+ $(".selected").each(function() {
+ SetTabClass({ id: this.id, pin: false });
+ });
+ if (TargetNode.is(".drag_entered_top")) {
+ $($(".selected").get().reverse()).insertBefore(TargetNode.parent());
+ }
+ if (TargetNode.is(".drag_entered_bottom")) {
+ $($(".selected").get().reverse()).insertAfter(TargetNode.parent());
+ }
+ if (TargetNode.is(".drag_enter_center")) {
+ if (opt.append_child_tab == "bottom") {
+ $("#ch" + TargetNode[0].id.substr(2)).append($($(".selected").get().reverse()));
+ } else {
+ $("#ch" + TargetNode[0].id.substr(2)).prepend($($(".selected").get().reverse()));
+ }
+ }
+ }
+
+ // dropped on group (tab list)
+ if (TargetNode.is(".group")) {
+ $(".selected").each(function() {
+ SetTabClass({ id: this.id, pin: false });
+ });
+ TargetNode.append($($(".selected").get().reverse()));
+ }
+
+ // dropped on group button (group list)
+ if (TargetNode.is(".group_drag_box")) {
+ $(".selected").each(function() {
+ SetTabClass({ id: this.id, pin: false });
+ });
+ $("#"+TargetNode[0].id.substr(1)).append($($(".selected").get().reverse()));
+ }
+
+ $(".highlighted_selected").addClass("selected").removeClass("highlighted_selected");
+
+ RefreshExpandStates();
+ DragAndDrop.timeout = false;
+ RefreshGUI();
+ setTimeout(function() {
+ DropTargetsSendToBack();
+ schedule_update_data++;
+ schedule_rearrange_tabs++;
+ }, 500);
+
+
+ TargetNode.removeClass("highlighted_drop_target");
+ $(".tab_header_hover").removeClass("tab_header_hover");
+ $(".selected_frozen").addClass("selected").removeClass("selected_frozen");
+ $(".selected_temporarly").removeClass("selected").removeClass("selected_temporarly");
+
+ // this is group dragover indicator
+ $(".dragover_highlight").removeClass("dragover_highlight");
+}
diff --git a/scripts/events_chrome.js b/scripts/events_chrome.js
deleted file mode 100644
index 8101edc..0000000
--- a/scripts/events_chrome.js
+++ /dev/null
@@ -1,150 +0,0 @@
-// ********** CHROME EVENTS ***************
-
-chrome.commands.onCommand.addListener(function(command) {
- chrome.windows.getLastFocused({windowTypes: ["normal"]}, function(window) {
- if (CurrentWindowId == window.id){
- if (command == "goto_tab_above"){
- ActivatePrevTab();
- }
- if (command == "goto_tab_below"){
- ActivateNextTab();
- }
- }
- });
-});
-
-chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
- if (message.command == "reload"){
- window.location.reload();
- }
- if (message.command == "recheck_tabs"){
- schedule_update_data++;
- }
- if (message.command == "drag_end"){
- DropTargetsSendToBack();
- }
-
-
- if (message.windowId == CurrentWindowId){
- switch(message.command){
- case "tab_created":
-
- // if set to treat unparented tabs as active tab's child
- if (bg.opt.append_orphan_tab == "as_child" && message.tab.openerTabId == undefined){
- message.tab.openerTabId = $(".active")[0].id;
- }
- // child case
- if (message.tab.openerTabId){
-
- // append to tree
- if (bg.opt.max_tree_depth < 0 || (bg.opt.max_tree_depth > 0 && $("#"+message.tab.openerTabId).parents(".tab").length < bg.opt.max_tree_depth)){
- if (bg.opt.append_child_tab == "top"){
- AppendTab({ tab: message.tab, ParentId: message.tab.openerTabId, Append: false });
- }
- if (bg.opt.append_child_tab == "bottom"){
- AppendTab({ tab: message.tab, ParentId: message.tab.openerTabId, Append: true });
- }
- }
-
- // if reached depth limit of the tree
- if (bg.opt.max_tree_depth > 0 && $("#"+message.tab.openerTabId).parents(".tab").length >= bg.opt.max_tree_depth){
- if (bg.opt.append_child_tab_after_limit == "after"){
- AppendTab({ tab: message.tab, InsertAfterId: message.tab.openerTabId, Append: true });
- }
- if (bg.opt.append_child_tab_after_limit == "top"){
- AppendTab({ tab: message.tab, ParentId: $("#"+message.tab.openerTabId).parent().parent()[0].id, Append: false });
- }
- if (bg.opt.append_child_tab_after_limit == "bottom"){
- AppendTab({ tab: message.tab, ParentId: $("#"+message.tab.openerTabId).parent().parent()[0].id, Append: true });
- }
- }
-
- // place tabs flat, (should I merge it with orphans case?)
- if (bg.opt.max_tree_depth == 0){
- if (bg.opt.append_child_tab_after_limit == "after"){
- AppendTab({ tab: message.tab, InsertAfterId: message.tab.openerTabId, Append: false });
- }
- if (bg.opt.append_child_tab_after_limit == "top"){
- AppendTab({ tab: message.tab, Append: false });
- }
- if (bg.opt.append_child_tab_after_limit == "bottom"){
- AppendTab({ tab: message.tab, Append: true });
- }
- }
- // orphan case
- } else {
- if (bg.opt.append_orphan_tab == "after_active"){
- AppendTab({ tab: message.tab, InsertAfterId: $(".active")[0].id, Append: false });
- }
- if (bg.opt.append_orphan_tab == "top"){
- AppendTab({ tab: message.tab, Append: false });
- }
- if (bg.opt.append_orphan_tab == "bottom"){
- AppendTab({ tab: message.tab, Append: true });
- }
- }
- if ($("#"+message.tab.openerTabId).is(".c")){
- $("#"+message.tab.openerTabId).removeClass("c").addClass("o");
- }
- RefreshExpandStates();
- schedule_update_data++;
- RefreshGUI();
- break;
- case "tab_attached":
- AppendTab({ tab: message.tab, ParentId: bg.tabs[message.tabId].p, Append: true});
- if ($("#"+message.tabId).parent().children().eq(bg.dt.DropToIndex)){
- if (bg.dt.DropAfter){
- $("#"+message.tabId).insertAfter($("#"+message.tabId).parent().children().eq(bg.dt.DropToIndex));
- } else {
- $("#"+message.tabId).insertBefore($("#"+message.tabId).parent().children().eq(bg.dt.DropToIndex));
- }
- }
- RefreshExpandStates();
- setTimeout(function(){
- DropTargetsSendToBack();
- schedule_update_data++;
- },300);
- RefreshGUI();
- break;
- case "tab_removed":
- if (bg.opt.promote_children && $("#"+message.tabId).is(".tab")){
- $("#ch"+message.tabId).children().insertAfter($("#"+message.tabId));
- } else {
- $("#"+message.tabId).find(".tab").each(function(){
- chrome.tabs.remove(parseInt(this.id));
- });
- }
- RemoveTabFromList(message.tabId);
- RefreshExpandStates();
- setTimeout(function(){ schedule_update_data++; },300);
- RefreshGUI();
- break;
- case "tab_activated":
- setTimeout(function(){ SetActiveTab(message.tabId); },100);
- break;
- case "tab_updated":
- if (message.changeInfo.favIconUrl != undefined || message.changeInfo.url != undefined){
- setTimeout(function(){ GetFaviconAndTitle(message.tabId); },100);
- }
- if (message.changeInfo.title != undefined){
- setTimeout(function(){ GetFaviconAndTitle(message.tabId); },1000);
- }
-
- if (message.changeInfo.audible != undefined || message.changeInfo.mutedInfo != undefined){
- RefreshMediaIcon(message.tabId);
- }
- if (message.changeInfo.discarded != undefined){
- RefreshDiscarded(message.tabId);
- }
- if (message.changeInfo.pinned != undefined && DragNode == undefined){
- if ((message.tab.pinned && $("#"+message.tabId).is(".tab")) || (!message.tab.pinned && $("#"+message.tabId).is(".pin"))){
- SetTabClass({ id: message.tabId, pin: message.tab.pinned });
- schedule_update_data++;
- }
- RefreshExpandStates();
- }
- break;
- }
- }
-
-});
\ No newline at end of file
diff --git a/scripts/events_refresh.js b/scripts/events_refresh.js
deleted file mode 100644
index 2cf9443..0000000
--- a/scripts/events_refresh.js
+++ /dev/null
@@ -1,145 +0,0 @@
-// ********** REFRESH GUI ***************
-
-function SetTRefreshEvents(){
- $(window).on("resize", function(event){
- RefreshGUI();
- });
-
- // click on media icon
- $(document).on("mousedown", ".tab_mediaicon", function(event){
- event.stopPropagation();
- if (event.button == 0 && $(this).parent().parent().is(".audible, .muted")){
- chrome.tabs.get(parseInt(this.parentNode.parentNode.id), function(tab){
- chrome.tabs.update(tab.id, {muted:!tab.mutedInfo.muted});
- });
- }
- });
-}
-
-function RefreshGUI() {
- if ($("#toolbar").children().length > 0) {
- if ($("#button_tools, #button_search").is(".on")) {
- $("#toolbar").css({ "height": 53 });
- } else {
- $("#toolbar").css({ "height": 26 });
- }
- } else {
- $("#toolbar").css({ "height": 0 });
- }
- if ($("#pin_list").children().length == 0) {
- $("#pin_list").addClass("hidden");
- } else {
- $("#pin_list").removeClass("hidden");
- }
- $("#tab_list").css({ "height": $(window).height() - $("#pin_list").outerHeight() - $("#toolbar").outerHeight() });
-}
-
-// set discarded class
-function RefreshDiscarded(tabId) {
- if ($("#" + tabId).length > 0) {
- chrome.tabs.get(parseInt(tabId), function(tab) {
- if (tab.discarded) {
- $("#" + tabId).addClass("discarded");
- } else {
- $("#" + tabId).removeClass("discarded");
- }
- });
- }
-}
-
-// change media icon
-function RefreshMediaIcon(tabId) {
- if ($("#" + tabId).length > 0 && bg.tabs[tabId]) {
- chrome.tabs.get(parseInt(tabId), function(tab) {
- if (tab) {
- if (tab.mutedInfo.muted) {
- $("#" + tabId).removeClass("audible").addClass("muted");
- }
- if (!tab.mutedInfo.muted && tab.audible) {
- $("#" + tabId).removeClass("muted").addClass("audible");
- }
- if (!tab.mutedInfo.muted && !tab.audible) {
- $("#" + tabId).removeClass("audible").removeClass("muted");
- }
- }
- });
- }
-}
-
-
-// Vivaldi does not have changeInfo.audible listener, this is my own implementation, hopefully this will not affect performance too much
-function VivaldiRefreshMediaIcons() {
- chrome.tabs.query({currentWindow: true}, function(tabs){
- $(".audible, .muted").removeClass("audible").removeClass("muted");
- tabs.forEach(function(Tab){
- if (Tab.audible) {
- $("#" + Tab.id).addClass("audible");
- }
- if (Tab.mutedInfo.muted) {
- $("#" + Tab.id).addClass("muted");
- }
- });
- });
- setTimeout(function() {
- VivaldiRefreshMediaIcons();
- }, 1400);
-}
-
-
-function GetFaviconAndTitle(tabId) {
- if ($("#" + tabId).length > 0 && bg.tabs[tabId]) {
- chrome.tabs.get(parseInt(tabId), function(tab) {
-
- if (tab && tab.status == "complete") {
- $("#" + tabId).removeClass("loading");
- var title = tab.title ? tab.title : tab.url;
- // change title
- $("#tab_title" + tab.id)[0].textContent = title;
- $("#tab_header" + tab.id).attr("title", title);
-
- // compatibility with various Tab suspender extensions
- if (tab.favIconUrl != undefined && tab.favIconUrl.match("data:image/png;base64") != null) {
- $("#tab_header" + tab.id).css({ "background-image": "url(" + tab.favIconUrl + ")" });
- } else {
- // case for internal pages, favicons don't have access, but can be loaded from url
- if (tab.url.match("opera://|vivaldi://|browser://|chrome://|chrome-extension://|about:") != null) {
- $("#tab_header" + tab.id).css({ "background-image": "url(chrome://favicon/" + tab.url + ")" });
- } else {
- // change favicon
- var img = new Image();
- img.src = tab.favIconUrl;
- img.onload = function() {
- $("#tab_header" + tab.id).css({ "background-image": "url(" + tab.favIconUrl + ")" });
- };
- img.onerror = function() {
- $("#tab_header" + tab.id).css({ "background-image": "url(chrome://favicon/" + tab.url + ")" });
- }
- }
- }
- }
- if (tab && tab.status == "loading") {
- $("#" + tabId).addClass("loading");
- var title = tab.title ? tab.title : bg.caption_loading;
- $("#tab_title" + tab.id)[0].textContent = title;
- $("#tab_header" + tab.id).attr("title", title);
- setTimeout(function() {
- if ($("#" + tabId).length != 0) GetFaviconAndTitle(tabId);
- }, 1000);
- }
- });
- }
-}
-
-// refresh open closed trees states
-function RefreshExpandStates() {
- $(".children").each(function() {
- if ($(this).children().length > 0) {
- $(this).parent().removeClass("n");
- if ($(this).parent().is(":not(.o, .c)")) {
- $(this).parent().addClass("o");
- }
- } else {
- $(this).parent().removeClass("o").removeClass("c").addClass("n");
- }
- });
-}
\ No newline at end of file
diff --git a/scripts/events_tabs.js b/scripts/events_tabs.js
deleted file mode 100644
index f71ea7d..0000000
--- a/scripts/events_tabs.js
+++ /dev/null
@@ -1,323 +0,0 @@
-// ********** TABS EVENTS ***************
-
-function SetTabEvents() {
- // double click to create tab
- $(document).on("dblclick", "#tab_list, #pin_list, .expand", function(event) {
- if (event.button == 0 && $(this).parent().is(".n")) {
- chrome.tabs.create({});
- }
- if (event.button == 0 && event.target.id == "tab_list") {
- chrome.tabs.create({});
- }
- if (event.button == 0 && event.target.id == "pin_list") {
- chrome.tabs.create({ pinned: true });
- }
- });
-
- $(document).on("mouseenter", ".close", function(event) {
- $(this).addClass("close_hover");
- });
-
- $(document).on("mouseleave", ".close", function(event) {
- $(".close_hover").removeClass("close_hover");
- });
-
- $(document).on("mouseover", ".tab_header", function(event) {
- $(this).addClass("tab_header_hover");
-
- if (bg.opt.always_show_close == false) {
- $(this).addClass("close_show");
- }
- });
-
- $(document).on("mouseleave", ".tab_header", function(event) {
- $(this).removeClass("tab_header_hover");
-
- if (bg.opt.always_show_close == false) {
- $(this).removeClass("close_show");
- }
- });
-
- // PREVENT THE DEFAULT BROWSER DROP ACTION
- $(document).bind("drop dragover", function(event) {
- event.preventDefault();
- });
-
-
- // bring to front drop zones
- $(document).on("dragover", ".tab_header", function(event) {
- DropTargetsSendToFront();
- });
-
- // SET DRAG SOURCE
- $(document).on("dragstart", ".tab_header", function(event) {
- event.stopPropagation();
- bg.dt.tabsIds.splice(0, bg.dt.tabsIds.length);
-
- event.originalEvent.dataTransfer.setData("null", "null");
- event.originalEvent.dataTransfer.setDragImage(document.getElementById("DragImage"), 0, 0);
-
- DragNode = $(this).parent()[0];
- $(".close").removeClass("show");
- $(".tab_header_hover").removeClass("tab_header_hover");
- $(this).parent().addClass("tab_header_hover");
-
- if ($(this).parent().is(":not(.selected)")) {
- $(".selected").addClass("frozen").removeClass("selected");
- $(this).parent().addClass("temporary").addClass("selected");
- }
-
- $(".selected").each(function() {
- bg.dt.tabsIds.push(parseInt(this.id));
- if ($("#ch" + this.id).children().length > 0) {
- $($("#ch" + this.id).find(".tab")).each(function() {
- bg.dt.tabsIds.push(parseInt(this.id));
- });
- }
- });
- bg.dt.CameFromWindowId = CurrentWindowId;
- });
-
- // SET DROP TARGET
- $(document).on("dragenter", ".drag_entered_top, .drag_entered_bottom, .drag_enter_center", function(event) {
- event.stopPropagation();
- if ($(".selected").find($(this)).length > 0) return;
- $(".highlighted_drop_target").removeClass("highlighted_drop_target");
- $(this).addClass("highlighted_drop_target");
- });
-
- $(document).on("dragenter", ".drag_enter_center", function(event) {
- timeout = false;
- setTimeout(function() { timeout = true; }, 1800);
- });
- $(document).on("dragleave", ".drag_enter_center", function(event) {
- timeout = false;
- });
- $(document).on("dragover", ".drag_enter_center", function(event) {
- if (timeout && bg.opt.open_tree_on_hover && $(this).parent().is(".c")) {
- $(this).parent().addClass("o").removeClass("c");
- timeout = false;
- }
- });
-
-
- $(document).on("dragend", ".tab_header", function(event) {
- if (bg.dt.CameFromWindowId == CurrentWindowId && bg.dt.DroppedToWindowId == 0) {
- DetachTabs(bg.dt.tabsIds);
- }
-
- if (bg.dt.CameFromWindowId == CurrentWindowId && bg.dt.DroppedToWindowId != CurrentWindowId && bg.dt.DroppedToWindowId != 0) {
- bg.tabs[bg.dt.tabsIds[0]].p = bg.dt.DropToTabId;
- bg.tabs[bg.dt.tabsIds[0]].n = bg.dt.DropToIndex;
- chrome.tabs.move(bg.dt.tabsIds, { windowId: bg.dt.DroppedToWindowId, index: -1 });
- }
-
- if (bg.dt.CameFromWindowId == CurrentWindowId && bg.dt.DroppedToWindowId == CurrentWindowId) {
- if ($(".highlighted_drop_target").parent().is(".pin")) {
- $(".selected").each(function() {
- SetTabClass({ id: this.id, pin: true });
-
- if ($(".highlighted_drop_target").is(".drag_entered_top")) {
- $(this).insertBefore($(".highlighted_drop_target").parent());
- } else {
- $(this).insertAfter($(".highlighted_drop_target").parent());
- }
- });
- }
-
- if ($(".highlighted_drop_target").parent().is(".tab")) {
- $(".selected").each(function() {
- SetTabClass({ id: this.id, pin: false });
- });
- if ($(".highlighted_drop_target").is(".drag_entered_top")) {
- $(".selected").insertBefore($(".highlighted_drop_target").parent());
-
- }
- if ($(".highlighted_drop_target").is(".drag_entered_bottom")) {
- $(".selected").insertAfter($(".highlighted_drop_target").parent());
- }
- if (($(".highlighted_drop_target").is(".drag_enter_center") && $("#" + DragNode.id).parent()[0].id != "ch" + $(".highlighted_drop_target")[0].id.substr(2))) {
- if (bg.opt.append_at_end) {
- $("#ch" + $(".highlighted_drop_target")[0].id.substr(2)).append($(".selected"));
- } else {
- $("#ch" + $(".highlighted_drop_target")[0].id.substr(2)).prepend($(".selected"));
- }
- }
- }
- }
-
- RefreshExpandStates();
-
- setTimeout(function() {
- timeout = false;
- DragNode = undefined;
- schedule_update_data++;
- DropTargetsSendToBack();
- }, 500);
- $(".highlighted_drop_target").removeClass("highlighted_drop_target");
- $(".tab_header_hover").removeClass("tab_header_hover");
- $(".frozen").addClass("selected").removeClass("frozen");
- $(".temporary").removeClass("selected").removeClass("temporary");
- chrome.runtime.sendMessage({command: "drag_end"});
- });
-
-
- $(document).on("click", ".exp_box", function(event) {
- event.stopPropagation();
- if (event.button == 0) {
- if ($(this).parent().parent().is(".o")) {
- $(this).parent().parent().removeClass("o").addClass("c");
- if (bg.tabs[$(this).parent().parent()[0].id]) {
- bg.tabs[$(this).parent().parent()[0].id].o = "c";
- }
- } else {
- if ($(this).parent().parent().is(".c")) {
- if (bg.opt.close_other_trees) {
- $(".o").removeClass("o").addClass("c");
- $(this).parents(".tab").each(function() {
- $(this).removeClass("n").removeClass("c").addClass("o");
- if (bg.tabs[this.id]) {
- bg.tabs[this.id].o = "o";
- }
- });
- $(".c").each(function() {
- if (bg.tabs[this.id]) {
- bg.tabs[this.id].o = "c";
- }
- });
- }
- $(this).parent().parent().removeClass("c").addClass("o");
- if (bg.tabs[$(this).parent().parent()[0].id]) {
- bg.tabs[$(this).parent().parent()[0].id].o = "o";
- }
- }
- }
- bg.schedule_save++;
- }
- });
-
- // SELECT OR CLOSE TAB/PIN
- $(document).on("mousedown", ".tab, .pin", function(event) {
- DropTargetsSendToBack();
- event.stopPropagation();
- if (event.button == 0) {
-
- // SET SELECTION WITH SHIFT
- if (event.shiftKey) {
- $(".pin, .tab").removeClass("selected").removeClass("frozen").removeClass("temporary");
- if ($(this).index() >= $(".active").index()) {
- $(".active").nextUntil($(this), ":visible").add($(".active")).add($(this)).addClass("selected");
- } else {
- $(".active").prevUntil($(this), ":visible").add($(".active")).add($(this)).addClass("selected");
- }
- }
-
- // TOGGLE SELECTION WITH CTRL
- if (event.ctrlKey) {
- $(this).toggleClass("selected");
- }
- }
-
- // CLOSE TAB
- if (
- (($(this).is(".tab") && $(event.target).is(":not(.expand)")) && ((event.button == 1 && bg.opt.close_with_MMB == true) || (event.button == 0 && $(event.target).is(".close, .close_img"))))
- ||
- ($(this).is(".pin") && event.button == 1 && bg.opt.close_with_MMB == true && bg.opt.allow_pin_close == true)
- ) {
- if ($(this).is(".active") && bg.opt.after_closing_active_tab != "browser") {
- var tabId;
- var Prev = $(this).prev();
- var Next = $(this).next();
-
- // if in root, seek for closest, in order set in options, first next then prev, or prev then next
- if ($(this).parent().is("#pin_list, #tab_list, .children")) {
- if (bg.opt.after_closing_active_tab == "above") {
- if (Prev[0]) {
- tabId = Prev[0].id;
- } else {
- if (Next[0]) {
- tabId = Next[0].id;
- }
- }
- }
- if (bg.opt.after_closing_active_tab == "below") {
- if (Next[0]) {
- tabId = Next[0].id;
- } else {
- if (Prev[0]) {
- tabId = Prev[0].id;
- }
- }
- }
- }
-
- // if no tabs left in the tree, go to parent
- if (tabId == undefined && $(this).parent().parent().is(".tab")) {
- tabId = $(this).parent().parent()[0].id;
- }
-
- // if found a matching condition a new tab will be activated
- if (tabId) {
- SetActiveTab(tabId);
- chrome.tabs.update(parseInt(tabId), { active: true });
- }
-
- }
-
- if ($("#" + this.id).is(".pin")) {
- $("#" + this.id).remove();
- chrome.tabs.update(parseInt(this.id), { pinned: false });
- }
-
- chrome.tabs.remove(parseInt(this.id));
- }
- });
-
- // single click to activate tab
- $(document).on("click", ".tab_header", function(event) {
- event.stopPropagation();
- if (!event.shiftKey && !event.ctrlKey && $(event.target).is(":not(.close, .close_img, .expand, .tab_mediaicon)")) {
- SetActiveTab($(this).parent()[0].id);
- chrome.tabs.update(parseInt($(this).parent()[0].id), { active: true });
- }
- });
-
-
- // set bg.dt to detach tabs when drag ends outside the window
- $(document).on("dragleave", "body", function(event) {
- bg.dt.DroppedToWindowId = 0;
- });
- // set bg.dt to attach tabs when drag ends inside the window
- $(document).on("dragover", "*", function(event) {
- bg.dt.DroppedToWindowId = CurrentWindowId;
- });
- $(document).on("drag", ".tab_header", function(event) {
- event.stopPropagation();
- bg.dt.DroppedToWindowId = CurrentWindowId;
- });
- $(document).on("drop", "#pin_list, #tab_list", function(event) {
- bg.dt.DroppedToWindowId = CurrentWindowId;
- });
-
- // set bg.dt to attach tabs and append them to tabId
- $(document).on("drop", ".drag_enter_center", function(event) {
- event.stopPropagation();
- bg.dt.DroppedToWindowId = CurrentWindowId;
- bg.dt.DropToTabId = $(this).parent()[0].id;
- });
-
- // set bg.dt to attach tabs and move them above or below highligted tab
- $(document).on("drop", ".drag_entered_top, .drag_entered_bottom", function(event) {
- event.stopPropagation();
- bg.dt.DroppedToWindowId = CurrentWindowId;
- if ($(this).parent().parent().is("#tab_list, #pin_list")){
- bg.dt.DropToTabId = $(this).parent().parent()[0].id;
- } else {
- bg.dt.DropToTabId = $(this).parent().parent().parent()[0].id;
- }
-
- bg.dt.DropToIndex = $(this).parent().index();
- bg.dt.DropAfter = $(this).is(".drag_entered_bottom") ? true : false;
- });
-
-}
\ No newline at end of file
diff --git a/scripts/folders.js b/scripts/folders.js
new file mode 100644
index 0000000..7b2cc38
--- /dev/null
+++ b/scripts/folders.js
@@ -0,0 +1,72 @@
+// 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 AddNewFolder() {
+ var ID = GenerateNewFolderID();
+ AppendFolder({id: ID, name: "untitled"});
+}
+
+function AppendFolder(param) {
+ var fd = document.createElement("div"); fd.className = "folder c"; fd.id = param.id;// FOLDER
+ var dc = document.createElement("div"); dc.className = "drop_target drag_enter_center"; dc.id = "dc"+param.id; fd.appendChild(dc); // DROP TARGET CENTER
+ var dt = document.createElement("div"); dt.className = "drop_target drag_entered_top"; dt.id = "du"+param.id; fd.appendChild(dt); // DROP TARGET TOP
+ var db = document.createElement("div"); db.className = "drop_target drag_entered_bottom"; db.id = "dd"+param.id; fd.appendChild(db); // DROP TARGET BOTTOM
+
+
+ var fh = document.createElement("div"); fh.className = "folder_header"; fh.id = "tab_header"+param.id; fh.draggable = true; fd.appendChild(fh); // HEADER
+ var ex = document.createElement("div"); ex.className = "folder_icon"; ex.id = "fop"+param.id; fh.appendChild(ex);
+ var ft = document.createElement("div"); ft.className = "folder_title"; ft.id = "folder_title"+param.id; ft.textContent = param.name; fh.appendChild(ft); // TITLE
+ // $("#tab_title" + tab.id)[0].textContent = title;
+ // $("#tab_header" + tab.id).attr("title", title);
+
+
+
+
+ var ch = document.createElement("div"); ch.className = "children"; ch.id = "ch"+param.id; fd.appendChild(ch);
+ // var tt = document.createElement("div"); tt.className = "tab_title"; tt.id = "tab_title"+param.tab.id; th.appendChild(tt); // TITLE
+
+ $("#"+active_group).append(fd);
+
+}
+
+function GenerateNewFolderID(){
+ var newID = "f_"+GenerateRandomID();
+ console.log("generating "+newID);
+ if ($("#"+newID)[0]) {
+ GenerateNewFolderID();
+ console.log("exists "+newID);
+ } else {
+ console.log("yay this is ok "+newID);
+ return newID;
+ }
+}
+
+function SetFolderEvents() {
+ // EXPAND BOX - EXPAND / COLLAPSE
+ $(document).on("mousedown", ".folder_icon", function(event) {
+ event.stopPropagation();
+ if (event.button == 0) {
+ if ($(this).parent().parent().is(".o")) {
+ $(this).parent().parent().removeClass("o").addClass("c");
+ // chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt($(this).parent().parent()[0].id), tab: { expand: "c" } });
+ } else {
+ if ($(this).parent().parent().is(".c")) {
+ $(this).parent().parent().removeClass("c").addClass("o");
+ // chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt($(this).parent().parent()[0].id), tab: { expand: "o" } });
+ // if (opt.close_other_trees) {
+ // $(".o:visible:not(#"+$(this).parent().parent()[0].id+")").removeClass("o").addClass("c");
+ // $(this).parents(".tab").each(function() {
+ // $(this).removeClass("n").removeClass("c").addClass("o");
+ // chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt(this.id), tab: { expand: "o" } });
+ // });
+ // $(".c").each(function() {
+ // chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt(this.id), tab: { expand: "c" } });
+ // });
+ // }
+ }
+ }
+ }
+ });
+}
\ No newline at end of file
diff --git a/scripts/global.js b/scripts/global.js
new file mode 100644
index 0000000..9770741
--- /dev/null
+++ b/scripts/global.js
@@ -0,0 +1,206 @@
+// 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/
+
+// ********** GLOBAL VARIABLES FOR BACKGROUND, OPTIONS AND SIDEBAR ***************
+
+
+var hold = true;
+var schedule_save = 0;
+var schedule_update_indexes = 0;
+var schedule_rearrange_tabs = 0;
+var windows = {};
+var tabs = {};
+
+var MouseHoverOver = "";
+
+
+var DragAndDrop = {timeout: false, DragNode: undefined, DragNodeClass: "", Dropped: true, SelectedTabsIds: [], TabsIds: [], Parents: [], ComesFromWindowId: 0, Depth: 0};
+var DropTargetsInFront = false;
+
+
+var menuTabId = 0;
+var CurrentWindowId = 0;
+var SearchIndex = 0;
+var schedule_update_data = 0;
+var active_group = "tab_list";
+var PickColor = "";
+
+var opt = {};
+var browserId = navigator.userAgent.match("Opera") !== null ? "O" : ( navigator.userAgent.match("Vivaldi") !== null ? "V" : (navigator.userAgent.match("Firefox") !== null ? "F" : "C" ) );
+
+var bgtabs = {};
+var bggroups = {};
+
+var caption_clear_filter = chrome.i18n.getMessage("caption_clear_filter");
+var caption_loading = chrome.i18n.getMessage("caption_loading");
+var caption_searchbox = chrome.i18n.getMessage("caption_searchbox");
+
+var caption_ungrouped_group = chrome.i18n.getMessage("caption_ungrouped_group");
+var caption_noname_group = chrome.i18n.getMessage("caption_noname_group");
+
+var DefaultToolbar =
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ // '
'+
+ '
'+
+ '
'+
+ '
'+
+ '
'+
+ '
';
+ // '
'+
+ // '
'+
+
+var DefaultTheme = { "ToolbarShow": true, "ColorsSet": {}, "TabsSizeSetNumber": 2, "theme_name": "untitled", "theme_version": 2, "toolbar": DefaultToolbar, "unused_buttons": "" };
+var DefaultPreferences = { "skip_load": false, "new_open_below": false, "pin_list_multi_row": false, "close_with_MMB": true, "always_show_close": false, "allow_pin_close": false, "append_child_tab": "bottom", "append_child_tab_after_limit": "after", "append_orphan_tab": "bottom", "after_closing_active_tab": "below", "close_other_trees": false, "promote_children": true, "open_tree_on_hover": true, "max_tree_depth": -1, "max_tree_drag_drop": true, "never_show_close": false, "switch_with_scroll": false, "syncro_tabbar_tabs_order": true };
+
+
+
+
+// ******************* GLOBAL FUNCTIONS ************************
+function LoadData(KeyName, ExpectReturnDefaultType) {
+ var data = ExpectReturnDefaultType;
+ try {
+ data = JSON.parse(localStorage[KeyName]);
+ return data;
+ } catch(e) {
+ return ExpectReturnDefaultType;
+ }
+}
+
+// generate random id
+function GenerateRandomID(){
+ var letters = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","K","L","M","N","O","P","R","S","T","Q","U","V","W","Y","Z","a","b","c","d","e","f","g","h","i","k","l","m","n","o","p","r","s","t","q","u","v","w","y","z"];
+ 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){
+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+')'; }
+}
+
+
+/* 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") {
+ // I have no idea what is going on, but why 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 LoadPreferences() {
+ var LoadedPreferences = LoadData("preferences", {});
+
+ for (var parameter in DefaultPreferences) {
+ opt[parameter] = DefaultPreferences[parameter];
+ }
+ for (var parameter in LoadedPreferences) {
+ if (opt[parameter] != undefined) {
+ opt[parameter] = LoadedPreferences[parameter];
+ }
+ }
+}
+function LoadDefaultPreferences() {
+ for (var parameter in DefaultPreferences) {
+ opt[parameter] = DefaultPreferences[parameter];
+ }
+}
+function SavePreferences() {
+ localStorage["preferences"] = JSON.stringify(opt);
+ setTimeout(function() {
+ chrome.runtime.sendMessage({command: "reload_options"});
+ },200);
+}
+function ShowOpenFileDialog(id, extension) {
+ let body = document.getElementById("body");
+ let inp = document.createElement("input");
+ inp.id = id;
+ inp.type = "file";
+ inp.accept = extension;
+ inp.style.display = "none";
+ body.appendChild(inp);
+ $("#"+id).click();
+}
+function SaveFile(filename, data) {
+ let d = JSON.stringify(data);
+ let body = document.getElementById("body");
+ let link = document.createElement("a");
+ link.target = "_self";
+ link.download = filename;
+ link.href = "data:text/csv;charset=utf-8," + encodeURIComponent(d);
+ body.appendChild(link);
+ link.click();
+ link.remove();
+}
+
diff --git a/scripts/global_variables.js b/scripts/global_variables.js
deleted file mode 100644
index fb981a9..0000000
--- a/scripts/global_variables.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// ********** GLOBAL VARIABLES ***************
-
-var bg;
-if (navigator.userAgent.match("Firefox") !== null){
- bg = browser.extension.getBackgroundPage();
-} else {
- bg = chrome.extension.getBackgroundPage();
-}
-
-var MouseHoverOver = "";
-var DragNode;
-var DropTargetsInFront = false;
-var timeout = false;
-var menuTabId = 0;
-var CurrentWindowId = 0;
-var SearchIndex = 0;
-var schedule_update_data = 0;
diff --git a/scripts/groups.js b/scripts/groups.js
new file mode 100644
index 0000000..59e66fe
--- /dev/null
+++ b/scripts/groups.js
@@ -0,0 +1,295 @@
+// 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/
+
+// ********** GROUPS FUNCTIONS ***************
+
+function AppendAllGroups() {
+ // var scroll = $("#group_list").scrollTop();
+ for (var group in bggroups) {
+ AppendGroupToList(bggroups[group].id, bggroups[group].name, bggroups[group].font);
+ }
+ RearrangeGroups(0);
+}
+
+function RearrangeGroups(stack) {
+ $(".group_button").each(function() {
+ if ($("#group_list").children().eq(bggroups[(this.id).substr(1)].index)[0] && $(this).index() > bggroups[(this.id).substr(1)].index) {
+ $(this).insertBefore($("#group_list").children().eq(bggroups[(this.id).substr(1)].index)[0]);
+ } else {
+ if ($("#group_list").children().eq(bggroups[(this.id).substr(1)].index)[0] && $(this).index() < bggroups[(this.id).substr(1)].index) {
+ $(this).insertAfter($("#group_list").children().eq(bggroups[(this.id).substr(1)].index)[0]);
+ }
+ }
+ if ($(this).index() != bggroups[(this.id).substr(1)].index && stack < 10) {
+ RearrangeGroups(stack+1);
+ }
+ });
+}
+
+function AppendGroupToList(groupId, group_name, font_color) {
+ if ($("#"+groupId).length == 0 && $("#groups")[0]) {
+ var grp = document.createElement("div"); grp.className = "group"; grp.id = groupId; $("#groups")[0].appendChild(grp);
+ }
+ if ($("#_"+groupId).length == 0) {
+ var gbn = document.createElement("div"); gbn.className = "group_button"; gbn.id = "_"+groupId; $("#group_list")[0].appendChild(gbn);
+ var gte = document.createElement("span"); gte.className = "group_title"; gte.id = "_gte"+groupId; gte.textContent = group_name; if (font_color != "") {gte.style.color = "#"+font_color;} gbn.appendChild(gte);
+ var gtd = document.createElement("div"); gtd.className = "group_drag_box"; gtd.draggable = true; gtd.id = "-"+groupId; gbn.appendChild(gtd);
+ }
+ if (groupId != active_group) {
+ $("#"+groupId).hide();
+ }
+ RefreshGUI();
+
+ if (opt.switch_with_scroll) {
+ BindTabsSwitchingToMouseWheel();
+ }
+}
+
+function GenerateNewGroupID(){
+ var newID = "g_"+GenerateRandomID();
+ if ($("#"+newID)[0]) {
+ GenerateNewGroupID();
+ } else {
+ return newID;
+ }
+}
+
+function AddNewGroup(p) {
+ var newId = GenerateNewGroupID();
+ bggroups[newId] = { id: newId, index: 0, activetab: 0, name: (p.name ? p.name : caption_noname_group), font: (p.font ? p.font : "") };
+ AppendGroupToList(newId, bggroups[newId].name, bggroups[newId].font);
+ UpdateBgGroupsOrder();
+ return newId;
+ // chrome.runtime.sendMessage({command: "save_groups", groups: bggroups, windowId: CurrentWindowId});
+}
+
+// function AppendTabsToGroup(p) {
+// }
+
+// remove group, delete tabs if close_tabs is true
+function GroupRemove(groupId, close_tabs) {
+ if (close_tabs) {
+ CloseTabs($("#"+active_group).find(".tab").map(function() {return parseInt(this.id);}).toArray());
+ } else {
+ $("#"+groupId).children().each(function() {
+ $("#tab_list").append(this);
+ });
+ }
+ delete bggroups[groupId];
+ if ($("#_"+groupId).prev(".group_button")[0]) {
+ SetActiveGroup(($("#_"+groupId).prev(".group_button")[0].id).substr(1), true, true);
+ } else {
+ if ($("#_"+groupId).next(".group_button")[0]) {
+ SetActiveGroup(($("#_"+groupId).next(".group_button")[0].id).substr(1), true, true);
+ } else {
+ SetActiveGroup("tab_list", true, true);
+ }
+ }
+ chrome.runtime.sendMessage({command: "save_groups", groups: bggroups, windowId: CurrentWindowId});
+ $("#"+groupId).remove();
+ $("#_"+groupId).remove();
+ schedule_update_data++;
+}
+
+function UpdateBgGroupsOrder() {
+ $(".group_button").each(function() {
+ bggroups[(this.id).substr(1)].index = $(this).index();
+ });
+ chrome.runtime.sendMessage({command: "save_groups", groups: bggroups, windowId: CurrentWindowId});
+}
+
+function SetActiveGroup(groupId, switch_to_active_in_group, scroll_to_active) {
+ if ($("#"+groupId)[0] == undefined) {
+ return;
+ }
+ $(".group_button").removeClass("active_group");
+ $("#_"+groupId).addClass("active_group");
+ $(".tab, .group").hide();
+ $("#"+groupId).show();
+ $("#"+groupId+" .tab").show();
+ active_group = groupId;
+ RefreshGUI();
+ $("#group_edit").hide();
+
+ if (switch_to_active_in_group && $("#"+groupId+" .active")[0]){
+ chrome.tabs.update(parseInt($("#"+groupId+" .active")[0].id), {active: true});
+ }
+ if (scroll_to_active){
+ ScrollToTab($("#"+groupId+" .active")[0].id);
+ }
+ if (groupId == "tab_list" && $("#button_edit_group")[0]) {
+ $("#button_remove_group, #button_edit_group").addClass("disabled");
+ } else {
+ $("#button_remove_group, #button_edit_group").removeClass("disabled");
+ }
+ chrome.runtime.sendMessage({command: "set_active_group", active_group: groupId, windowId: CurrentWindowId});
+}
+
+function SetActiveTabInActiveGroup(tabId) {
+ if (bggroups[active_group] != undefined) {
+ bggroups[active_group].activetab = parseInt(tabId);
+ chrome.runtime.sendMessage({command: "save_groups", groups: bggroups, windowId: CurrentWindowId});
+ }
+}
+
+// direction == true goes up, false goes down
+// function ScrollGroupList(direction) {
+ // if (direction) {
+ // $("#group_list").scrollTop($("#group_list").scrollTop()-3);
+ // }
+ // if (!direction) {
+ // $("#group_list").scrollTop($("#group_list").scrollTop()+3);
+ // }
+ // if (IOKeys.LMB) {
+ // setTimeout(function() { ScrollGroupList(direction); },10);
+ // }
+// }
+
+// function ScrollToGroup(groupId) {
+ // if ($("#"+groupId).offset().top-$("#group_list").offset().top < 1) {
+ // $("#group_list").scrollTop($("#group_list").scrollTop()+$("#"+groupId).offset().top-$("#group_list").offset().top-1);
+ // } else {
+ // if ($("#"+groupId).offset().top+$("#"+groupId).outerHeight()+1 > $("#group_list").offset().top+$("#group_list").innerHeight()) {
+ // $("#group_list").scrollTop($("#group_list").scrollTop()+$("#"+groupId).offset().top-$("#group_list").offset().top-$("#group_list").innerHeight()+$("#"+groupId).outerHeight()-1);
+ // }
+ // }
+// }
+
+// Edit group popup
+function ShowGroupEditWindow(GroupId) {
+ $("#group_edit_name")[0].value = bggroups[GroupId].name;
+ $("#group_edit").css({"display": "block", "top": $("#toolbar_groups").offset().top + 8, "left": 22});
+ $("#group_edit_font").css({"background-color": bggroups[GroupId].font == "" ? "var(--button_icons, #808080)" : "#"+bggroups[GroupId].font});
+}
+
+// when pressed OK in group popup
+function GroupEditConfirm() {
+ $("#group_edit_name")[0].value = $("#group_edit_name")[0].value.replace(/[\f\n\r\v\t\<\>\+\-\(\)\.\,\;\:\~\/\|\?\@\!\"\'\£\$\%\&\^\#\=\*\[\]]?/gi, "");
+ bggroups[active_group].name = $("#group_edit_name")[0].value;
+ bggroups[active_group].font = RGBtoHex($("#group_edit_font").css("background-color"));
+ $("#group_edit").hide(0);
+ $(".group_title#_gte" +active_group).css({"color": "#"+bggroups[active_group].font});
+ RefreshGUI();
+ chrome.runtime.sendMessage({command: "save_groups", groups: bggroups, windowId: CurrentWindowId});
+}
+
+// "Move to group" popup
+// function ShowMoveToGroupWindow(x, y) {
+ // $(".move_to_group_menu_entry").remove();
+ // bggroups.forEach(function(group) {
+ // if (vt.ActiveGroup != group.g) {
+ // var li = document.createElement("li");
+ // li.id = "move_to_"+group.g;
+ // li.className = "menu_item move_to_group_menu_entry";
+ // li.innerHTML = group.n;
+ // $("#move_to_group_menu")[0].appendChild(li);
+ // }
+ // });
+ // if (x >= $(window).width()-$("#tabs_menu").outerWidth()) {
+ // x = $(window).width()-$("#tabs_menu").outerWidth();
+ // }
+ // if (y >= $(window).height()-$("#move_to_group_menu").outerHeight()-20) {
+ // y = $(window).height()-$("#move_to_group_menu").outerHeight();
+ // }
+ // $("#move_to_group_menu").css({"display": "block", "top": y-24, "left": x-20});
+// }
+
+
+// ********** GROUPS EVENTS ***************
+
+function RestoreStateOfGroupsToolbar() {
+ chrome.runtime.sendMessage({command: "get_group_bar", windowId: CurrentWindowId}, function(response) {
+ $("#toolbar_groups").css({"display": "inline-block"});
+ if (response == true) {
+ $("#toolbar_groups").removeClass("hidden");
+ $("#toolbar_groups").css({"width": "19px", "border-right": "1px solid var(--group_list_borders)"});
+ } else {
+ $("#toolbar_groups").addClass("hidden");
+ $("#toolbar_groups").css({"width": "0px", "border-right": "none"});
+ }
+ });
+}
+
+function SetGroupEvents() {
+
+ // activate group
+ $(document).on("mousedown", ".group_button", function(event) {
+ menuGroupId = (this.id).substr(1);
+ if (event.button == 0) {
+ SetActiveGroup((this.id).substr(1), true, true);
+ }
+ });
+
+ // show/hide groups toolbar
+ $(document).on("mousedown", "#button_groups_toolbar_hide", function(event) {
+ if (event.button == 0) {
+ // $("#toolbar_groups").toggleClass("hidden");
+ $("#toolbar_groups").toggleClass("hidden");
+ if ($("#toolbar_groups").is(".hidden")) {
+ $("#toolbar_groups").css({"width": "0px", "border-right": "none"});
+ chrome.runtime.sendMessage({command: "set_group_bar", group_bar: false, windowId: CurrentWindowId});
+ } else {
+ $("#toolbar_groups").css({"width": "19px", "border-right": "1px solid var(--group_list_borders)"});
+ chrome.runtime.sendMessage({command: "set_group_bar", group_bar: true, windowId: CurrentWindowId});
+ }
+ RefreshGUI();
+ }
+ });
+
+
+ // edit group dialog box
+ $(document).on("mousedown", "#group_edit_discard", function(event) {
+ $("#group_edit").hide(0);
+ });
+ $("#group_edit_name").keyup(function(e) {
+ if (e.keyCode == 13) {
+ GroupEditConfirm();
+ }
+ });
+ $(document).on("mousedown", "#group_edit_confirm", function(event) {
+ GroupEditConfirm();
+ });
+
+ // show color picker
+ $(document).on("mousedown", "#group_edit_font, #group_edit_background", function(event) {
+ event.stopPropagation();
+ PickColor = this.id;
+ $("#color_picker")[0].value = "#"+RGBtoHex($(this).css("background-color"));
+ $("#color_picker").focus();
+ $("#color_picker").click();
+ });
+
+ $(document).on("input", "#color_picker", function(event) {
+ $("#"+PickColor).css({"background-color": $("#color_picker")[0].value});
+ });
+
+ // scroll groups
+ // $(document).on("mousedown", "#scroll_group_up, #scroll_group_down", function(event) {
+ // IOKeys.LMB = true;
+ // ScrollGroupList($(this).is("#scroll_group_up"));
+ // });
+ // $(document).on("mouseleave", "#scroll_group_up, #scroll_group_down", function(event) {
+ // IOKeys.LMB = false;
+ // });
+
+ // remove tabs from group button
+ // $(document).on("mousedown", "#remove_tabs_from_group", function(event) {
+ // if (event.button == 0 && vt.ActiveGroup.match("at|ut") == null) {
+ // AppendTabsToGroup({tabsIds: $(".tab.selected:visible").map(function() {return parseInt(this.id);}).toArray(), groupId: "ut", SwitchTabIfHasActive: true, insertAfter: true, moveTabs: true});
+ // }
+ // });
+
+
+ // remove group
+ // $(document).on("mousedown", ".group", function(event) {
+ // if (event.button == 1 || IOKeys.Shift) {
+ // if (IOKeys.Shift) {
+ // GroupRemove($(this)[0].id, true);
+ // } else {
+ // GroupRemove($(this)[0].id, false);
+ // }
+ // }
+ // });
+
+}
\ No newline at end of file
diff --git a/scripts/menu_tabs.js b/scripts/menu.js
similarity index 77%
rename from scripts/menu_tabs.js
rename to scripts/menu.js
index 32ceead..f0b2278 100644
--- a/scripts/menu_tabs.js
+++ b/scripts/menu.js
@@ -1,18 +1,19 @@
-// ********** TABS MENU ***************
+// 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/
+
+// ********** MENU ***************
function SetMenu() {
- // set menu labels
- $(".menu_item").each(function() {
- $(this).text(chrome.i18n.getMessage(this.id));
- });
-
// trigger action when the contexmenu is about to be shown
$(document).bind("contextmenu", function(event) {
- event.preventDefault();
+ if (!event.ctrlKey) {
+ event.preventDefault();
+ }
});
// show menu
- $(document).on("mousedown", "#pin_list, #tab_list, .tab, .pin", function(event) {
+ $(document).on("mousedown", "#groups, .tab, .pin", function(event) {
event.stopPropagation();
if (event.button == 2) {
$(".menu").hide(0);
@@ -20,7 +21,13 @@ function SetMenu() {
if ($(this).is(".tab, .pin")) {
menuTabId = parseInt($(this)[0].id);
} else {
- menuTabId = parseInt($(".active")[0].id);
+ if ($(".active:visible")[0]) {
+ menuTabId = parseInt($(".active:visible")[0].id);
+ } else {
+ if ($(".active")[0]) {
+ menuTabId = parseInt($(".active")[0].id);
+ }
+ }
}
if ($("#" + menuTabId).is(".pin")) {
$("#tabs_menu_pin").text(chrome.i18n.getMessage("tabs_menu_unpin"));
@@ -30,7 +37,7 @@ function SetMenu() {
$("#tabs_menu_expand_all, #tabs_menu_collapse_all").css({ "display": "none" });
$("#tabs_menu_collapse_all").next().css({ "display": "none" });
- if (!bg.opt.allow_pin_close) {
+ if (!opt.allow_pin_close) {
$("#tabs_menu_close").css({ "display": "none" });
}
} else {
@@ -57,10 +64,6 @@ function SetMenu() {
$("#tabs_menu_unmute").css({ "display": "none" });
}
-
- // APPEND TABS TO BG.DATA ARRAY
- bg.dt.tabsIds = $("#" + menuTabId).is(".selected") ? $(".tab.selected:visible").map(function() { return parseInt(this.id); }).toArray() : [menuTabId];
-
// show contextmenu with correct size position
if ($("#tabs_menu").outerWidth() > $(window).width() - 10) {
$("#tabs_menu").css({ "width": $(window).width() - 10 });
@@ -73,17 +76,6 @@ function SetMenu() {
}
});
- // hide menu
- $(document).on("mousedown", "body", function(event) {
- if (event.button != 2) {
- $(".menu").hide(300);
- }
- });
-
- $(document).on("mouseleave", "body", function(event) {
- $(".menu").hide(300);
- });
-
// if the menu element is clicked
$(document).on("mousedown", "#tabs_menu li", function(event) {
if (event.button != 0) {
@@ -132,12 +124,16 @@ function SetMenu() {
if ($("#" + menuTabId).is(".selected")) {
$(".selected:visible").each(function() {
chrome.tabs.get(parseInt(this.id), function(tab) {
- chrome.tabs.update(tab.id, { muted: true });
+ if (tab) {
+ chrome.tabs.update(tab.id, { muted: true });
+ }
});
});
} else {
chrome.tabs.get(menuTabId, function(tab) {
- chrome.tabs.update(tab.id, { muted: true });
+ if (tab) {
+ chrome.tabs.update(tab.id, { muted: true });
+ }
});
}
break;
@@ -145,7 +141,9 @@ function SetMenu() {
if ($("#" + menuTabId).is(".selected")) {
$(".selected:visible").each(function() {
chrome.tabs.get(parseInt(this.id), function(tab) {
- chrome.tabs.update(tab.id, { muted: false });
+ if (tab) {
+ chrome.tabs.update(tab.id, { muted: false });
+ }
});
});
} else {
@@ -194,7 +192,7 @@ function SetMenu() {
});
break;
case "tab_discard":
- DiscardTabs(bg.dt.tabsIds);
+ DiscardTabs($("#" + menuTabId).is(".selected") ? $(".tab.selected:visible").map(function() { return parseInt(this.id); }).toArray() : [menuTabId]);
break;
case "tab_settings":
chrome.tabs.create({ "url": "options.html" });
@@ -210,4 +208,25 @@ function SetMenu() {
}
$(".menu").hide(0);
});
+
+
+
+
+
+
+
+ // move tabs to group
+ // $(document).on("mousedown", "#tabs_menu_move_to_new_group, .move_to_group_menu_entry", function(event) {
+ // var tabsIds
+ // if ($(this).is("#tabs_menu_move_to_new_group")) {
+ // bg.dt.DropToGroup = AddNewGroup(575757);
+ // GetColorFromMiddlePixel(vt.menuTabId, bg.dt.DropToGroup);
+ // } else {
+ // bg.dt.DropToGroup = this.id.substr(8);
+ // }
+ // AppendTabsToGroup({tabsIds: DragAndDrop.tabsIds, groupId: bg.dt.DropToGroup, SwitchTabIfHasActive: true, insertAfter: true, RemoveClass: "selected", moveTabs: true});
+ // });
+
+
+
}
\ No newline at end of file
diff --git a/scripts/refresh.js b/scripts/refresh.js
new file mode 100644
index 0000000..c909a01
--- /dev/null
+++ b/scripts/refresh.js
@@ -0,0 +1,177 @@
+// 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/
+
+// ********** REFRESH GUI ***************
+
+function SetTRefreshEvents() {
+ $(window).on("resize", function(event) {
+ RefreshGUI();
+ });
+
+ // click on media icon
+ $(document).on("mousedown", ".tab_mediaicon", function(event) {
+ event.stopPropagation();
+ if (event.button == 0 && $(this).parent().parent().is(".audible, .muted")) {
+ chrome.tabs.get(parseInt(this.parentNode.parentNode.id), function(tab) {
+ if (tab) {
+ chrome.tabs.update(tab.id, {muted:!tab.mutedInfo.muted});
+ }
+ });
+ }
+ });
+}
+
+function RefreshGUI() {
+ if ($("#toolbar").children().length > 0) {
+ $("#toolbar").css({ "height": "", "width": "", "display": "", "padding": "", "border": "" });
+ if ($(".button").is(".on")) {
+ $("#toolbar").css({ "height": 53 });
+ } else {
+ $("#toolbar").css({ "height": 26 });
+ }
+ } else {
+ $("#toolbar").css({ "height": 0, "width": "0px", "display": "none", "padding": "0", "border": "none" });
+ }
+
+ if ($("#pin_list").children().length > 0) {
+ $("#pin_list").css({ "top": $("#toolbar")[0].getBoundingClientRect().height, "height": "", "width":"", "display": "", "padding": "", "border": "" });
+ } else {
+ $("#pin_list").css({ "height": "0px", "width": "0px", "display": "none", "padding": "0", "border": "none" });
+ }
+
+ $("#toolbar_groups").css({ "top": $("#toolbar").outerHeight() + $("#pin_list")[0].getBoundingClientRect().height, "height": $(window).height() - $("#toolbar").outerHeight() - $("#pin_list")[0].getBoundingClientRect().height});
+
+ $(".group_title").each(function(){
+ $(this)[0].innerText = (bggroups[(this.id).substr(4)] ? bggroups[(this.id).substr(4)].name : caption_noname_group) + " (" + $("#" + (this.id).substr(4) ).children().length + ")";
+ });
+ $("#_gtetab_list")[0].innerText = caption_ungrouped_group + " (" + $("#tab_list").children().length + ")";
+
+ $(".group_button").each(function(){
+ $(this).css({ "height": $(this).children(0).innerWidth() });
+ });
+
+ $("#groups").css({ "top": $("#toolbar")[0].getBoundingClientRect().height + $("#pin_list")[0].getBoundingClientRect().height, "left": $("#toolbar_groups").outerWidth(), "height": $(window).height() - $("#pin_list")[0].getBoundingClientRect().height - $("#toolbar").outerHeight(), "width": $(window).width() - $("#toolbar_groups").outerWidth() });
+}
+
+// set discarded class
+function RefreshDiscarded(tabId) {
+ if ($("#" + tabId).length > 0) {
+ chrome.tabs.get(parseInt(tabId), function(tab) {
+ if (tab) {
+ if (tab.discarded) {
+ $("#" + tabId).addClass("discarded");
+ } else {
+ $("#" + tabId).removeClass("discarded");
+ }
+ }
+ });
+ }
+}
+
+// set discarded class
+function SetAttentionIcon(tabId) {
+ if ($("#" + tabId).length > 0) {
+ $("#" + tabId).addClass("attention");
+ }
+}
+
+// change media icon
+function RefreshMediaIcon(tabId) {
+ if ($("#" + tabId).length > 0) {
+ chrome.tabs.get(parseInt(tabId), function(tab) {
+ if (tab) {
+ if (tab.mutedInfo.muted) {
+ $("#" + tabId).removeClass("audible").addClass("muted");
+ }
+ if (!tab.mutedInfo.muted && tab.audible) {
+ $("#" + tabId).removeClass("muted").addClass("audible");
+ }
+ if (!tab.mutedInfo.muted && !tab.audible) {
+ $("#" + tabId).removeClass("audible").removeClass("muted");
+ }
+ }
+ });
+ }
+}
+
+
+// Vivaldi does not have changeInfo.audible listener, this is my own implementation, hopefully this will not affect performance too much
+function VivaldiRefreshMediaIcons() {
+ chrome.tabs.query({currentWindow: true}, function(tabs) {
+ $(".audible, .muted").removeClass("audible").removeClass("muted");
+ let tc = tabs.length;
+ for (var ti = 0; ti < tc; ti++) {
+ if (tabs[ti].audible) {
+ $("#" + tabs[ti].id).addClass("audible");
+ }
+ if (tabs[ti].mutedInfo.muted) {
+ $("#" + tabs[ti].id).addClass("muted");
+ }
+ }
+ });
+ setTimeout(function() {
+ VivaldiRefreshMediaIcons();
+ }, 1400);
+}
+
+
+function GetFaviconAndTitle(tabId) {
+ if ($("#" + tabId)[0]) {
+ chrome.tabs.get(parseInt(tabId), function(tab) {
+ if (tab){
+ var title = tab.title ? tab.title : tab.url;
+ if (tab.status == "complete") {
+ $("#" + tabId).removeClass("loading");
+ // change title
+ $("#tab_title" + tab.id)[0].textContent = title;
+ $("#tab_header" + tab.id).attr("title", title);
+
+ // compatibility with various Tab suspender extensions
+ if (tab.favIconUrl != undefined && tab.favIconUrl.match("data:image/png;base64") != null) {
+ $("#tab_header" + tab.id).css({ "background-image": "url(" + tab.favIconUrl + ")" });
+ } else {
+ // case for internal pages, favicons don't have access, but can be loaded from url
+ if (tab.url.match("opera://|vivaldi://|browser://|chrome://|chrome-extension://|about:") != null) {
+ $("#tab_header" + tab.id).css({ "background-image": "url(chrome://favicon/" + tab.url + ")" });
+ } else {
+ // change favicon
+ var img = new Image();
+ img.src = tab.favIconUrl;
+ img.onload = function() {
+ $("#tab_header" + tab.id).css({ "background-image": "url(" + tab.favIconUrl + ")" });
+ };
+ img.onerror = function() {
+ $("#tab_header" + tab.id).css({ "background-image": "url(chrome://favicon/" + tab.url + ")" });
+ }
+ }
+ }
+ }
+ if (tab.status == "loading") {
+ $("#tab_header" + tab.id).css({ "background-image": "" });
+ $("#" + tabId).addClass("loading");
+ title = tab.title ? tab.title : caption_loading;
+ $("#tab_title" + tab.id)[0].textContent = title;
+ $("#tab_header" + tab.id).attr("title", title);
+ setTimeout(function() {
+ if ($("#" + tabId)[0]) GetFaviconAndTitle(tabId);
+ }, 1000);
+ }
+ }
+ });
+ }
+}
+
+// refresh open closed trees states
+function RefreshExpandStates() {
+ $(".children").each(function() {
+ if ($(this).children().length > 0) {
+ $(this).parent().removeClass("n");
+ if ($(this).parent().is(":not(.o, .c)")) {
+ $(this).parent().addClass("o");
+ }
+ } else {
+ $(this).parent().removeClass("o").removeClass("c").addClass("n");
+ }
+ });
+}
\ No newline at end of file
diff --git a/scripts/tabs.js b/scripts/tabs.js
index 0b61728..8c66843 100644
--- a/scripts/tabs.js
+++ b/scripts/tabs.js
@@ -1,319 +1,509 @@
+// Copyright (c) 2017 kroppy. All rights reserved.
+// Use of this source code is governed by a Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) license
+// that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/
+
// ********** TABS FUNCTIONS ***************
-function UpdateData(){
- setTimeout(function(){
- // changed it from 1 to 2 if there are some more changes queued, just in case if something did not catch in the first loop
- if (schedule_update_data > 1){
- schedule_update_data = 2;
- }
- if (schedule_update_data > 0){
- $(".pin").each(function(){
- if (bg.tabs[this.id]){
- bg.tabs[this.id].p = "pin_list";
- bg.tabs[this.id].n = $(this).index();
- bg.tabs[this.id].o = "n";
- }
- });
- $(".tab").each(function(){
- if (bg.tabs[this.id]){
- bg.tabs[this.id].n = $(this).index();
- if ($(this).parent().parent()[0].id){
- bg.tabs[this.id].p = $(this).parent().parent()[0].id;
- } else {
- bg.tabs[this.id].p = "tab_list";
+async function UpdateData() {
+ setTimeout(function() {
+ if (schedule_update_data > 1) {schedule_update_data = 1;}
+ if (schedule_update_data > 0) {
+ $(".pin").each(function() {
+ chrome.runtime.sendMessage({
+ command: "update_tab",
+ tabId: parseInt(this.id),
+ tab: {
+ parent: "pin_list",
+ index: $(this).index(),
+ expand: "n"
}
- if ($(this).is(".n")){
- bg.tabs[this.id].o = "n";
- } else {
- if ($(this).is(".c")){
- bg.tabs[this.id].o = "c";
- } else {
- bg.tabs[this.id].o = "o";
- }
- }
- }
+ });
+ });
+ $(".tab").each(function() {
+ chrome.runtime.sendMessage({
+ command: "update_tab",
+ tabId: parseInt(this.id),
+ tab: {
+ parent: $(this).parent(".group")[0] ? $(this).parent()[0].id : $(this).parent().parent(".tab, .folder")[0].id,
+ index: $(this).index(),
+ expand: ($(this).is(".n") ? "n" : ($(this).is(".c") ? "c" : "o"))
+ }
+ });
});
- bg.schedule_save++;
schedule_update_data--;
- } else {
}
UpdateData();
- },2000);
+ },1000);
}
-function AppendTab(p){
- if ($("#"+p.tab.id).length > 0){
- GetFaviconAndTitle(p.tab.id);
+function RearrangeBrowserTabsCheck() {
+ setTimeout(function() {
+ RearrangeBrowserTabsCheck();
+ if (opt.syncro_tabbar_tabs_order) {
+ if (schedule_rearrange_tabs > 1) {schedule_rearrange_tabs = 1;}
+ if (schedule_rearrange_tabs > 0) {
+ let tabIds = $(".pin, .tab").map(function(){return parseInt(this.id);}).toArray();
+ RearrangeBrowserTabs(tabIds, tabIds.length-1);
+ schedule_rearrange_tabs--;
+ }
+ }
+ },1000);
+}
+
+async function RearrangeBrowserTabs(tabIds, tabIndex) {
+ if (tabIndex > 0){
+ chrome.tabs.get(tabIds[tabIndex], function(tab) {
+ if (tab && tabIndex != tab.index) {
+ chrome.tabs.move(tabIds[tabIndex], {index: tabIndex});
+ }
+ RearrangeBrowserTabs( tabIds, (tabIndex-1) );
+ });
+ }
+}
+
+function RearrangeTreeTabs(tabs, bgtabs, first_run) {
+ tabs.forEach(function(Tab) {
+ if (bgtabs[Tab.id] && $("#"+Tab.id)[0] && $("#"+Tab.id).parent().children().eq(bgtabs[Tab.id].index)[0]) {
+ if ($("#"+Tab.id).index() > bgtabs[Tab.id].index) {
+ $("#"+Tab.id).insertBefore($("#"+Tab.id).parent().children().eq(bgtabs[Tab.id].index));
+ } else {
+ $("#"+Tab.id).insertAfter($("#"+Tab.id).parent().children().eq(bgtabs[Tab.id].index));
+ }
+ }
+ if (bgtabs[Tab.id] && $("#"+Tab.id).index() != bgtabs[Tab.id].index && first_run) {
+ RearrangeTreeTabs(tabs, bgtabs, false);
+ }
+ });
+}
+
+// param - tuple object with paramenters: param.tab - tab object, param.ParentId - Parent tabId, param.InsertAfterId - insert tab after this tabId (on same level),
+// param.Append - if true Appends tab at the end of tree if false or prepends
+function AppendTab(param) {
+ if ($("#"+param.tab.id).length > 0) {
+ GetFaviconAndTitle(param.tab.id);
return;
}
- var div_tab = document.createElement("div");
- div_tab.id = p.tab.id;
- div_tab.className = p.tab.pinned ? "pin" : "tab n";
- div_tab.innerHTML =
- "
"+
- "
"+
- "
"+
- "
"+
- ""+
- "
";
-
+ var ClassList = param.tab.pinned ? "pin" : "tab n";
+ if (param.tab.discarded) {
+ ClassList = ClassList + " discarded";
+ }
+ if (param.AdditionalClass) {
+ ClassList = ClassList +" "+ param.AdditionalClass;
+ }
+
+ var tb = document.createElement("div"); tb.className = ClassList; tb.id = param.tab.id; // TAB
+ var dc = document.createElement("div"); dc.className = "drop_target drag_enter_center"; dc.id = "dc"+param.tab.id; tb.appendChild(dc); // DROP TARGET CENTER
+ var dt = document.createElement("div"); dt.className = "drop_target drag_entered_top"; dt.id = "du"+param.tab.id; tb.appendChild(dt); // DROP TARGET TOP
+ var db = document.createElement("div"); db.className = "drop_target drag_entered_bottom"; db.id = "dd"+param.tab.id; tb.appendChild(db); // DROP TARGET BOTTOM
+ var th = document.createElement("div"); th.className = opt.always_show_close ? "tab_header close_show" : "tab_header"; th.id = "tab_header"+param.tab.id; th.draggable = true; tb.appendChild(th); // HEADER
+ var ex = document.createElement("div"); ex.className = "expand"; ex.id = "exp"+param.tab.id; th.appendChild(ex); // EXPAND ARROW
+ var tt = document.createElement("div"); tt.className = "tab_title"; tt.id = "tab_title"+param.tab.id; th.appendChild(tt); // TITLE
- if (($("#"+p.InsertAfterId).is(".pin") && p.tab.pinned) || ($("#"+p.InsertAfterId).is(".tab") && !p.tab.pinned)){
- $("#"+p.InsertAfterId).parent()[0].append(div_tab);
- $("#"+p.tab.id).insertAfter($("#"+p.InsertAfterId));
- p.ParentId = undefined;
+ if (!opt.never_show_close) {
+ var cl = document.createElement("div"); cl.className = "close"; cl.id = "close"+param.tab.id; th.appendChild(cl); // CLOSE BUTTON
+ var ci = document.createElement("div"); ci.className = "close_img"; ci.id = "close_img"+param.tab.id; cl.appendChild(ci);
+ }
+
+ var mi = document.createElement("div"); mi.className = "tab_mediaicon"; mi.id = "tab_mediaicon"+param.tab.id; th.appendChild(mi);
+ var ch = document.createElement("div"); ch.className = "children"; ch.id = "ch"+param.tab.id; tb.appendChild(ch);
+
+ if (param.tab.pinned) {
+ param.ParentId = "pin_list";
} else {
- p.InsertAfterId = undefined;
+ if (param.ParentId == undefined || $("#"+param.ParentId).is(".pin, #pin_list") || $("#"+param.ParentId).length == 0) {
+ param.ParentId = active_group;
+ } else {
+ if($("#"+param.ParentId).is(".tab")) {
+ if ($("#ch"+param.ParentId).children().length == 0) {
+ $("#"+param.ParentId).addClass("o").removeClass("n").removeClass("c");
+ }
+
+ param.ParentId = "ch"+param.ParentId;
+ }
+ }
+ }
+
+ if (param.Append) {
+ $("#"+param.ParentId).append(tb);
}
-
- if ($("#"+p.ParentId).length > 0 && $("#"+p.ParentId).is(".tab") && !p.tab.pinned){
- if ($("#ch"+p.ParentId).children().length == 0){
- $("#"+p.ParentId).addClass("o").removeClass("n").removeClass("c");
- }
- if (p.Append){
- $("#ch"+p.ParentId).append(div_tab);
- }
- if (!p.Append){
- $("#ch"+p.ParentId).prepend(div_tab);
- }
- } else {
- p.ParentId = undefined;
+ if (!param.Append) {
+ $("#"+param.ParentId).prepend(tb);
}
-
- if (p.InsertAfterId == undefined && p.ParentId == undefined){
- if (p.Append){
- $(p.tab.pinned ? "#pin_list" : "#tab_list").append(div_tab);
- }
- if (!p.Append){
- $(p.tab.pinned ? "#pin_list" : "#tab_list").prepend(div_tab);
+
+ if (param.InsertBeforeId != undefined && $("#"+param.InsertBeforeId)[0]) {
+ if ((param.tab.pinned && $("#"+param.InsertBeforeId).is(".pin")) || (!param.tab.pinned && $("#"+param.InsertBeforeId).is(".tab"))) {
+ $("#"+param.tab.id).insertBefore($("#"+param.InsertBeforeId));
}
}
-
-
- if (bg.opt.always_show_close){
- $("#tab_header"+p.tab.id).addClass("close_show");
- }
- GetFaviconAndTitle(p.tab.id);
- RefreshMediaIcon(p.tab.id);
-
- if (p.tab.discarded){
- $("#"+p.tab.id).addClass("discarded");
+ if (param.InsertAfterId != undefined && $("#"+param.InsertAfterId)[0]) {
+ if ((param.tab.pinned && $("#"+param.InsertAfterId).is(".pin")) || (!param.tab.pinned && $("#"+param.InsertAfterId).is(".tab"))) {
+ $("#"+param.tab.id).insertAfter($("#"+param.InsertAfterId));
+ }
}
- if (p.tab.active){
- SetActiveTab(p.tab.id);
+
+ GetFaviconAndTitle(param.tab.id);
+ RefreshMediaIcon(param.tab.id);
+
+ if (param.tab.active && param.SkipSetActive == undefined) {
+ SetActiveTab(param.tab.id);
+ }
+
+ if (param.Scroll) {
+ ScrollToTab(param.tab.id);
}
}
-function RemoveTabFromList(tabId){
- if ($("#"+tabId).length > 0){
+function RemoveTabFromList(tabId) {
+ if ($("#"+tabId)[0]) {
$("#"+tabId).remove();
}
}
-function SetTabClass(p){
- if (p.pin){
- $("#pin_list").append($("#"+p.id));
+// param - tuple object with paramenters: param.pin - true for pinned, param.id - tabId
+function SetTabClass(param) {
+ if (param.pin) {
+ $("#pin_list").append($("#"+param.id));
// flatten out children
- if ($("#ch"+p.id).children().length > 0){
- $($("#"+p.id).children().find(".pin, .tab").get().reverse()).each(function(){
+ if ($("#ch"+param.id).children().length > 0) {
+ $($("#"+param.id).children().find(".pin, .tab").get().reverse()).each(function() {
$(this).removeClass("tab").removeClass("n").removeClass("o").removeClass("c").addClass("pin");
- $(this).insertAfter($("#"+p.id));
+ $(this).insertAfter($("#"+param.id));
chrome.tabs.update(parseInt(this.id), {pinned: true});
});
}
- $("#"+p.id).removeClass("tab").removeClass("n").removeClass("o").removeClass("c").addClass("pin");
+ $("#"+param.id).removeClass("tab").removeClass("n").removeClass("o").removeClass("c").addClass("pin");
} else {
- $("#tab_list").prepend($("#"+p.id));
-
- $("#"+p.id).removeClass("pin").addClass("tab");
+ $("#"+active_group).prepend($("#"+param.id));
+ $("#"+param.id).removeClass("pin").removeClass("attention").addClass("tab");
RefreshExpandStates();
}
- chrome.tabs.update(parseInt(p.id), {pinned: p.pin});
+ chrome.tabs.update(parseInt(param.id), {pinned: param.pin});
RefreshGUI();
}
-function SetActiveTab(tabId){
- if ($("#"+tabId).length > 0){
- $(".active").removeClass("active").removeClass("selected");
- $(".pin, .tab").removeClass("active").removeClass("selected").removeClass("frozen").removeClass("temporary").removeClass("tab_header_hover");
+function SetActiveTab(tabId) {
+ if ($("#"+tabId).length > 0) {
+ $(".active:visible").removeClass("active").removeClass("selected");
+ $(".pin, .tab:visible").removeClass("active").removeClass("selected").removeClass("selected_frozen").removeClass("selected_temporarly").removeClass("tab_header_hover");
$(".highlighted_drop_target").removeClass("highlighted_drop_target");
- $("#"+tabId).addClass("active").addClass("selected");
+ $("#"+tabId).removeClass("attention").addClass("active")/* .addClass("selected") */;
ScrollToTab(tabId);
+ SetActiveTabInActiveGroup(tabId);
}
}
-function ScrollToTab(tabId){
- if ($("#"+tabId).length == 0){
+function ScrollToTab(tabId) {
+ if ($("#"+tabId).length == 0) {
return false;
}
- if ($("#"+tabId).is(":not(:visible)")){
+ if ($("#"+tabId).is(":not(:visible)")) {
$("#"+tabId).parents(".tab").removeClass("c").addClass("o");
}
-
- if ($("#"+tabId).is(".pin")){
- if ($("#"+tabId).position().left+$("#"+tabId).outerWidth() > $("#pin_list").innerWidth()){
+ if ($("#"+tabId).is(".pin")) {
+ if ($("#"+tabId).position().left+$("#"+tabId).outerWidth() > $("#pin_list").innerWidth()) {
$("#pin_list").scrollLeft($("#pin_list").scrollLeft()+$("#"+tabId).position().left+$("#"+tabId).outerWidth()-$("#pin_list").innerWidth());
} else {
- if ($("#"+tabId).position().left < 0){
+ if ($("#"+tabId).position().left < 0) {
$("#pin_list").scrollLeft($("#pin_list").scrollLeft()+$("#"+tabId).position().left);
}
}
}
- if ($("#"+tabId).is(".tab")){
- if ($("#"+tabId).offset().top - $("#tab_list").offset().top < 0){
- $("#tab_list").scrollTop($("#tab_list").scrollTop() + $("#"+tabId).offset().top - $("#tab_list").offset().top);
+ if ($("#"+tabId).is(".tab")) {
+ if ($("#"+tabId).offset().top - $("#"+active_group).offset().top < 0) {
+ $("#"+active_group).scrollTop($("#"+active_group).scrollTop() + $("#"+tabId).offset().top - $("#"+active_group).offset().top);
} else {
- if ($("#"+tabId).offset().top - $("#tab_list").offset().top > $("#tab_list").innerHeight() - $(".tab_header").outerHeight()){
- $("#tab_list").scrollTop($("#tab_list").scrollTop() + $("#"+tabId).offset().top - $("#tab_list").offset().top - $("#tab_list").innerHeight() + $(".tab_header").outerHeight() + 4);
+ if ($("#"+tabId).offset().top - $("#"+active_group).offset().top > $("#"+active_group).innerHeight() - $(".tab_header").outerHeight()) {
+ $("#"+active_group).scrollTop($("#"+active_group).scrollTop() + $("#"+tabId).offset().top - $("#"+active_group).offset().top - $("#"+active_group).innerHeight() + $(".tab_header").outerHeight() + 4);
}
}
}
}
-function DetachTabs(tabsIds){
- chrome.windows.get(CurrentWindowId, {populate : true}, function(window){
- if (window.tabs.length == 1){
+function DetachTabs(tabsIds) {
+ chrome.windows.get(CurrentWindowId, {populate : true}, function(window) {
+ if (window.tabs.length == 1) {
return;
}
- chrome.windows.create({state:window.state}, function(new_window){
- chrome.tabs.move(tabsIds[0], {windowId: new_window.id, index:-1});
- chrome.tabs.remove(new_window.tabs[0].id, null);
- for (var i = 1; i < tabsIds.length; i++){
- chrome.tabs.move(tabsIds[i], {windowId: new_window.id, index:-1});
- }
+ chrome.windows.create({tabId: tabsIds[0], state:window.state}, function(new_window) {
+ (tabsIds).forEach(function(tabId) {
+ chrome.tabs.move(tabId, {windowId: new_window.id, index:-1});
+ });
})
});
}
// find and select tabs
-function FindTab(input){
+function FindTab(input) {
$(".filtered").removeClass("filtered").removeClass("selected");
$(".highlighted_search").removeClass("highlighted_search");
- if (input.length == 0){
+ if (input.length == 0) {
$("#filter_box")[0].value = "";
+ $("#button_filter_clear").css({"opacity": "0"}).attr("title", "");
return;
+ } else {
+ $("#button_filter_clear").css({"opacity": "1"});
+ $("#button_filter_clear").attr("title", caption_clear_filter);
}
SearchIndex = 0;
- chrome.tabs.query({windowId: CurrentWindowId, pinned: false}, function(tabs){
- tabs.forEach(function(Tab){
- if (bg.opt_toolbar.filter_type == "url" && Tab.url.toLowerCase().match(input.toLowerCase())){
+ chrome.tabs.query({windowId: CurrentWindowId, pinned: false}, function(tabs) {
+ tabs.forEach(function(Tab) {
+ if ($("#button_filter_type").is(".url") && Tab.url.toLowerCase().match(input.toLowerCase())) {
$("#"+Tab.id).addClass("filtered").addClass("selected");
}
- if (bg.opt_toolbar.filter_type == "title" && Tab.title.toLowerCase().match(input.toLowerCase())){
+ if ($("#button_filter_type").is(".title") && Tab.title.toLowerCase().match(input.toLowerCase())) {
$("#"+Tab.id).addClass("filtered").addClass("selected");
}
});
});
}
-function CloseTabs(tabsIds){
+function CloseTabs(tabsIds) {
tabsIds.forEach(function(tabId) {
- if ($("#"+tabId).is(".pin") && bg.opt.allow_pin_close){
+ if ($("#"+tabId).is(".pin") && opt.allow_pin_close) {
$("#"+tabId).remove();
chrome.tabs.update(tabId, {pinned: false});
}
- if ($("#"+tabId).is(".tab")){
+ if ($("#"+tabId).is(".tab")) {
$("#"+tabId).remove();
}
});
- setTimeout(function(){
+ setTimeout(function() {
chrome.tabs.remove(tabsIds, null);
},100);
}
-function DiscardTabs(tabsIds){
+function DiscardTabs(tabsIds) {
var delay = 400;
- if ($("#"+tabsIds[0]).is(".discarded")){
+ if ($("#"+tabsIds[0]).is(".discarded")) {
delay = 5;
} else {
chrome.tabs.discard(tabsIds[0]);
}
tabsIds.splice(0, 1);
- if (tabsIds.length > 0){
- setTimeout(function(){
+ if (tabsIds.length > 0) {
+ setTimeout(function() {
DiscardTabs(tabsIds);
},delay);
}
}
-function ActivateNextTab(){
- if ($(".active").is(".pin")){
- if ($(".active").next()[0]){
- chrome.tabs.update(parseInt($(".active").next()[0].id), { active: true });
+function ActivateNextTab() {
+ if ($(".pin.active:visible")[0]) {
+ if ($(".pin.active").next(".pin")[0]) {
+ chrome.tabs.update(parseInt($(".pin.active").next(".pin")[0].id), { active: true });
}
}
- if ($(".active").is(".tab")){
- if ($(".active").children().last().children()[0]){
- chrome.tabs.update(parseInt($(".active").children().last().children()[0].id), { active: true });
+ if ($(".tab.active:visible")[0]) {
+ if ($(".active:visible").children().last().children(".tab")[0]) {
+ chrome.tabs.update(parseInt($(".active:visible").children().last().children(".tab")[0].id), { active: true });
} else {
- if ($(".active").next()[0]){
- chrome.tabs.update(parseInt($(".active").next()[0].id), { active: true });
+ if ($(".active:visible").next(".tab")[0]) {
+ chrome.tabs.update(parseInt($(".active:visible").next(".tab")[0].id), { active: true });
} else {
- if ($(".active").parent().parent().next().is(".tab")){
- chrome.tabs.update(parseInt($(".active").parent().parent().next()[0].id), { active: true });
+ if ($(".active:visible").parent().parent().next(".tab")[0]) {
+ chrome.tabs.update(parseInt($(".active:visible").parent().parent().next(".tab")[0].id), { active: true });
} else {
- if ($(".active").parents(".tab").eq(-2).next().is(".tab")){
- chrome.tabs.update(parseInt($(".active").parents(".tab").eq(-2).next()[0].id), { active: true });
+ if ($(".active:visible").parents(".tab").last().next(".tab")[0]) {
+ chrome.tabs.update(parseInt($(".active:visible").parents(".tab").last().next(".tab")[0].id), { active: true });
}
}
-
-
}
}
}
}
-function ActivatePrevTab(){
- if ($(".active").is(".pin")){
- if ($(".active").prev()[0]){
- chrome.tabs.update(parseInt($(".active").prev()[0].id), { active: true });
+function ActivatePrevTab() {
+ if ($(".pin.active")[0]) {
+ if ($(".pin.active").prev(".pin")[0]) {
+ chrome.tabs.update(parseInt($(".pin.active").prev(".pin")[0].id), { active: true });
}
}
- if ($(".active").is(".tab")){
- if ($(".active").prev().find(".tab").length > 0){
- chrome.tabs.update(parseInt($(".active").prev().find(".tab").last()[0].id), { active: true });
+ if ($(".tab.active:visible")[0]) {
+ if ($(".active:visible").prev().find(".tab").length > 0) {
+ chrome.tabs.update(parseInt($(".active:visible").prev().find(".tab").last()[0].id), { active: true });
} else {
- if ($(".active").prev()[0]){
- chrome.tabs.update(parseInt($(".active").prev()[0].id), { active: true });
+ if ($(".active:visible").prev(".tab")[0]) {
+ chrome.tabs.update(parseInt($(".active:visible").prev(".tab")[0].id), { active: true });
} else {
- if ($(".active").parent().is(".children")){
- chrome.tabs.update(parseInt($(".active").parent().parent()[0].id), { active: true });
+ if ($(".tab.active:visible").parent().is(".children") && $(".tab.active:visible").parent().parent(".tab")[0]) {
+ chrome.tabs.update(parseInt($(".tab.active:visible").parent().parent(".tab")[0].id), { active: true });
}
}
}
}
-
}
-function DropTargetsSendToFront(){
- if (DropTargetsInFront == false){
+function DropTargetsSendToFront() {
+ if (DropTargetsInFront == false) {
$(".drop_target").show();
DropTargetsInFront = true;
}
}
-function DropTargetsSendToBack(){
- if (DropTargetsInFront){
+function DropTargetsSendToBack() {
+ if (DropTargetsInFront) {
$(".drop_target").hide();
DropTargetsInFront = false;
}
+}
+
+
+// ********** TABS EVENTS ***************
+
+function SetTabEvents() {
+
+ // double click to create tab
+ $(document).on("dblclick", ".group, #pin_list, .tab", function(event) {
+ if (event.button == 0 && $(event.target).is(this)) {
+ if (event.target.id == "pin_list") {
+ chrome.tabs.create({ pinned: true });
+ } else {
+ chrome.tabs.create({});
+ }
+ }
+ });
+
+ $(document).on("mouseenter", ".close", function(event) {
+ $(this).addClass("close_hover");
+ });
+
+ $(document).on("mouseleave", ".close", function(event) {
+ $(".close_hover").removeClass("close_hover");
+ });
+
+ $(document).on("mouseenter", ".expand", function(event) {
+ $(this).addClass("hover");
+ });
+
+ $(document).on("mouseleave", ".expand", function(event) {
+ $(".expand.hover").removeClass("hover");
+ });
+
+ $(document).on("mouseover", ".tab_header", function(event) {
+ $(this).addClass("tab_header_hover");
+
+ if (opt.always_show_close == false) {
+ $(this).addClass("close_show");
+ }
+ });
+
+ $(document).on("mouseleave", ".tab_header", function(event) {
+ $(this).removeClass("tab_header_hover");
+
+ if (opt.always_show_close == false) {
+ $(this).removeClass("close_show");
+ }
+ });
+
+ // EXPAND BOX - EXPAND / COLLAPSE
+ $(document).on("mousedown", ".expand", function(event) {
+ event.stopPropagation();
+ if (event.button == 0) {
+ if ($(this).parent().parent().is(".o")) {
+ $(this).parent().parent().removeClass("o").addClass("c");
+ chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt($(this).parent().parent()[0].id), tab: { expand: "c" } });
+ } else {
+ if ($(this).parent().parent().is(".c")) {
+ $(this).parent().parent().removeClass("c").addClass("o");
+ chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt($(this).parent().parent()[0].id), tab: { expand: "o" } });
+ if (opt.close_other_trees) {
+ $(".o:visible:not(#"+$(this).parent().parent()[0].id+")").removeClass("o").addClass("c");
+ $(this).parents(".tab").each(function() {
+ $(this).removeClass("n").removeClass("c").addClass("o");
+ chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt(this.id), tab: { expand: "o" } });
+ });
+ $(".c").each(function() {
+ chrome.runtime.sendMessage({ command: "update_tab", tabId: parseInt(this.id), tab: { expand: "c" } });
+ });
+ }
+ }
+ }
+ }
+ });
+
+ // SELECT OR CLOSE TAB/PIN
+ $(document).on("mousedown", ".tab, .pin", function(event) {
+ if ($(".menu").is(":visible")) {
+ return;
+ }
+ event.stopPropagation();
+
+ DropTargetsSendToBack();
+ let tabId = parseInt(this.id);
+
+ if (event.button == 0) {
+ // SET SELECTION WITH SHIFT
+ if (event.shiftKey) {
+ $(".pin, .tab:visible").removeClass("selected").removeClass("selected_frozen").removeClass("selected_temporarly");
+ if ($(this).index() >= $(".active:visible").index()) {
+ $(".active:visible").nextUntil($(this), ":visible").add($(".active:visible")).add($(this)).addClass("selected");
+ } else {
+ $(".active:visible").prevUntil($(this), ":visible").add($(".active:visible")).add($(this)).addClass("selected");
+ }
+ }
+
+ // TOGGLE SELECTION WITH CTRL
+ if (event.ctrlKey) {
+ // if ($(".active:visible").is(":not(.selected)")) {
+ // $(".active:visible").addClass("selected");
+ // }
+ $(this).toggleClass("selected");
+ }
+ }
+
+ // CLOSE TAB
+ if (
+ (
+ ($(this).is(".tab") && $(event.target).is(":not(.expand)")) && ((event.button == 1 && opt.close_with_MMB == true)
+ || (event.button == 0 && $(event.target).is(".close, .close_img"))))
+ || ($(this).is(".pin") && event.button == 1 && opt.close_with_MMB == true && opt.allow_pin_close == true)
+ ) {
+ if ($(this).is(".active:visible") && opt.after_closing_active_tab != "browser") {
+ if (opt.after_closing_active_tab == "above") {
+ ActivatePrevTab();
+ }
+ if (opt.after_closing_active_tab == "below") {
+ ActivateNextTab();
+ }
+ }
+
+ // hide tab that will be closed
+ $("#"+tabId).css({ "width": "0px", "height": "0px", "border": "none", "overflow": "hidden" });
+
+ chrome.tabs.update(tabId, {muted:true, pinned: false});
+
+ // repeated what is in chrome events on tab_removed event, to avoid lag
+ if ($(this).is(".tab")) {
+ if (opt.promote_children) {
+ $("#ch"+tabId).children().insertAfter($(this));
+ } else {
+ $(this).find(".tab").each(function() {
+ chrome.tabs.remove(parseInt(this.id));
+ });
+ }
+ }
+
+ // delayed tab removal, so ActivatePrevTab() or ActivateNextTab() will not activate wrong tab
+ setTimeout(function() {
+ if ($("#"+tabId)[0]) chrome.tabs.remove(tabId);
+ }, 1000);
+ }
+ });
+
+ // SINGLE CLICK TO ACTIVATE TAB
+ $(document).on("click", ".tab_header", function(event) {
+ if ($(".menu").is(":visible")) {
+ return;
+ }
+ event.stopPropagation();
+ if (event.button == 0 && !event.shiftKey && !event.ctrlKey && $(event.target).is(":not(.close, .close_img, .expand, .tab_mediaicon)")) {
+ SetActiveTab($(this).parent()[0].id);
+ chrome.tabs.update(parseInt($(this).parent()[0].id), { active: true });
+ }
+ });
}
\ No newline at end of file
diff --git a/scripts/toolbar.js b/scripts/toolbar.js
index cee7551..3b9ff49 100644
--- a/scripts/toolbar.js
+++ b/scripts/toolbar.js
@@ -1,119 +1,199 @@
+// 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/
+
// ********** TOOLBAR ***************
-function SaveToolbarOptions(){
- chrome.runtime.sendMessage({command: "toolbar_options_save"});
+
+
+function RestoreToolbarSearchFilter() {
+ let filter_type = "url";
+ if (localStorage.getItem("filter_type") !== null) {
+ filter_type = localStorage["filter_type"];
+ }
+ if (filter_type == "url") {
+ $("#button_filter_type").addClass("url").removeClass("title");
+ } else {
+ $("#button_filter_type").addClass("title").removeClass("url");
+ }
+}
+
+function RestoreToolbarShelf() {
+ chrome.runtime.sendMessage({command: "get_active_shelf", windowId: CurrentWindowId}, function(response) {
+ $("#filter_box").attr("placeholder", caption_searchbox);
+ $("#filter_box").css({"opacity": 1});
+
+ $(".on").removeClass("on");
+ $(".toolbar_shelf").addClass("hidden");
+ if (response == "search" && $("#button_search").length != 0) {
+ $("#toolbar_search").removeClass("hidden");
+ $("#button_search").addClass("on");
+ }
+ if (response == "tools" && $("#button_tools").length != 0) {
+ $("#toolbar_shelf_tools").removeClass("hidden");
+ $("#button_tools").addClass("on");
+ }
+ if (response == "groups" && $("#button_groups").length != 0) {
+ $("#toolbar_shelf_groups").removeClass("hidden");
+ $("#button_groups").addClass("on");
+ }
+ if (response == "backup" && $("#button_backup").length != 0) {
+ $("#toolbar_shelf_backup").removeClass("hidden");
+ $("#button_backup").addClass("on");
+ }
+ if (response == "folders" && $("#button_folders").length != 0) {
+ $("#toolbar_shelf_folders").removeClass("hidden");
+ $("#button_folders").addClass("on");
+ }
+
+ let bak1 = LoadData("windows_BAK1", []);
+ let bak2 = LoadData("windows_BAK2", []);
+ let bak3 = LoadData("windows_BAK3", []);
+
+ if (bak1.length && $(".button#button_load_bak1")[0]) {
+ $(".button#button_load_bak1").removeClass("disabled");
+ } else {
+ $(".button#button_load_bak1").addClass("disabled");
+ }
+
+ if (bak2.length && $(".button#button_load_bak2")[0]) {
+ $(".button#button_load_bak2").removeClass("disabled");
+ } else {
+ $(".button#button_load_bak2").addClass("disabled");
+ }
+
+ if (bak3.length && $(".button#button_load_bak3")[0]) {
+ $(".button#button_load_bak3").removeClass("disabled");
+ } else {
+ $(".button#button_load_bak3").addClass("disabled");
+ }
+
+ RefreshGUI();
+ });
}
-function SetToolbarEvents(){
+function SetToolbarShelfToggle(click_type) {
// tools and search buttons toggle
- $(document).on("mousedown", "#button_tools, #button_search", function(event){
- if (event.button != 0){
+ $(document).on(click_type, "#button_tools, #button_search, #button_groups, #button_backup, #button_folders", function(event) {
+ if (event.button != 0) {
return;
}
- if ($(this).is(".on")){
- $("#button_tools, #button_search").removeClass("on");
- $("#toolbar_tools, #toolbar_search").addClass("hidden");
- bg.opt_toolbar.active_toolbar_tool = "";
+ if ($(this).is(".on")) {
+ $(".on").removeClass("on");
+ $(".toolbar_shelf").addClass("hidden");
+ chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "", windowId: CurrentWindowId});
} else {
- $(this).addClass("on");
- if ($(this).is("#button_tools")){
- $("#button_search").removeClass("on");
- $("#toolbar_search").addClass("hidden");
- $("#toolbar_tools").removeClass("hidden");
- bg.opt_toolbar.active_toolbar_tool = "tools";
- } else {
- $("#button_tools").removeClass("on");
- $("#toolbar_tools").addClass("hidden");
- $("#toolbar_search").removeClass("hidden");
- bg.opt_toolbar.active_toolbar_tool = "search";
+ $(".toolbar_shelf").addClass("hidden");
+ if ($(this).is("#button_tools")) {
+ $("#toolbar_shelf_tools").removeClass("hidden");
+ chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "tools", windowId: CurrentWindowId});
}
+ if ($(this).is("#button_search")) {
+ $("#toolbar_search").removeClass("hidden");
+ chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "search", windowId: CurrentWindowId});
+ }
+ if ($(this).is("#button_groups")) {
+ $("#toolbar_shelf_groups").removeClass("hidden");
+ chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "groups", windowId: CurrentWindowId});
+ }
+ if ($(this).is("#button_backup")) {
+ $("#toolbar_shelf_backup").removeClass("hidden");
+ chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "backup", windowId: CurrentWindowId});
+ }
+ if ($(this).is("#button_folders")) {
+ $("#toolbar_shelf_folders").removeClass("hidden");
+ chrome.runtime.sendMessage({command: "set_active_shelf", active_shelf: "folders", windowId: CurrentWindowId});
+ }
+ $(".button").removeClass("on");
+ $(this).addClass("on");
}
RefreshGUI();
- SaveToolbarOptions();
});
+}
- // go to previous search result
- $(document).on("mousedown", "#filter_search_go_prev", function(event){
- if (event.button != 0){
+function SetToolbarEvents() {
+ // go to previous or next search result
+ $(document).on("mousedown", "#filter_search_go_prev, #filter_search_go_next", function(event) {
+ if (event.button != 0 || $(".tab.filtered").length == 0) {
return;
}
- if (SearchIndex == 0){
- SearchIndex = $(".tab.filtered").length-1;
- } else {
- SearchIndex--;
- }
+
$(".highlighted_search").removeClass("highlighted_search");
- $($(".tab.filtered")[SearchIndex]).addClass("highlighted_search");
- ScrollToTab($(".tab.filtered")[SearchIndex].id);
- });
-
- // go to next search result
- $(document).on("mousedown", "#filter_search_go_next", function(event){
- if (event.button != 0){
- return;
- }
- if (SearchIndex == $(".tab.filtered").length-1){
- SearchIndex = 0;
+ if ($(this).is("#filter_search_go_prev")){
+ if (SearchIndex == 0) {
+ SearchIndex = $(".tab.filtered").length-1;
+ } else {
+ SearchIndex--;
+ }
} else {
- SearchIndex++;
+ if (SearchIndex == $(".tab.filtered").length-1) {
+ SearchIndex = 0;
+ } else {
+ SearchIndex++;
+ }
}
- $(".highlighted_search").removeClass("highlighted_search");
- $($(".tab.filtered")[SearchIndex]).addClass("highlighted_search");
ScrollToTab($(".tab.filtered")[SearchIndex].id);
+ $($(".tab.filtered")[SearchIndex]).addClass("highlighted_search");
});
-
// new tab
- $(document).on("mousedown", "#button_new", function(event){
- if (event.button == 0){
+ $(document).on("mousedown", "#button_new", function(event) {
+ if (event.button == 0) {
chrome.tabs.create({});
}
- if (event.button == 1){
- chrome.tabs.query({windowId: CurrentWindowId, active: true}, function(tabs){
- chrome.tabs.duplicate(tabs[0].id, function(tab){
- setTimeout(function(){
- $("#"+tab.id).insertAfter($(".active")[0]);
- }, 300);
- });
+ if (event.button == 1 && $(".active:visible")[0]) {
+ chrome.tabs.duplicate(parseInt($(".active:visible")[0].id), function(tab) {
+ setTimeout(function() {
+ $("#"+tab.id).insertAfter($(".active:visible")[0]);
+ RefreshExpandStates();
+ schedule_update_data++;
+ }, 100);
});
}
- if (event.button == 2){
- chrome.tabs.query({windowId: CurrentWindowId, active: true}, function(tabs){
- ScrollToTab(tabs[0].id);
- });
+ if (event.button == 2 && $(".active:visible")[0]) {
+ ScrollToTab($(".active:visible")[0].id);
}
});
// pin tab
- $(document).on("mousedown", "#button_pin", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_pin", function(event) {
+ if (event.button != 0) {
return;
}
- $(".selected:visible").each(function(){
+ $(".active:visible, .selected:visible").each(function() {
chrome.tabs.update(parseInt(this.id), { pinned: ($(this).is(".pin") ? false : true) });
});
});
// undo close
- $(document).on("mousedown", "#button_undo", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_undo", function(event) {
+ if (event.button != 0) {
return;
}
- chrome.sessions.getRecentlyClosed( null, function(sessions){
- if (sessions.length > 0){
- chrome.sessions.restore(null, function(){});
+ chrome.sessions.getRecentlyClosed( null, function(sessions) {
+ if (sessions.length > 0) {
+ chrome.sessions.restore(null, function(restored) {
+ // if (browserId == "F") {
+ // if (restored.tab != undefined) {
+ // let t = Promise.resolve(browser.sessions.getTabValue(restored.tab.id, "TTId")).then(function(TTId) {
+ // TODO RESTORE TREE IF POSSIBLE
+ // console.log(TTId);
+ // });
+ // }
+ // }
+ });
}
});
});
// move tab to new window (detach)
- $(document).on("mousedown", "#button_move", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_move", function(event) {
+ if (event.button != 0) {
return;
}
var tabsArr = [];
- $(".selected:visible").each(function(){
+ $(".active:visible, .selected:visible").each(function() {
tabsArr.push(parseInt(this.id));
- if ($("#ch"+this.id).children().length > 0){
- $($("#ch"+this.id).find(".tab")).each(function(){
+ if ($("#ch"+this.id).children().length > 0) {
+ $($("#ch"+this.id).find(".tab")).each(function() {
tabsArr.push(parseInt(this.id));
});
}
@@ -121,104 +201,176 @@ function SetToolbarEvents(){
DetachTabs(tabsArr);
});
// move tab to new window (detach)
- $(document).on("mousedown", "#repeat_search", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#repeat_search", function(event) {
+ if (event.button != 0) {
return;
}
FindTab($("#filter_box")[0].value);
});
// filter on input
- $("#filter_box").on("input", function(){
- if ($("#filter_box")[0].value == ""){
- $("#button_filter_clear").css({"opacity": "0"}).attr("title", "");
- } else {
- $("#button_filter_clear").css({"opacity": "1"});
- $("#button_filter_clear").attr("title", bg.caption_clear_filter);
- }
+ $("#filter_box").on("input", function() {
FindTab($("#filter_box")[0].value);
});
// change filtering type
- $(document).on("mousedown", "#button_filter_type", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_filter_type", function(event) {
+ if (event.button != 0) {
return;
}
$("#button_filter_type").toggleClass("url").toggleClass("title");
- if (bg.opt_toolbar.filter_type == "url"){
- bg.opt_toolbar.filter_type = "title";
- } else {
- bg.opt_toolbar.filter_type = "url";
- }
FindTab($("#filter_box")[0].value);
- SaveToolbarOptions();
+ localStorage["filter_type"] = $(this).is(".url") ? "url" : "title";
});
// clear filter button
- $(document).on("mousedown", "#button_filter_clear", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_filter_clear", function(event) {
+ if (event.button != 0) {
return;
}
$("#button_filter_clear").css({"opacity": "0"}).attr("title", "");
FindTab("");
});
// sort tabs
- $(document).on("mousedown", "#button_sort", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_sort", function(event) {
+ if (event.button != 0) {
return;
}
SortTabs();
});
// bookmarks
- $(document).on("mousedown", "#button_bookmarks", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_bookmarks", function(event) {
+ if (event.button != 0) {
return;
}
chrome.tabs.create({url: "chrome://bookmarks/"});
});
// downloads
- $(document).on("mousedown", "#button_downloads", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_downloads", function(event) {
+ if (event.button != 0) {
return;
}
chrome.tabs.create({url: "chrome://downloads/"});
});
// history
- $(document).on("mousedown", "#button_history", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_history", function(event) {
+ if (event.button != 0) {
return;
}
chrome.tabs.create({url: "chrome://history/"});
});
// extensions
- $(document).on("mousedown", "#button_extensions", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_extensions", function(event) {
+ if (event.button != 0) {
return;
}
chrome.tabs.create({url: "chrome://extensions"});
});
// settings
- $(document).on("mousedown", "#button_settings", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_settings", function(event) {
+ if (event.button != 0) {
return;
}
chrome.tabs.create({url: "chrome://settings/"});
});
// vertical tabs options
- $(document).on("mousedown", "#button_options", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_options", function(event) {
+ if (event.button != 0) {
return;
}
chrome.tabs.create({url: "options.html" });
});
// discard tabs
- $(document).on("mousedown", "#button_discard", function(event){
- if (event.button != 0){
+ $(document).on("mousedown", "#button_discard", function(event) {
+ if (event.button != 0) {
return;
}
- chrome.tabs.query({windowId: CurrentWindowId, pinned: false}, function(tabs){
+ chrome.tabs.query({windowId: CurrentWindowId, pinned: false}, function(tabs) {
var tabsIds = [];
- tabs.forEach(function(Tab){
+ tabs.forEach(function(Tab) {
tabsIds.push(Tab.id);
});
DiscardTabs(tabsIds);
});
});
+
+
+ // new group button
+ $(document).on("mousedown", "#button_new_group", function(event) {
+ if (event.button == 0) {
+ AddNewGroup({});
+ }
+ });
+
+ // new group button
+ $(document).on("mousedown", "#button_remove_group", function(event) {
+ let close_tabs = event.shiftKey;
+ if (event.button == 0) {
+ if (active_group != "tab_list") {
+ GroupRemove(active_group, close_tabs);
+ }
+ }
+ });
+
+ // EDIT GROUP
+ $(document).on("mousedown", "#button_edit_group", function(event) {
+ if (active_group != "tab_list") {
+ ShowGroupEditWindow(active_group);
+ }
+ });
+
+ // import-export group
+ $(document).on("mousedown", "#button_export_group", function(event) {
+ ExportGroup(bggroups[active_group].name+".tt_group");
+ });
+
+ $(document).on("mousedown", "#button_import_group", function(event) {
+ ShowOpenFileDialog("file_import_group", ".tt_group");
+ });
+ $(document).on("change", "#file_import_group", function(event) {
+ ImportGroup();
+ });
+
+
+
+
+ // load backups
+ $(document).on("mousedown", "#button_load_bak1:not(.disabled), #button_load_bak2:not(.disabled), #button_load_bak3:not(.disabled)", function(event) {
+ if (event.button != 0) {
+ return;
+ }
+ let wins = LoadData("windows_BAK"+(this.id).substr(15), []);
+ let tabs = LoadData("tabs_BAK"+(this.id).substr(15), []);
+
+ if (wins.length) {
+ localStorage["windows"] = JSON.stringify(wins);
+ }
+ if (tabs.length) {
+ localStorage["tabs"] = JSON.stringify(tabs);
+ alert("Loaded backup");
+ }
+
+ chrome.runtime.sendMessage({command: "reload"});
+ chrome.runtime.sendMessage({command: "reload_sidebar"});
+ location.reload();
+
+ });
+
+ // import-export backups
+ $(document).on("mousedown", "#button_export_bak", function(event) {
+ ExportTabs("Session.tt_session");
+ });
+
+ $(document).on("mousedown", "#button_import_bak", function(event) {
+ ShowOpenFileDialog("file_import_backup", ".tt_session");
+ });
+ $(document).on("change", "#file_import_backup", function(event) {
+ ImportTabs();
+ });
+
+
+ $(document).on("mousedown", "#button_import_merge_bak", function(event) {
+ ShowOpenFileDialog("file_import_merge_backup", ".tt_session");
+ });
+ $(document).on("change", "#file_import_merge_backup", function(event) {
+ ImportMergeTabs();
+ });
+
}
\ No newline at end of file
diff --git a/sidebar.html b/sidebar.html
index 08e60e2..ee273d6 100644
--- a/sidebar.html
+++ b/sidebar.html
@@ -6,8 +6,6 @@
+
+
+
+
+
+
-
+
+
-
+
+
-
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
diff --git a/sidebar.js b/sidebar.js
index 996a560..c2d225a 100644
--- a/sidebar.js
+++ b/sidebar.js
@@ -1,144 +1,170 @@
-document.addEventListener("DOMContentLoaded", Initialize(), false);
+// 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 Initialize(){
- if (bg.hold){
- setTimeout(function(){ Initialize(); },500);
- chrome.runtime.sendMessage({command: "background_start"});
+document.addEventListener("DOMContentLoaded", Run(), false);
+
+
+
+function Loadi18n() {
+ // toolbar labels
+ $(".button").each(function() {
+ $(this).attr("title", chrome.i18n.getMessage(this.id));
+ });
+
+ // menu labels
+ $(".menu_item").each(function() {
+ $(this).text(chrome.i18n.getMessage(this.id));
+ });
+
+ // edit group dialog labels
+ $(".group_edit_button").each(function() {
+ $(this)[0].textContent = chrome.i18n.getMessage(this.id);
+ });
+}
+function RestorePinListRowSettings() {
+ if (opt.pin_list_multi_row) {
+ $("#pin_list").css({"white-space": "normal", "overflow-x": "hidden"});
} else {
-
- var theme = {
- "ToolbarShow": false,
- "ScrollbarPinList": 4,
- "ScrollbarTabList": 16
- };
-
- if (localStorage.getItem("current_theme") != null && localStorage["theme"+localStorage["current_theme"]] != null){
- theme = JSON.parse(localStorage["theme"+localStorage["current_theme"]]);
-
- $("#toolbar").html(theme.toolbar);
-
- var css_variables = "";
- for (var css_variable in theme.ColorsSet){
- css_variables = css_variables + "--" + css_variable + ":" + theme.ColorsSet[css_variable] + ";";
- }
- for (var css_variable in theme.TabsSizeSet){
- css_variables = css_variables + "--" + css_variable + ":" + theme.TabsSizeSet[css_variable] + ";";
- }
-
- document.styleSheets[0].insertRule("body { "+css_variables+" }", 0);
- }
-
- if (navigator.userAgent.match("Firefox") === null){
- document.styleSheets[0].insertRule("::-webkit-scrollbar { width:"+theme.ScrollbarTabList+"px; height:"+theme.ScrollbarPinList+"px; }", 0);
- } else {
- // I have no idea what is going on in latest build, but why top position for various things is different in firefox?????
- if (theme.TabsSizeSetNumber > 1){
- document.styleSheets[1].insertRule(".tab_header>.tab_title { margin-top: -1.5px; }", document.styleSheets[1].cssRules.length);
- }
- // document.styleSheets[1].insertRule("#toolbar_main { top: 1px; height: 25px; }", document.styleSheets[1].cssRules.length);
- // document.styleSheets[1].insertRule(".button_img { position: relative; top: -1px; left: -1px; }", document.styleSheets[1].cssRules.length);
- }
-
- chrome.tabs.query({currentWindow: true}, function(tabs){
- CurrentWindowId = tabs[0].windowId;
-
-
- if (bg.opt.pin_list_multi_row){
- $("#pin_list").css({"white-space": "normal", "overflow-x": "hidden"});
- }
-
-
- if (theme.ToolbarShow == true){
- if (bg.opt_toolbar.filter_type == "url"){
- $("#button_filter_type").addClass("url");
- } else {
- $("#button_filter_type").addClass("title");
- }
- $(".button").each(function(){
- $(this).attr("title", chrome.i18n.getMessage(this.id));
- });
- $("#filter_box").attr("placeholder", bg.caption_searchbox);
- $("#filter_box").css({"opacity": 1});
-
- $(".on").removeClass("on");
- $("#toolbar_tools, #toolbar_search").removeClass("hidden");
-
- if (bg.opt_toolbar.active_toolbar_tool == ""){
- $("#toolbar_tools, #toolbar_search").addClass("hidden");
- }
- if (bg.opt_toolbar.active_toolbar_tool == "tools" && $("#button_tools").length != 0){
- $("#toolbar_search").addClass("hidden");
- $("#button_tools").addClass("on");
- }
- if (bg.opt_toolbar.active_toolbar_tool == "search" && $("#button_search").length != 0){
- $("#toolbar_tools").addClass("hidden");
- $("#button_search").addClass("on");
- }
- $("#toolbar_separator").remove();
- $("#toolbar_unused_buttons").remove();
- } else {
- $("#toolbar").children().remove();
- }
-
-
- tabs.forEach(function(Tab){
- AppendTab({
- tab: Tab,
- Append: true
+ $("#pin_list").css({"white-space": "", "overflow-x": ""});
+ }
+ RefreshGUI();
+}
+
+function Run() {
+ LoadPreferences();
+ chrome.windows.getCurrent({populate: false}, function(window) {
+ CurrentWindowId = window.id;
+ chrome.runtime.sendMessage({command: "is_bg_busy"}, function(response) {
+ hold = response;
+ chrome.runtime.sendMessage({command: "get_browser_tabs"}, function(response) {
+ bgtabs = Object.assign({}, response);
+ chrome.runtime.sendMessage({command: "get_groups", windowId: CurrentWindowId}, function(response) {
+ bggroups = Object.assign({}, response);
+ setTimeout(function() {
+ if (opt != undefined && browserId != undefined && bgtabs != undefined && bggroups != undefined && hold == false) {
+ Initialize();
+ } else {
+ Run();
+ }
+ },200);
});
});
-
- tabs.forEach(function(Tab){
- if (bg.tabs[Tab.id] && !Tab.pinned){
- $("#"+Tab.id).addClass(bg.tabs[Tab.id].o);
- if ($("#"+bg.tabs[Tab.id].p).length > 0 && $("#"+bg.tabs[Tab.id].p).is(".tab") && $("#"+Tab.id).find( $("#ch"+bg.tabs[Tab.id].p)).length == 0){
- $("#ch"+bg.tabs[Tab.id].p).append($("#"+Tab.id));
- }
- }
- });
-
- tabs.forEach(function(Tab){
- if ($("#"+Tab.id)[0] && $("#"+Tab.id).parent().children().eq(bg.tabs[Tab.id].n)[0]){
- if ($("#"+Tab.id).index() > bg.tabs[Tab.id].n){
- $("#"+Tab.id).insertBefore($("#"+Tab.id).parent().children().eq(bg.tabs[Tab.id].n));
- } else {
- $("#"+Tab.id).insertAfter($("#"+Tab.id).parent().children().eq(bg.tabs[Tab.id].n));
- }
- }
- });
- tabs.forEach(function(Tab){
- if ($("#"+Tab.id)[0] && $("#"+Tab.id).parent().children().eq(bg.tabs[Tab.id].n)[0]){
- if ($("#"+Tab.id).index() < bg.tabs[Tab.id].n){
- $("#"+Tab.id).insertAfter($("#"+Tab.id).parent().children().eq(bg.tabs[Tab.id].n));
- }
- }
- });
- delete theme;
-
- SetIOEvents();
- SetToolbarEvents();
- SetTRefreshEvents();
- SetTabEvents();
- SetMenu();
- RefreshGUI();
- RefreshExpandStates();
- UpdateData();
-
- // Scroll to active tab
- setTimeout(function(){ ScrollToTab($(".active")[0].id); },100);
-
-
-
- if (navigator.userAgent.match("Vivaldi") !== null){
- VivaldiRefreshMediaIcons();
- }
-
});
+ });
+}
+
+function Initialize() {
+
+ RestoreStateOfGroupsToolbar();
+ var theme = LoadData(("theme"+localStorage["current_theme"]), {"TabsSizeSetNumber": 2, "ToolbarShow": true, "toolbar": DefaultToolbar});
+
+ if (browserId == "F") {
+ // I have no idea what is going on in latest build, but why top position for various things is different in firefox?????
+ if (theme.TabsSizeSetNumber > 1) {
+ document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: -1px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
+ }
}
+ ApplySizeSet(theme["TabsSizeSetNumber"]);
+ ApplyColorsSet(theme["ColorsSet"]);
+
+ AppendAllGroups();
+
+ chrome.tabs.query({currentWindow: true}, function(tabs) {
+
+// AddNewFolder();
+// AddNewFolder();
+// AddNewFolder();
+// AddNewFolder();
+
+ if (theme.ToolbarShow) {
+ if (theme.theme_version == DefaultTheme.theme_version) {
+ $("#toolbar").html(theme.toolbar);
+ } else {
+ $("#toolbar").html(DefaultToolbar);
+ }
+ }
+
+ let tc = tabs.length;
+ for (var ti = 0; ti < tc; ti++) {
+ AppendTab({tab: tabs[ti], Append: true, SkipSetActive: true});
+ }
+
+ for (var ti = 0; ti < tc; ti++) {
+ if (bgtabs[tabs[ti].id] && !tabs[ti].pinned && $("#"+bgtabs[tabs[ti].id].parent)[0] && $("#"+bgtabs[tabs[ti].id].parent).is(".group")) {
+ $("#"+bgtabs[tabs[ti].id].parent).append($("#"+tabs[ti].id));
+ }
+ }
+
+ for (var ti = 0; ti < tc; ti++) {
+ if (bgtabs[tabs[ti].id] && !tabs[ti].pinned) {
+ if ($("#"+bgtabs[tabs[ti].id].parent).length > 0 && $("#"+bgtabs[tabs[ti].id].parent).is(".tab") && $("#"+tabs[ti].id).find($("#ch"+bgtabs[tabs[ti].id].parent)).length == 0) {
+ $("#ch"+bgtabs[tabs[ti].id].parent).append($("#"+tabs[ti].id));
+ }
+ }
+ }
+
+ for (var ti = 0; ti < tc; ti++) {
+ if (bgtabs[tabs[ti].id] && !tabs[ti].pinned) {
+ $("#"+tabs[ti].id).addClass(bgtabs[tabs[ti].id].expand);
+ }
+ }
+
+ for (var group in bggroups) {
+ if ($("#"+group+" #"+bggroups[group].activetab)[0]) {
+ $("#"+bggroups[group].activetab).addClass("active");
+ }
+ }
+
+ chrome.runtime.sendMessage({command: "get_active_group", windowId: CurrentWindowId}, function(response) {
+ SetActiveGroup(response, true, true);
+ });
+
+ RearrangeTreeTabs(tabs, bgtabs, true);
+ RefreshExpandStates();
+
+ RestoreToolbarShelf();
+ RestoreToolbarSearchFilter();
+ SetToolbarShelfToggle("mousedown");
+
+ StartChromeListeners();
+ SetIOEvents();
+ SetToolbarEvents();
+ SetTRefreshEvents();
+ SetGroupEvents();
+ SetTabEvents();
+ SetFolderEvents();
+ SetMenu();
+ SetDragAndDropEvents();
+
+ RearrangeBrowserTabsCheck();
+ Loadi18n();
+
+ RestorePinListRowSettings();
+
+ setTimeout(function() {
+ UpdateData();
+ delete bgtabs;
+ delete theme;
+ },5000);
+
+ if ($(".active:visible").length == 0) {
+ chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
+ if (tabs[0]) {
+ SetActiveTab(tabs[0].id);
+ }
+ });
+ }
+
+ if (browserId == "V") {
+ VivaldiRefreshMediaIcons();
+ }
+
+ });
}
-function log(m){
- bg.log(m);
+function log(m) {
+ chrome.runtime.sendMessage({command: "console_log", m: m});
}
\ No newline at end of file
diff --git a/theme/expand_closed.svg b/theme/expand_closed.svg
new file mode 100644
index 0000000..7e6b8e6
--- /dev/null
+++ b/theme/expand_closed.svg
@@ -0,0 +1,94 @@
+
+
+
+
diff --git a/theme/expand_open.svg b/theme/expand_open.svg
new file mode 100644
index 0000000..a3cdf7e
--- /dev/null
+++ b/theme/expand_open.svg
@@ -0,0 +1,68 @@
+
+
+
+
diff --git a/theme/folder_closed.svg b/theme/folder_closed.svg
new file mode 100644
index 0000000..9dc8e1b
--- /dev/null
+++ b/theme/folder_closed.svg
@@ -0,0 +1,94 @@
+
+
+
+
diff --git a/theme/folder_open.svg b/theme/folder_open.svg
new file mode 100644
index 0000000..73fa78a
--- /dev/null
+++ b/theme/folder_open.svg
@@ -0,0 +1,95 @@
+
+
+
+
diff --git a/theme/theme.css b/theme/theme.css
index 9640060..16d72ae 100644
--- a/theme/theme.css
+++ b/theme/theme.css
@@ -1,193 +1,111 @@
-::-webkit-scrollbar-thumb {
- background-color: var(--scrollbar_thumb, #cdcdcd);
+/* SCROLLBARS */
+
+
+.group::-webkit-scrollbar,
+#pin_list::-webkit-scrollbar {
+ height: var(--scrollbar_height);
+ width: var(--scrollbar_width);
}
-::-webkit-scrollbar-thumb:hover {
- background-color: var(--scrollbar_thumb_hover, #a6a6a6);
+.group::-webkit-scrollbar-thumb,
+#pin_list::-webkit-scrollbar-thumb {
+ background-color: var(--scrollbar_thumb);
}
-::-webkit-scrollbar-track {
- background-color: var(--scrollbar_track, #e4e4e4);
+.group::-webkit-scrollbar-thumb:hover,
+#pin_list::-webkit-scrollbar-thumb:hover {
+ background-color: var(--scrollbar_thumb_hover);
}
-body {
- background-color: var(--tab_list_background, #fafafa);
+.group::-webkit-scrollbar-track,
+#pin_list::-webkit-scrollbar-track {
+ background-color: var(--scrollbar_track);
}
-/* DO NOT REPEAT BACKGROUND IMAGES */
+
div {
background-repeat: no-repeat;
}
-
-
-/* HIDE OVERFLOW */
-
-#toolbar,
-#toolbar_search,
-#toolbar_tools,
-#tabs_menu {
- overflow: hidden;
+.sidebar_body {
+ background-color: var(--tab_list_background);
}
-/* AUTO SIZE */
+/* MAIN TOOLBAR */
-#tab_list,
-#pin_list {
- width: auto;
- height: auto;
-}
-
-
-/* WIDTH: 100% */
-
-#toolbar,
-#toolbar_main,
-#toolbar_search,
-#toolbar_tools {
+#toolbar {
+ position: absolute;
+ top: 0px;
+ left: 0px;
width: 100%;
+ background-color: var(--toolbar_background);
+ border-bottom: 1px solid var(--toolbar_border_bottom);
}
-/* POSITION: RELATIVE */
-
-#toolbar,
-#toolbar_separator,
-#filter_box,
-#button_filter_clear,
-.button,
-#pin_list,
-#tab_list,
-.pin,
-.tab {
- position: relative;
-}
-
-
-/* POSITION: ABSOLUTE */
-
-.tab_mediaicon,
-#tabs_menu,
-.toolbar_int {
- position: absolute;
-}
-
-
-/* PLACEMENT HORIZONTAL */
-
-#toolbar_search_input_box,
-#toolbar_search_buttons,
-#filter_box,
-#button_filter_clear,
-.button,
-.tab_mediaicon,
-.pin {
- display: inline-block;
- vertical-align: top;
-}
-
-
-/* PLACEMENT VERTICAL */
-
-#toolbar,
-#pin_list,
-#tab_list,
-.tab {
- display: vinline-block;
-}
-
-
-/* HIDE */
-
-.hidden {
- position: absolute;
- top: -1000px;
- left: -1000px;
- width: 0px;
- height: 0px;
- border: none;
- margin: 0px;
- overflow: hidden;
- margin: 0px;
-}
-
-#pin_list.hidden {
- margin-bottom: -2px;
-}
-
-
-/* TOOLBAR */
-
-.toolbar {
- padding-top: 1px;
- background-color: var(--toolbar_background, #f2f2f2);
-}
-
-.toolbar_int {
- border-bottom: 1px solid var(--toolbar_border_bottom, #cccccc);
-}
-
#toolbar_main {
+ position: relative;
+ width: 100%;
+ height: 26px;
top: 0px;
- height: 26px;
+ border-bottom: 1px solid var(--toolbar_border_bottom);
+ background-color: var(--toolbar_background);
}
-#toolbar_search,
-#toolbar_tools {
- top: 27px;
- height: 26px;
-}
-#toolbar_separator {
- top: 54px;
- height: 15px;
+.toolbar_shelf {
+ position: relative;
width: 100%;
- background-color: white;
-}
-
-#toolbar_unused_buttons {
- top: 69px;
height: 26px;
- width: 100%;
- background-color: #b8ffbf;
+ border-bottom: 1px solid var(--toolbar_border_bottom);
+ background-color: var(--toolbar_background);
+ overflow: hidden;
}
+.button.disabled {
+ opacity: 0.2;
+}
.button {
- z-index: 100;
- width: 22px;
- height: 22px;
- bottom: -1px;
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ width: var(--button_size);
+ height: var(--button_size);
+ top: 1px;
left: 1px;
margin-right: 1px;
}
.button:not(.on) {
- background-color: var(--button_background, #f2f2f2);
- border: 1px solid var(--button_border, #f2f2f2);
+ background-color: var(--button_background);
+ border: 1px solid var(--button_border);
}
.button:hover:not(.on) {
- background-color: var(--button_hover_background, #dcdcdc);
- border: 1px solid var(--button_hover_border, #bebebe);
+ background-color: var(--button_hover_background);
+ border: 1px solid var(--button_hover_border);
+}
+.button:hover:not(.on)>.button_img {
+ background-color: var(--button_icons_hover);
}
.button.on {
- height: 24px;
- background-color: var(--toolbar_background, #f2f2f2);
- border: 1px solid var(--toolbar_border_bottom, #cccccc);
- border-bottom: 1px solid var(--toolbar_background, #f2f2f2);
+ width: var(--button_size);
+ height: 26px;
+ background-color: var(--toolbar_background);
+ border: 1px solid var(--toolbar_border_bottom);
}
.button_img {
- width: 22px;
- height: 22px;
- background-size: 22px 22px;
+ width: var(--button_size);
+ height: var(--button_size);
+ background-size: var(--button_size) var(--button_size);
background-position: 0px 0px;
- background-color: var(--button_icons, #808080);
+ background-color: var(--button_icons);
}
-/* TOOLBAR BUTTONS */
+/* MAIN TOOLBAR BUTTONS */
#button_bookmarks>.button_img {
-webkit-mask-box-image: url(../theme/toolbar_bookmarks.svg);
@@ -240,13 +158,13 @@ div {
}
#button_new>.button_img {
- -webkit-mask-box-image: url(../theme/toolbar_new.svg);
- mask-image: url(../theme/toolbar_new.svg);
+ -webkit-mask-box-image: url(../theme/toolbar_plus_big.svg);
+ mask-image: url(../theme/toolbar_plus_big.svg);
}
#button_tools>.button_img {
- -webkit-mask-box-image: url(../theme/toolbar_tools.svg);
- mask-image: url(../theme/toolbar_tools.svg);
+ -webkit-mask-box-image: url(../theme/toolbar_wrench.svg);
+ mask-image: url(../theme/toolbar_wrench.svg);
}
#button_search>.button_img {
@@ -255,7 +173,71 @@ div {
}
-/* TOOLBAR SEARCHBOX */
+
+#button_groups>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_groups.svg);
+ mask-image: url(../theme/toolbar_groups.svg);
+}
+#button_groups_toolbar_hide>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_groups_hide.svg);
+ mask-image: url(../theme/toolbar_groups_hide.svg);
+}
+#button_new_group>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_plus_small.svg);
+ mask-image: url(../theme/toolbar_plus_small.svg);
+}
+#button_edit_group>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_edit.svg);
+ mask-image: url(../theme/toolbar_edit.svg);
+}
+#button_remove_group>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_trashcan.svg);
+ mask-image: url(../theme/toolbar_trashcan.svg);
+}
+#button_import_group>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_import.svg);
+ mask-image: url(../theme/toolbar_import.svg);
+}
+
+#button_load_bak1>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_load_bak1.svg);
+ mask-image: url(../theme/toolbar_load_bak1.svg);
+}
+#button_load_bak2>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_load_bak2.svg);
+ mask-image: url(../theme/toolbar_load_bak2.svg);
+}
+#button_load_bak3>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_load_bak3.svg);
+ mask-image: url(../theme/toolbar_load_bak3.svg);
+}
+
+#button_backup>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_save.svg);
+ mask-image: url(../theme/toolbar_save.svg);
+}
+
+#button_export_bak>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_save.svg);
+ mask-image: url(../theme/toolbar_save.svg);
+}
+
+#button_import_merge_bak>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_merge.svg);
+ mask-image: url(../theme/toolbar_merge.svg);
+}
+#button_import_bak>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_import.svg);
+ mask-image: url(../theme/toolbar_import.svg);
+}
+
+#button_export_group>.button_img {
+ -webkit-mask-box-image: url(../theme/toolbar_save.svg);
+ mask-image: url(../theme/toolbar_save.svg);
+}
+
+
+/* MAIN TOOLBAR SEARCHBOX */
#button_filter_type.url>.button_img {
-webkit-mask-box-image: url(../theme/toolbar_filter_url.svg);
@@ -288,6 +270,8 @@ div {
#toolbar_search_input_box {
position: relative;
+ display: inline-block;
+ vertical-align: top;
top: 0px;
left: 2px;
height: 25px;
@@ -296,13 +280,16 @@ div {
}
#filter_box {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
top: 2px;
padding-left: 6px;
width: calc(100% - 10px);
height: 18px;
- background-color: var(--filter_box_background, #fafafa);
- border: solid 1px var(--filter_box_border, #cccccc);
- color: var(--filter_box_font, #808080);
+ background-color: var(--filter_box_background);
+ border: solid 1px var(--filter_box_border);
+ color: var(--filter_box_font);
}
#filter_box:focus {
@@ -310,69 +297,525 @@ div {
}
#button_filter_clear {
+ display: inline-block;
+ vertical-align: top;
-webkit-mask-box-image: url(../theme/toolbar_filter_clear.svg);
mask-image: url(../theme/toolbar_filter_clear.svg);
- top: 6px;
- right: 17px;
+ top: 5.5px;
+ right: 4px;
width: 16px;
height: 16px;
- background-color: var(--filter_clear_icon, #808080);
+ background-color: var(--filter_clear_icon);
}
#toolbar_search_buttons {
position: relative;
+ display: inline-block;
+ vertical-align: top;
left: 2px;
height: 24px;
width: 30px;
}
+
/* LISTS */
#pin_list {
+ position: absolute;
+ display: block;
+ width: calc(100% - 1px);
height: auto;
+ left: 0px;
overflow-x: auto;
overflow-y: hidden;
padding-right: 2px;
padding-bottom: 1px;
- background-color: var(--pin_list_background, #fafafa);
- border-bottom: 1px solid var(--pin_list_border_bottom, #cccccc);
+ background-color: var(--pin_list_background);
+ border-bottom: 1px solid var(--pin_list_border_bottom);
}
-#tab_list {
+#groups {
+ position: absolute;
+ display: inline-block;
+ width: 100%;
+}
+
+
+.group {
+ position: absolute;
+ height: 100%;
+ width: calc(100% - 1px);
+ display: inline-block;
overflow-x: hidden;
overflow-y: auto;
- z-index: 100;
- background-color: var(--tab_list_background, #fafafa);
+ background-color: var(--tab_list_background);
}
-/* PINS AND TABS */
+/* GROUPS (SHELF LIKE BUTTONS) TOOLBAR */
-.tab_header {
- border: 1px solid var(--tab_border, #bebebe);
- background-color: var(--tab_background, #f2f2f2);
+#toolbar_groups {
+ position: relative;
+ display: none;
+ vertical-align: top;
+ top: 0px;
+ left: 0px;
+ /* width and border are set in RestoreStateOfGroupsToolbar() */
+ width: 0px;
+ height: 100%;
+ background-color: var(--group_list_background);
+ border-right: none;
+ overflow: visible;
+}
+#group_list {
+ position: relative;
+ display: block;
+ vertical-align: top;
+ left: 0px;
+ top: 4px;
+ width: 50px;
+ height: calc(100% - 8px);
+ overflow-x: visible;
+ overflow-y: scroll;
}
-.tab_header.tab_header_hover {
- border: 1px solid var(--tab_hover_border, #878787);
- background-color: var(--tab_hover_background, #d7d7d7);
+.group_title {
+
+ padding-right: 5px;
+ padding-left: 6px;
+ display: inline-block;
+ position: absolute;
+ transform: rotateZ(-90deg) translateX(-100%) translateY(1.5px);
+ transform-origin: top left;
+
+ font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
+ font-size: 11px;
+ font-weight: bold;
+ color: var(--group_list_default_font_color);
+ background: transparent;
}
-.selected>.tab_header {
- border: 1px solid var(--tab_selected_border, #70c0e7);
- background-color: var(--tab_selected_background, #e5f3fb);
+.group_button {
+ position: relative;
+ margin-left: 1px;
+ width: 16px;
+ height: 300px;
+ border: 1px solid transparent;
+ background-color: transparent;
}
-.selected>.tab_header.tab_header_hover {
- border: 1px solid var(--tab_selected_hover_border, #78aee5);
- background-color: var(--tab_selected_hover_background, #d0e2f0);
+
+.group_drag_box {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: -1px;
+ top: -1px;
+ background-color: transparent;
}
+.group_drag_box.highlighted_drop_target {
+ border: 1px solid var(--drag_indicator);
+}
+
+.group_button:hover:not(.active_group) {
+ background-color: var(--group_list_button_hover_background);
+}
+
+.group_button.active_group {
+ width: 20px;
+ border: 1px solid var(--group_list_borders);
+ background-color: var(--tab_list_background);
+}
+
+
+
+/* GROUP EDIT DIALOG */
+
+#group_edit {
+ z-index: 1000;
+ position: absolute;
+ overflow: hidden;
+ width: calc(100% - 28px);
+ height: 53px;
+ background-color: #efefef;
+ display: none;
+ word-wrap: normal;
+ white-space: initial;
+ font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif; font-size: 12px;
+ border: 1px solid #bebebe;
+ padding: 0px 0px 0px 0px;
+ background: #ffffff;
+ color: var(--tabs_menu_font);
+}
+
+#group_edit_font,
+#group_edit_name,
+#group_edit_confirm,
+#group_edit_discard {
+ position: absolute;
+}
+#group_edit_font {
+ display: inline-block;
+ top: 5px;
+ width: 19px; height: 19px;
+ border: 1px solid #bebebe;
+ background-color: #000000;
+ color: var(--tabs_menu_font);
+}
+#group_edit_font {
+ right: 5px;
+}
+#group_edit_name {
+ display: inline-block;
+ vertical-align: top;
+ top: 5px; left: 5px; width: calc(100% - 37px);
+}
+#group_edit_confirm,
+#group_edit_discard {
+ line-height: 17px;
+ font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
+ font-size: 11px;
+ color: #000000;
+ text-overflow: ellipsis;
+ background: transparent;
+ text-align: center;
+ vertical-align: middle;
+
+ overflow: hidden;
+ display: inline-block;
+ top: 30px;
+ width: calc(50% - 8px); height: 17px;
+ border: 1px solid #bebebe;
+}
+#group_edit_confirm {
+ left: 5px;
+}
+#group_edit_discard {
+ left: calc(50% + 1px);
+}
+
+
+#group_edit_font:hover {
+ opacity: 0.8;
+}
+#group_edit_confirm:hover,
+#group_edit_discard:hover {
+ background-color: #dcdcdc;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* PINS AND TABS COLORS, WATCH OUT AND DON'T MESS WITH IT */
+/* normal */
+.tab_header{
+ border-radius:var(--tab_header_border_radius);
+ border:1px solid var(--tab_border);
+ background-color:var(--tab_background);
+}
+.tab>.tab_header>.tab_title{
+ color:var(--tab_title_font_color);
+ font-style:var(--tab_title_font_style);
+ font-weight:var(--tab_title_font_weight);
+}
+/* normal hover */
+.tab_header_hover{
+ border-radius:var(--tab_header_border_radius);
+ border:1px solid var(--tab_hover_border);
+ background-color:var(--tab_hover_background);
+}
+.tab>.tab_header_hover>.tab_title{
+ color:var(--tab_hover_title_font_color);
+ font-style:var(--tab_hover_title_font_style);
+ font-weight:var(--tab_hover_title_font_weight);
+}
+/* normal selected */
+.selected>.tab_header{
+ border:1px solid var(--tab_selected_border);
+ background-color:var(--tab_selected_background);
+}
+.tab.selected>.tab_header>.tab_title{
+ color:var(--tab_selected_title_font_color);
+ font-style:var(--tab_selected_title_font_style);
+ font-weight:var(--tab_selected_title_font_weight);
+}
+/* normal selected hover */
+.selected>.tab_header_hover{
+ border:1px solid var(--tab_selected_hover_border);
+ background-color:var(--tab_selected_hover_background);
+ }
+.tab.selected>.tab_header_hover>.tab_title{
+ color:var(--tab_selected_hover_title_font_color);
+ font-style:var(--tab_selected_hover_title_font_style);
+ font-weight:var(--tab_selected_hover_title_font_weight);
+}
+/* normal active */
+.active>.tab_header{
+ border:1px solid var(--tab_active_border);
+ background-color:var(--tab_active_background);
+}
+.tab.active>.tab_header>.tab_title{
+ color:var(--tab_active_title_font_color);
+ font-style:var(--tab_active_title_font_style);
+ font-weight:var(--tab_active_title_font_weight);
+}
+/* normal active hover */
+.active>.tab_header_hover{
+ border:1px solid var(--tab_active_hover_border);
+ background-color:var(--tab_active_hover_background);
+}
+.tab.active>.tab_header_hover>.tab_title{
+ color:var(--tab_active_hover_title_font_color);
+ font-style:var(--tab_active_hover_title_font_style);
+ font-weight:var(--tab_active_hover_title_font_weight);
+}
+/* normal selected active */
+.selected.active>.tab_header{
+ border:1px solid var(--tab_active_selected_border);
+ background-color:var(--tab_active_selected_background);
+}
+.tab.selected.active>.tab_header>.tab_title{
+ color:var(--tab_active_selected_title_font_color);
+ font-style:var(--tab_active_selected_title_font_style);
+ font-weight:var(--tab_active_selected_title_font_weight);
+}
+/* normal selected active hover */
+.selected.active>.tab_header_hover{
+ border:1px solid var(--tab_selected_active_hover_border);
+ background-color:var(--tab_selected_active_hover_background);
+}
+.tab.selected.active>.tab_header_hover>.tab_title{
+ color:var(--tab_selected_active_hover_title_font_color);
+ font-style:var(--tab_selected_active_hover_title_font_style);
+ font-weight:var(--tab_selected_active_hover_title_font_weight);
+}
+/* unloaded */
+.discarded>.tab_header{
+ border:1px solid var(--tab_discarded_border);
+ background-color:var(--tab_discarded_background);
+}
+.tab.discarded>.tab_header>.tab_title{
+ color:var(--tab_discarded_title_font_color);
+ font-style:var(--tab_discarded_title_font_style);
+ font-weight:var(--tab_discarded_title_font_weight);
+}
+/* unloaded hover */
+.discarded>.tab_header_hover{
+ border:1px solid var(--tab_discarded_hover_border);
+ background-color:var(--tab_discarded_hover_background);
+}
+.tab.discarded>.tab_header_hover>.tab_title{
+ color:var(--tab_discarded_hover_title_font_color);
+ font-style:var(--tab_discarded_hover_title_font_style);
+ font-weight:var(--tab_discarded_hover_title_font_weight);
+}
+/* unloaded selected */
+.selected.discarded>.tab_header{
+ border:1px solid var(--tab_selected_discarded_border);
+ background-color:var(--tab_selected_discarded_background);
+}
+.tab.selected.discarded>.tab_header>.tab_title{
+ color:var(--tab_selected_discarded_title_font_color);
+ font-style:var(--tab_selected_discarded_title_font_style);
+ font-weight:var(--tab_selected_discarded_title_font_weight);
+}
+/* unloaded selected hover */
+.selected.discarded>.tab_header_hover{
+ border:1px solid var(--tab_selected_discarded_hover_border);
+ background-color:var(--tab_selected_discarded_hover_background);
+}
+.tab.selected.discarded>.tab_header_hover>.tab_title{
+ color:var(--tab_selected_discarded_hover_title_font_color);
+ font-style:var(--tab_selected_discarded_hover_title_font_style);
+ font-weight:var(--tab_selected_discarded_hover_title_font_weight);
+}
+/* search result */
+.filtered>.tab_header{
+ border:1px solid var(--tab_filtered_border);
+ background-color:var(--tab_filtered_background);
+}
+.tab.filtered>.tab_header>.tab_title{
+ color:var(--tab_filtered_title_font_color);
+ font-style:var(--tab_filtered_title_font_style);
+ font-weight:var(--tab_filtered_title_font_weight);
+}
+/* search result hover */
+.filtered>.tab_header_hover{
+ border:1px solid var(--tab_filtered_hover_border);
+ background-color:var(--tab_filtered_hover_background);
+}
+.tab.filtered>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_hover_title_font_color);
+ font-style:var(--tab_filtered_hover_title_font_style);
+ font-weight:var(--tab_filtered_hover_title_font_weight);
+}
+/* search result active */
+.filtered.active>.tab_header{
+ border:1px solid var(--tab_filtered_active_border);
+ background-color:var(--tab_filtered_active_background);
+}
+.tab.filtered.active>.tab_header>.tab_title{
+ color:var(--tab_filtered_active_title_font_color);
+ font-style:var(--tab_filtered_active_title_font_style);
+ font-weight:var(--tab_filtered_active_title_font_weight);
+}
+/* search result active hover */
+.filtered.active>.tab_header_hover{
+ border:1px solid var(--tab_filtered_active_hover_border);
+ background-color:var(--tab_filtered_active_hover_background);
+}
+.tab.filtered.active>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_active_hover_title_font_color);
+ font-style:var(--tab_filtered_active_hover_title_font_style);
+ font-weight:var(--tab_filtered_active_hover_title_font_weight);
+}
+/* search result selected */
+.selected.filtered>.tab_header{
+ border:1px solid var(--tab_filtered_selected_border);
+ background-color:var(--tab_filtered_selected_background);
+}
+.tab.selected.filtered>.tab_header>.tab_title{
+ color:var(--tab_filtered_selected_title_font_color);
+ font-style:var(--tab_filtered_selected_title_font_style);
+ font-weight:var(--tab_filtered_selected_title_font_weight);
+}
+/* search result selected hover */
+.selected.filtered>.tab_header_hover{
+ border:1px solid var(--tab_filtered_selected_hover_border);
+ background-color:var(--tab_filtered_selected_hover_background);
+}
+.tab.selected.filtered>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_selected_hover_title_font_color);
+ font-style:var(--tab_filtered_selected_hover_title_font_style);
+ font-weight:var(--tab_filtered_selected_hover_title_font_weight);
+}
+/* search result active selected */
+.selected.filtered.active>.tab_header{
+ border:1px solid var(--tab_filtered_selected_active_border);
+ background-color:var(--tab_filtered_selected_active_background);
+}
+.tab.selected.filtered.active>.tab_header>.tab_title{
+ color:var(--tab_filtered_selected_active_title_font_color);
+ font-style:var(--tab_filtered_selected_active_title_font_style);
+ font-weight:var(--tab_filtered_selected_active_title_font_weight);
+}
+/* search result active selected hover */
+.selected.filtered.active>.tab_header_hover{
+ border:1px solid var(--tab_filtered_selected_active_hover_border);
+ background-color:var(--tab_filtered_selected_active_hover_background);
+}
+.tab.filtered.selected.active>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_selected_active_hover_title_font_color);
+ font-style:var(--tab_filtered_selected_active_hover_title_font_style);
+ font-weight:var(--tab_filtered_selected_active_hover_title_font_weight);
+}
+/* search result highlighted */
+.filtered.highlighted_search>.tab_header{
+ border:1px solid var(--tab_filtered_highlighted_search_border);
+ background-color:var(--tab_filtered_highlighted_search_background);
+}
+.tab.filtered.highlighted_search>.tab_header>.tab_title{
+ color:var(--tab_filtered_highlighted_search_title_font_color);
+ font-style:var(--tab_filtered_highlighted_search_title_font_style);
+ font-weight:var(--tab_filtered_highlighted_search_title_font_weight);
+}
+/* search result highlighted hover */
+.filtered.highlighted_search>.tab_header_hover{
+ border:1px solid var(--tab_filtered_highlighted_search_hover_border);
+ background-color:var(--tab_filtered_highlighted_search_hover_background);
+}
+.tab.filtered.highlighted_search>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_highlighted_search_hover_title_font_color);
+ font-style:var(--tab_filtered_highlighted_search_hover_title_font_style);
+ font-weight:var(--tab_filtered_highlighted_search_hover_title_font_weight);
+}
+/* search result active highlighted */
+.active.filtered.highlighted_search>.tab_header{
+ border:1px solid var(--tab_filtered_active_highlighted_search_border);
+ background-color:var(--tab_filtered_active_highlighted_search_background);
+}
+.tab.active.filtered.highlighted_search>.tab_header>.tab_title{
+ color:var(--tab_filtered_active_highlighted_search_title_font_color);
+ font-style:var(--tab_filtered_active_highlighted_search_title_font_style);
+ font-weight:var(--tab_filtered_active_highlighted_search_title_font_weight);
+}
+/* search result active highlighted hover */
+.active.filtered.highlighted_search>.tab_header_hover{
+ border:1px solid var(--tab_filtered_active_highlighted_search_hover_border);
+ background-color:var(--tab_filtered_active_highlighted_search_hover_background);
+}
+.tab.active.filtered.highlighted_search>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_active_highlighted_search_hover_title_font_color);
+ font-style:var(--tab_filtered_active_highlighted_search_hover_title_font_style);
+ font-weight:var(--tab_filtered_active_highlighted_search_hover_title_font_weight);
+}
+/* search result selected highlighted */
+.selected.filtered.highlighted_search>.tab_header{
+ border:1px solid var(--tab_filtered_selected_highlighted_search_border);
+ background-color:var(--tab_filtered_selected_highlighted_search_background);
+}
+.tab.selected.filtered.highlighted_search>.tab_header>.tab_title{
+ color:var(--tab_filtered_selected_highlighted_search_title_font_color);
+ font-style:var(--tab_filtered_selected_highlighted_search_title_font_style);
+ font-weight:var(--tab_filtered_selected_highlighted_search_title_font_weight);
+}
+/* search result selected highlighted hover */
+.selected.filtered.highlighted_search>.tab_header_hover{
+ border:1px solid var(--tab_filtered_selected_highlighted_search_hover_border);
+ background-color:var(--tab_filtered_selected_highlighted_search_hover_background);
+}
+.tab.selected.filtered.highlighted_search>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_selected_highlighted_search_hover_title_font_color);
+ font-style:var(--tab_filtered_selected_highlighted_search_hover_title_font_style);
+ font-weight:var(--tab_filtered_selected_highlighted_search_hover_title_font_weight);
+}
+/* search result selected active highlighted */
+.active.selected.filtered.highlighted_search>.tab_header{
+ border:1px solid var(--tab_filtered_selected_active_highlighted_search_border);
+ background-color:var(--tab_filtered_selected_active_highlighted_search_background);
+}
+.tab.active.selected.filtered.highlighted_search>.tab_header>.tab_title{
+ color:var(--tab_filtered_selected_active_highlighted_search_title_font_color);
+ font-style:var(--tab_filtered_selected_active_highlighted_search_title_font_style);
+ font-weight:var(--tab_filtered_selected_active_highlighted_search_title_font_weight);
+}
+/* search result selected active highlighted hover */
+.active.selected.filtered.highlighted_search>.tab_header_hover{
+ border:1px solid var(--tab_filtered_selected_active_highlighted_search_hover_border);
+ background-color:var(--tab_filtered_selected_active_highlighted_search_hover_background);
+}
+.tab.active.selected.filtered.highlighted_search>.tab_header_hover>.tab_title{
+ color:var(--tab_filtered_selected_active_highlighted_search_hover_title_font_color);
+ font-style:var(--tab_filtered_selected_active_highlighted_search_hover_title_font_style);
+ font-weight:var(--tab_filtered_selected_active_highlighted_search_hover_title_font_weight);
+}
+
+
+
+
+
+
+
+
+
+
/* TABS */
-.tab_header>.tab_title {
+/* regular tab title */
+.tab_title {
z-index: 5;
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
white-space: nowrap;
@@ -380,228 +823,338 @@ div {
width: auto;
overflow: hidden;
padding-right: 3px;
- padding-left: var(--title_padding_left, 25px);
- color: var(--tab_title, #000000);
- font-size: var(--title_font_size, 12px);
-}
-
-.tab.active>.tab_header>.tab_title {
- font-weight: var(--active_font_weight, bold);
- color: var(--tab_title_active, #000000);
-}
-
-.tab.discarded>.tab_header>.tab_title {
- color: var(--tab_title_discarded, #7e7e7e);
-}
-
-.tab.filtered>.tab_header {
- background-color: var(--tab_filtered, #e8e000);
-}
-
-.tab.selected.filtered>.tab_header {
- background-color: var(--tab_filtered_selected, #0f8079);
-}
-
-.tab.selected.active.filtered>.tab_header {
- background-color: var(--tab_filtered_selected_active, #1299a9);
-}
-
-.tab.filtered.highlighted_search>.tab_header {
- background-color: var(--tab_filtered_highlighted, #ffa500);
+ padding-left: var(--tab_title_text_padding_left);
+ font-size: var(--title_font_size);
}
.tab {
position: relative;
- display: vinline-block;
+ display: block;
left: 0px;
height: auto;
width: auto;
border-top: 1px solid transparent;
}
-
.tab>.tab_header {
/* tab size is here, all the rest is automatically calculated, adjust line-height to fix title vertical position */
z-index: 10;
position: relative;
top: 0px;
- left: 13px;
- height: var(--tab_height, 19px);
- line-height: var(--tab_height_line, 22px);
- width: calc(100% - 16px);
+ left: 1px;
+ height: var(--tab_height);
+ line-height: var(--tab_height_line);
+ width: calc(100% - 4px);
background-image: url(../theme/empty.svg);
- background-size: var(--favicon_size, 16px 16px);
- background-position: var(--favicon_pos, 4px center);
+ background-size: var(--favicon_size);
+ background-position: var(--favicon_left), center;
}
+/* DRAG AND DROP TARGETS */
+
.drop_target {
display: none;
position: absolute;
}
-.tab>.drop_target {
- left: 13px;
- width: calc(100% - 14px);
-}
-
.tab>.drag_enter_center {
+ border-radius: var(--tab_header_border_radius);
z-index: 11;
top: -1px;
- height: calc(var(--tab_height, 21px) + 2px);
+ left: 1px;
+ height: calc(var(--tab_height) + 2px);
+ width: calc(100% - 4px);
border: 1px solid transparent;
}
.tab>.drag_enter_center.highlighted_drop_target {
- border: 1px solid var(--drag_indicator, #339bf3);
+ border: 1px solid var(--drag_indicator);
}
.tab>.drag_entered_top {
+ border-radius: var(--tab_header_border_radius);
z-index: 15;
top: -1px;
- height: var(--drag_area_top, 7px);
+ left: 1px;
+ width: calc(100% - 2px);
+ height: var(--drag_area_top);
border-top: 1px solid transparent;
}
.tab>.drag_entered_top.highlighted_drop_target {
- border-top: 1px solid var(--drag_indicator, #339bf3);
+ border-top: 1px solid var(--drag_indicator);
}
.tab>.drag_entered_bottom {
+ border-radius: var(--tab_header_border_radius);
z-index: 20;
bottom: -1px;
- height: var(--drag_area_bottom, 5px);
+ left: 1px;
+ width: calc(100% - 2px);
+ height: var(--drag_area_bottom);
border-bottom: 1px solid transparent;
}
.tab>.drag_entered_bottom.highlighted_drop_target {
bottom: -1px;
- border-bottom: 1px solid var(--drag_indicator, #339bf3);
+ border-bottom: 1px solid var(--drag_indicator);
}
-.children>.tab:last-child>.drag_entered_bottom {
+.tab>.children>.tab:last-child>.drag_entered_bottom {
z-index: 19;
bottom: 3px;
border-bottom: 1px solid transparent;
}
-.children>.tab:last-child>.drag_entered_bottom.highlighted_drop_target {
+.tab>.children>.tab:last-child>.drag_entered_bottom.highlighted_drop_target {
bottom: -1px;
- height: calc(var(--drag_area_bottom, 9px) + 4px);
- border-bottom: 1px solid var(--drag_indicator, #339bf3);
+ height: calc(var(--drag_area_bottom) + 4px);
+ border-bottom: 1px solid var(--drag_indicator);
}
-/* #tab_list>.tab:first-child {
- margin-top: 4px;
-} */
-#tab_list>.tab:last-child {
+
+
+
+/* .group>.tab:last-child { */
+.group>:last-child {
margin-bottom: 12px;
}
-/* TABS CHILDREN */
-
-.children>.tab>.tab_header {
- left: 13px;
+/* TABS WITH CHILDREN, OPEN AND CLOSED */
+.tab.c>.tab_header,
+.tab.o>.tab_header {
+ background-position: calc(var(--favicon_left) + 8px), center;
+}
+.tab.c>.tab_header>.tab_title,
+.tab.o>.tab_header>.tab_title {
+ padding-left: calc(var(--tab_title_text_padding_left) + 8px);
+}
+.expand {
+ z-index: 200;
+ position: absolute;
+ top: calc(var(--tab_height)/2 - 8px);
+ left: 0px;
+ width: 24px;
+ height: 16px;
}
-.children {
+/* CHILDREN TABS */
+.tab>.children {
position: relative;
- padding-left: 6px;
+ padding-left: var(--children_padding_left);
+ /* padding-left: 4%; */
}
-.o>.children {
+.tab.o>.children {
height: auto;
}
-.c>.children {
+.tab.c>.children {
display: none;
height: 0px;
}
-.expand {
+.tab.c>.tab_header>.expand.hover,
+.tab.o>.tab_header>.expand.hover {
+ background-color: var(--expand_hover_background);
+}
+
+.tab.c>.tab_header>.expand {
+ background-size: 24px 16px;
+ background-position: 0px center;
+ background-color: var(--expand_closed_background);
+ -webkit-mask-box-image: url(../theme/expand_closed.svg);
+ mask-image: url(../theme/expand_closed.svg);
+}
+
+.tab.o>.tab_header>.expand {
+ background-size: 24px 16px;
+ background-position: 0px center;
+ background-color: var(--expand_open_background);
+ -webkit-mask-box-image: url(../theme/expand_open.svg);
+ mask-image: url(../theme/expand_open.svg);
+}
+
+
+
+/* FOLDERS */
+
+.folder_title {
+ z-index: 5;
+ font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ width: auto;
+ overflow: hidden;
+ padding-right: 3px;
+ padding-left: var(--tab_title_text_padding_left);
+ font-size: var(--title_font_size);
+
+ color:var(--tab_title_font_color);
+ font-style:var(--tab_title_font_style);
+ font-weight:var(--tab_title_font_weight);
+}
+
+.folder {
+ position: relative;
+ display: block;
+ left: 0px;
+ height: auto;
+ width: auto;
+ border-top: 1px solid transparent;
+}
+.folder>.folder_header {
+ z-index: 10;
+ position: relative;
+ top: 0px;
+ left: 1px;
+ height: var(--tab_height);
+ line-height: var(--tab_height_line);
+ width: calc(100% - 4px);
+}
+
+/* .drop_target {
+ display: none;
+ position: absolute;
+} */
+
+.folder>.drag_enter_center {
+ border-radius: var(--tab_header_border_radius);
+ z-index: 11;
+ top: -1px;
+ left: 1px;
+ height: calc(var(--tab_height) + 2px);
+ width: calc(100% - 4px);
+ border: 1px solid transparent;
+}
+
+.folder>.drag_enter_center.highlighted_drop_target {
+ border: 1px solid var(--drag_indicator);
+}
+
+.folder>.drag_entered_top {
+ border-radius: var(--tab_header_border_radius);
+ z-index: 15;
+ top: -1px;
+ left: 1px;
+ width: calc(100% - 2px);
+ height: var(--drag_area_top);
+ border-top: 1px solid transparent;
+}
+.folder>.drag_entered_top.highlighted_drop_target {
+ border-top: 1px solid var(--drag_indicator);
+}
+
+.folder>.drag_entered_bottom {
+ border-radius: var(--tab_header_border_radius);
+ z-index: 20;
+ bottom: -1px;
+ left: 1px;
+ width: calc(100% - 2px);
+ height: var(--drag_area_bottom);
+ border-bottom: 1px solid transparent;
+}
+.folder>.drag_entered_bottom.highlighted_drop_target {
+ bottom: -1px;
+ border-bottom: 1px solid var(--drag_indicator);
+}
+
+
+.folder>.children>.folder:last-child>.drag_entered_bottom {
+ z-index: 19;
+ bottom: 3px;
+ border-bottom: 1px solid transparent;
+}
+.folder>.children>.folder:last-child>.drag_entered_bottom.highlighted_drop_target {
+ bottom: -1px;
+ height: calc(var(--drag_area_bottom) + 4px);
+ border-bottom: 1px solid var(--drag_indicator);
+}
+.folder>.children {
+ position: relative;
+ padding-left: var(--children_padding_left);
+}
+.folder.o>.children {
+ height: auto;
+}
+
+.folder.c>.children {
+ display: none;
+ height: 0px;
+}
+.folder.c>.folder_header,
+.folder.o>.folder_header {
+ background-position: calc(var(--favicon_left) + 8px), center;
+}
+.folder.c>.folder_header>.folder_title,
+.folder.o>.folder_header>.folder_title {
+ padding-left: calc(var(--tab_title_text_padding_left) + 8px);
+}
+.folder_icon {
z-index: 200;
position: absolute;
- top: 1px;
- left: 0px;
- height: 100%;
+ top: calc(var(--tab_height)/2 - 8px);
+ left: var(--favicon_left);
width: 16px;
+ height: 16px;
+ background-size: 16px 16px;
+ background-position: 0px center;
}
-.exp_box {
- position: absolute;
- top: var(--expand_box_top, 6px);
- left: var(--expand_box_left, 3px);
- height: var(--expand_box_size, 5px);
- width: var(--expand_box_size, 5px);
+.folder.c>.folder_header>.folder_icon.hover,
+.folder.o>.folder_header>.folder_icon.hover {
+ background-color: var(--expand_hover_background);
}
-.c>.expand>.exp_box {
- border: 1px solid var(--expand_closed_border, #969696);
- background-color: var(--expand_closed_background, #eaeaea);
+.folder.n>.folder_header>.folder_icon,
+.folder.c>.folder_header>.folder_icon {
+ background-color: var(--expand_closed_background);
+ -webkit-mask-box-image: url(../theme/folder_closed.svg);
+ mask-image: url(../theme/folder_closed.svg);
}
-.o>.expand>.exp_box {
- border: 1px solid var(--expand_open_border, #339bf3);
- background-color: var(--expand_open_background, #d0e2f0);
+.folder.o>.folder_header>.folder_icon {
+ background-color: var(--expand_open_background);
+ -webkit-mask-box-image: url(../theme/folder_open.svg);
+ mask-image: url(../theme/folder_open.svg);
}
-.children>.o>.expand>.exp_line_h,
-.children>.c>.expand>.exp_line_h {
- position: absolute;
- top: var(--expand_line_h_top, 9px);
- left: 1px;
- height: 1px;
- width: var(--expand_line_h_oc_width, 3px);
- border-top: 1px solid var(--expand_lines, #cccccc);
-}
-.children>.tab:not(.o):not(.c)>.expand>.exp_line_h {
- position: absolute;
- top: var(--expand_line_h_top, 9px);
- left: 1px;
- height: 1px;
- width: var(--expand_line_h_width, 12px);
- border-top: 1px solid var(--expand_lines, #cccccc);
-}
-.children>.tab:not(:last-child)>.expand>.exp_line_v {
- position: absolute;
- top: var(--expand_line_v_top, -9px);
- left: var(--expand_line_v_left, 0px);
- height: calc(100% + 1px);
- width: 1px;
- border-left: 1px solid var(--expand_lines, #cccccc);
-}
-
-.children>.tab:last-child>.expand>.exp_line_v {
- position: absolute;
- top: var(--expand_line_v_top, -9px);
- left: var(--expand_line_v_left, 0px);
- height: var(--expand_line_v_last_height, 19px);
- width: 1px;
- border-left: 1px solid var(--expand_lines, #cccccc);
-}
/* PINS */
+@keyframes blinking {
+ 0% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
+ 50% {background-color: var(--attention_background); border:1px solid var(--attention_border);}
+ 80% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
+ 100% {background-color: var(--tab_background); border:1px solid var(--tab_border);}
+}
+.pin.attention>.tab_header {
+ animation: blinking 2.5s infinite;
+}
.pin {
/* pin size is here, all the rest is automatically calculated */
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
top: 1px;
left: 1px;
- height: var(--pin_height, 24px);
- width: var(--pin_width, 26px);
+ height: var(--pin_height);
+ width: var(--pin_width);
/* border: 1px solid red; */
}
.pin>.tab_header>.tab_title,
-.pin>.expand {
+.pin>.tab_header>.expand {
display: none;
}
.pin>.tab_header {
- background-image: url(../theme/empty.svg);
- background-size: var(--favicon_size, 16px 16px);
- background-position: center;
height: calc(100% - 3px);
width: calc(100% - 3px);
+ background-image: url(../theme/empty.svg);
+ background-size: var(--favicon_size);
+ background-position: center, center;
}
.pin>.drag_entered_top {
@@ -615,7 +1168,7 @@ div {
}
.pin>.drag_entered_top.highlighted_drop_target {
- border-left: 1px solid var(--drag_indicator, #339bf3);
+ border-left: 1px solid var(--drag_indicator);
}
.pin>.drag_entered_bottom {
@@ -629,7 +1182,7 @@ div {
}
.pin>.drag_entered_bottom.highlighted_drop_target {
- border-right: 1px solid var(--drag_indicator, #339bf3);
+ border-right: 1px solid var(--drag_indicator);
}
.pin>.drag_enter_center {
@@ -642,12 +1195,20 @@ div {
}
+
/* MEDIA */
+.tab.c>.tab_header>.tab_mediaicon,
+.tab.o>.tab_header>.tab_mediaicon {
+ left: calc(var(--pin_width) - 4px);
+}
.tab_mediaicon {
+ position: absolute;
+ display: inline-block;
+ vertical-align: top;
z-index: 999;
- bottom: 0px;
- left: 2px;
+ bottom: 2px;
+ left: calc(var(--pin_width) - 12px);
height: 0px;
width: 0px;
background-size: 0px 0px;
@@ -682,21 +1243,21 @@ div {
z-index: 998;
display: none;
position: absolute;
- top: var(--close_top, 2px);
- right: var(--close_right, 2px);
- height: var(--close_size, 13px);
- width: var(--close_size, 13px);
- background-size: var(--close_size, 13px) var(--close_size, 13px);
+ top: var(--close_top);
+ right: var(--close_right);
+ height: var(--close_height);
+ width: var(--close_width);
+ background-size: var(--close_height) var(--close_width);
}
.close_img {
- z-index: -999;
+ z-index: 0;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
- background-color: var(--close_x, #7d7d7d);
+ background-color: var(--close_x);
-webkit-mask-box-image: url(../theme/close.svg);
mask-image: url(../theme/close.svg);
mask-size: 100%;
@@ -704,7 +1265,7 @@ div {
}
.close_show>.tab_title {
- padding-right: var(--title_padding_with_close, 24px);
+ padding-right: var(--tab_title_text_padding_right_with_close_button);
}
.close_show>.close {
@@ -713,50 +1274,68 @@ div {
.close_show>.close_hover>.close_img {
top: 0px;
- background-color: var(--close_hover_x, #fbfcfe);
+ background-color: var(--close_hover_x);
}
.close_show>.close_hover {
- border: 1px solid var(--close_hover_border, #757676);
- background-color: var(--close_hover_background, #939394);
+ border: 1px solid var(--close_hover_border);
+ background-color: var(--close_hover_background);
}
.pin>.tab_header>.close {
display: none;
- z-index: -999;
+ z-index: 0;
}
/* MENU */
#tabs_menu {
+ position: absolute;
+ overflow: hidden;
display: none;
word-wrap: normal;
white-space: initial;
z-index: 1000;
font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif;
font-size: 12px;
- border: 1px solid var(--tabs_menu_border, #bebebe);
- padding: 0;
- background: var(--tabs_menu_background, #fafafa);
- color: var(--tabs_menu_font, #333333);
+ border: 1px solid var(--tabs_menu_border);
+ padding: 0px 0px 0px 0px;
+ background: var(--tabs_menu_background);
+ color: var(--tabs_menu_font);
}
#tabs_menu li {
padding: 3px 8px;
- cursor: pointer;
+ border: 1px solid var(--tabs_menu_background);
list-style-type: none;
}
#tabs_menu li:hover {
- padding: 2px 7px;
- border: 1px solid var(--tabs_menu_hover_border, #bebebe);
- background-color: var(--tabs_menu_hover_background, #efefef);
+ border: 1px solid var(--tabs_menu_hover_border);
+ background-color: var(--tabs_menu_hover_background);
}
#tabs_menu .separator {
height: 1px;
width: 80%;
- background-color: var(--tabs_menu_separator, #efefef);
- margin: 0 auto;
+ background-color: var(--tabs_menu_separator);
+ margin: 0px auto;
+}
+
+
+
+/* HIDE */
+
+.hidden {
+ display: none;
+ position: absolute;
+ top: -1000px;
+ left: -1000px;
+ width: 0px;
+ height: 0px;
+ border: none;
+ margin: 0px;
+ padding: 0;
+ overflow: hidden;
}
\ No newline at end of file
diff --git a/theme/theme_colors.css b/theme/theme_colors.css
new file mode 100644
index 0000000..d9bc6eb
--- /dev/null
+++ b/theme/theme_colors.css
@@ -0,0 +1,278 @@
+body {
+ /* SCROLLBARS */
+ --scrollbar_thumb: #cdcdcd;
+ --scrollbar_thumb_hover: #a6a6a6;
+ --scrollbar_track: #e4e4e4;
+
+
+ /* MAIN TOOLBAR */
+ --toolbar_background: #f2f2f2;
+ --toolbar_border_bottom: #cccccc;
+
+ /* MAIN TOOLBAR BUTTONS COLORS */
+ --button_background: #f2f2f2;
+ --button_border: #f2f2f2;
+ --button_hover_background: #dcdcdc;
+ --button_hover_border: #bebebe;
+ --button_icons: #808080;
+ --button_icons_hover: #808080;
+
+ /* SEARCH BOX */
+ --filter_box_background: #fafafa;
+ --filter_box_border: #cccccc;
+ --filter_box_font: #808080;
+ --filter_clear_icon: #808080;
+
+ /* GROUPS SHELF TOOLBAR */
+ --group_list_background: #fafafa;
+ --group_list_borders: #bebebe;
+ --group_list_default_font_color: #808080;
+ --group_list_button_hover_background: #dcdcdc;
+
+ /* TOTO GROUP EDIT DIALOG */
+
+
+ /* LISTS */
+ --pin_list_background: #fafafa;
+ --pin_list_border_bottom: #cccccc;
+ --tab_list_background: #fafafa;
+
+ /* TABS */
+ --tab_header_border_radius: 0px;
+ --drag_indicator: #339bf3;
+
+ /* normal */
+ --tab_border: #bebebe;
+ --tab_background: #f1f1f1;
+ --tab_title_font_color: #000000;
+ --tab_title_font_style: normal;
+ --tab_title_font_weight: normal;
+
+ /* normal hover */
+ --tab_hover_border: #878787;
+ --tab_hover_background: #d7d7d7;
+ --tab_hover_title_font_color: #000000;
+ --tab_hover_title_font_style: normal;
+ --tab_hover_title_font_weight: normal;
+
+ /* normal selected */
+ --tab_selected_border: #70c0e7;
+ --tab_selected_background: #e5f3fb;
+ --tab_selected_title_font_color: #000000;
+ --tab_selected_title_font_style: italic;
+ --tab_selected_title_font_weight: normal;
+
+ /* normal selected hover */
+ --tab_selected_hover_border: #78aee5;
+ --tab_selected_hover_background: #d0e2f0;
+ --tab_selected_hover_title_font_color: #000000;
+ --tab_selected_hover_title_font_style: italic;
+ --tab_selected_hover_title_font_weight: normal;
+
+ /* normal active */
+ --tab_active_border: #70c0e7;
+ --tab_active_background: #e5f3fb;
+ --tab_active_title_font_color: #000000;
+ --tab_active_title_font_style: normal;
+ --tab_active_title_font_weight: bold;
+
+ /* normal active hover */
+ --tab_active_hover_border: #78aee5;
+ --tab_active_hover_background: #d0e2f0;
+ --tab_active_hover_title_font_color: #000000;
+ --tab_active_hover_title_font_style: normal;
+ --tab_active_hover_title_font_weight: bold;
+
+ /* normal selected active */
+ --tab_active_selected_border: #70c0e7;
+ --tab_active_selected_background: #e5f3fb;
+ --tab_active_selected_title_font_color: #000000;
+ --tab_active_selected_title_font_style: italic;
+ --tab_active_selected_title_font_weight: bold;
+
+ /* normal selected active hover */
+ --tab_selected_active_hover_border: #78aee5;
+ --tab_selected_active_hover_background: #d0e2f0;
+ --tab_selected_active_hover_title_font_color: #000000;
+ --tab_selected_active_hover_title_font_style: italic;
+ --tab_selected_active_hover_title_font_weight: bold;
+
+ /* unloaded */
+ --tab_discarded_border: #bebebe;
+ --tab_discarded_background: #f1f1f1;
+ --tab_discarded_title_font_color: #7e7e7e;
+ --tab_discarded_title_font_style: normal;
+ --tab_discarded_title_font_weight: normal;
+
+ /* unloaded hover */
+ --tab_discarded_hover_border: #878787;
+ --tab_discarded_hover_background: #d7d7d7;
+ --tab_discarded_hover_title_font_color: #7e7e7e;
+ --tab_discarded_hover_title_font_style: normal;
+ --tab_discarded_hover_title_font_weight: normal;
+
+ /* unloaded selected */
+ --tab_selected_discarded_border: #70c0e7;
+ --tab_selected_discarded_background: #e5f3fb;
+ --tab_selected_discarded_title_font_color: #7e7e7e;
+ --tab_selected_discarded_title_font_style: italic;
+ --tab_selected_discarded_title_font_weight: normal;
+
+ /* unloaded selected hover */
+ --tab_selected_discarded_hover_border: #78aee5;
+ --tab_selected_discarded_hover_background: #d0e2f0;
+ --tab_selected_discarded_hover_title_font_color: #7e7e7e;
+ --tab_selected_discarded_hover_title_font_style: italic;
+ --tab_selected_discarded_hover_title_font_weight: normal;
+
+ /* search result */
+ --tab_filtered_border: #a6a000;
+ --tab_filtered_background: #e8e000;
+ --tab_filtered_title_font_color: #000000;
+ --tab_filtered_title_font_style: normal;
+ --tab_filtered_title_font_weight: normal;
+
+ /* search result hover */
+ --tab_filtered_hover_border: #7f7b00;
+ --tab_filtered_hover_background: #d2cb00;
+ --tab_filtered_hover_title_font_color: #000000;
+ --tab_filtered_hover_title_font_style: normal;
+ --tab_filtered_hover_title_font_weight: normal;
+
+ /* search result active */
+ --tab_filtered_active_border: #a6a000;
+ --tab_filtered_active_background: #e8e000;
+ --tab_filtered_active_title_font_color: #000000;
+ --tab_filtered_active_title_font_style: normal;
+ --tab_filtered_active_title_font_weight: bold;
+
+ /* search result active hover */
+ --tab_filtered_active_hover_border: #7f7b00;
+ --tab_filtered_active_hover_background: #d2cb00;
+ --tab_filtered_active_hover_title_font_color: #000000;
+ --tab_filtered_active_hover_title_font_style: normal;
+ --tab_filtered_active_hover_title_font_weight: bold;
+
+ /* search result selected */
+ --tab_filtered_selected_border: #0b5b56;
+ --tab_filtered_selected_background: #0f8079;
+ --tab_filtered_selected_title_font_color: #000000;
+ --tab_filtered_selected_title_font_style: italic;
+ --tab_filtered_selected_title_font_weight: normal;
+
+ /* search result selected hover */
+ --tab_filtered_selected_hover_border: #094c48;
+ --tab_filtered_selected_hover_background: #0d6d67;
+ --tab_filtered_selected_hover_title_font_color: #000000;
+ --tab_filtered_selected_hover_title_font_style: italic;
+ --tab_filtered_selected_hover_title_font_weight: normal;
+
+ /* search result active selected */
+ --tab_filtered_selected_active_border: #0b5b56;
+ --tab_filtered_selected_active_background: #0f8079;
+ --tab_filtered_selected_active_title_font_color: #000000;
+ --tab_filtered_selected_active_title_font_style: italic;
+ --tab_filtered_selected_active_title_font_weight: bold;
+
+ /* search result active selected hover */
+ --tab_filtered_selected_active_hover_border: #094c48;
+ --tab_filtered_selected_active_hover_background: #0d6d67;
+ --tab_filtered_selected_active_hover_title_font_color: #000000;
+ --tab_filtered_selected_active_hover_title_font_style: italic;
+ --tab_filtered_selected_active_hover_title_font_weight: bold;
+
+
+
+
+ /* search result highlighted */
+ --tab_filtered_highlighted_search_border: #c57f00;
+ --tab_filtered_highlighted_search_background: #ffa500;
+ --tab_filtered_highlighted_search_title_font_color: #000000;
+ --tab_filtered_highlighted_search_title_font_style: normal;
+ --tab_filtered_highlighted_search_title_font_weight: normal;
+
+ /* search result highlighted hover */
+ --tab_filtered_highlighted_search_hover_border: #a86c00;
+ --tab_filtered_highlighted_search_hover_background: #c68100;
+ --tab_filtered_highlighted_search_hover_title_font_color: #000000;
+ --tab_filtered_highlighted_search_hover_title_font_style: normal;
+ --tab_filtered_highlighted_search_hover_title_font_weight: normal;
+
+ /* search result active highlighted */
+ --tab_filtered_active_highlighted_search_border: #a86c00;
+ --tab_filtered_active_highlighted_search_background: #ed9900;
+ --tab_filtered_active_highlighted_search_title_font_color: #000000;
+ --tab_filtered_active_highlighted_search_title_font_style: normal;
+ --tab_filtered_active_highlighted_search_title_font_weight: bold;
+
+
+ /* search result active highlighted hover */
+ --tab_filtered_active_highlighted_search_hover_border: #a86c00;
+ --tab_filtered_active_highlighted_search_hover_background: #c68100;
+ --tab_filtered_active_highlighted_search_hover_title_font_color: #000000;
+ --tab_filtered_active_highlighted_search_hover_title_font_style: normal;
+ --tab_filtered_active_highlighted_search_hover_title_font_weight: bold;
+
+
+
+
+ /* search result selected highlighted */
+ --tab_filtered_selected_highlighted_search_border: #a86c00;
+ --tab_filtered_selected_highlighted_search_background: #ed9900;
+ --tab_filtered_selected_highlighted_search_title_font_color: #000000;
+ --tab_filtered_selected_highlighted_search_title_font_style: italic;
+ --tab_filtered_selected_highlighted_search_title_font_weight: normal;
+
+
+ /* search result selected highlighted hover */
+ --tab_filtered_selected_highlighted_search_hover_border: #a86c00;
+ --tab_filtered_selected_highlighted_search_hover_background: #c68100;
+ --tab_filtered_selected_highlighted_search_hover_title_font_color: #000000;
+ --tab_filtered_selected_highlighted_search_hover_title_font_style: italic;
+ --tab_filtered_selected_highlighted_search_hover_title_font_weight: normal;
+
+
+ /* search result selected active highlighted */
+ --tab_filtered_selected_active_highlighted_search_border: #a86c00;
+ --tab_filtered_selected_active_highlighted_search_background: #ed9900;
+ --tab_filtered_selected_active_highlighted_search_title_font_color: #000000;
+ --tab_filtered_selected_active_highlighted_search_title_font_style: italic;
+ --tab_filtered_selected_active_highlighted_search_title_font_weight: bold;
+
+
+ /* search result selected active highlighted hover */
+ --tab_filtered_selected_active_highlighted_search_hover_border: #a86c00;
+ --tab_filtered_selected_active_highlighted_search_hover_background: #c68100;
+ --tab_filtered_selected_active_highlighted_search_hover_title_font_color: #000000;
+ --tab_filtered_selected_active_highlighted_search_hover_title_font_style: italic;
+ --tab_filtered_selected_active_highlighted_search_hover_title_font_weight: bold;
+
+
+
+ --expand_hover_background: #ffa500;
+ --expand_closed_background: #969696;
+ --expand_open_background: #339bf3;
+
+ --attention_background: #ffd6ce;
+ --attention_border: #ff9d8a;
+ --close_x: #7d7d7d;
+ --close_hover_x: #fbfcfe;
+ --close_hover_border: #757676;
+ --close_hover_background: #939394;
+
+ /* MENU */
+ --tabs_menu_border: #bebebe;
+ --tabs_menu_background: #fafafa;
+ --tabs_menu_font: #333333;
+ --tabs_menu_hover_border: #bebebe;
+ --tabs_menu_hover_background: #efefef;
+ --tabs_menu_separator: #efefef;
+
+
+}
+
+
+
+body {
+ /* custom colors are placed here, do not remove this, as loaded theme colors are added to second (this) stylesheet */
+}
diff --git a/theme/theme_size_preset_0.css b/theme/theme_size_preset_0.css
new file mode 100644
index 0000000..d8e6499
--- /dev/null
+++ b/theme/theme_size_preset_0.css
@@ -0,0 +1,30 @@
+body {
+
+ --scrollbar_height: 4px;
+ --scrollbar_width: 16px;
+ --button_size: 22px;
+
+ --pin_width: 20px;
+ --pin_height: 20px;
+
+ --tab_height: 15px;
+ --tab_height_line: 17px;
+
+ --title_font_size: 10.5px;
+
+ --tab_title_text_padding_left: 19px;
+ --tab_title_text_padding_right_with_close_button: 20px;
+
+ --favicon_size: 13px 13px;
+ --favicon_left: 4px;
+
+
+ --drag_area_top: 6px;
+ --drag_area_bottom: 4px;
+
+ --children_padding_left: 5px;
+ --close_top: 1px;
+ --close_right: 1px;
+ --close_height: 11px;
+ --close_width: 11px;
+}
\ No newline at end of file
diff --git a/theme/theme_size_preset_1.css b/theme/theme_size_preset_1.css
new file mode 100644
index 0000000..82b7d64
--- /dev/null
+++ b/theme/theme_size_preset_1.css
@@ -0,0 +1,30 @@
+body {
+
+ --scrollbar_height: 4px;
+ --scrollbar_width: 16px;
+ --button_size: 22px;
+
+ --pin_width: 22px;
+ --pin_height: 22px;
+
+ --tab_height: 17px;
+ --tab_height_line: 19px;
+
+ --title_font_size: 10.5px;
+
+ --tab_title_text_padding_left: 23px;
+ --tab_title_text_padding_right_with_close_button: 20px;
+
+ --favicon_size: 14px 14px;
+ --favicon_left: 5px;
+
+
+ --drag_area_top: 6px;
+ --drag_area_bottom: 4px;
+
+ --children_padding_left: 5px;
+ --close_top: 2px;
+ --close_right: 2px;
+ --close_height: 11px;
+ --close_width: 11px;
+}
\ No newline at end of file
diff --git a/theme/theme_size_preset_2.css b/theme/theme_size_preset_2.css
new file mode 100644
index 0000000..aeed779
--- /dev/null
+++ b/theme/theme_size_preset_2.css
@@ -0,0 +1,30 @@
+body {
+
+ --scrollbar_height: 4px;
+ --scrollbar_width: 16px;
+ --button_size: 22px;
+
+ --pin_width: 25px;
+ --pin_height: 25px;
+
+ --tab_height: 19px;
+ --tab_height_line: 22px;
+
+ --title_font_size: 12px;
+
+ --tab_title_text_padding_left: 26px;
+ --tab_title_text_padding_right_with_close_button: 19px;
+
+ --favicon_size: 16px 16px;
+ --favicon_left: 5px;
+
+
+ --drag_area_top: 7px;
+ --drag_area_bottom: 5px;
+
+ --children_padding_left: 5px;
+ --close_top: 2px;
+ --close_right: 2px;
+ --close_height: 13px;
+ --close_width: 13px;
+}
\ No newline at end of file
diff --git a/theme/theme_size_preset_3.css b/theme/theme_size_preset_3.css
new file mode 100644
index 0000000..0c5c8ae
--- /dev/null
+++ b/theme/theme_size_preset_3.css
@@ -0,0 +1,30 @@
+body {
+
+ --scrollbar_height: 4px;
+ --scrollbar_width: 16px;
+ --button_size: 22px;
+
+ --pin_width: 26px;
+ --pin_height: 26px;
+
+ --tab_height: 21px;
+ --tab_height_line: 25px;
+
+ --title_font_size: 12px;
+
+ --tab_title_text_padding_left: 26px;
+ --tab_title_text_padding_right_with_close_button: 24px;
+
+ --favicon_size: 16px 16px;
+ --favicon_left: 6px;
+
+
+ --drag_area_top: 8px;
+ --drag_area_bottom: 5px;
+
+ --children_padding_left: 5px;
+ --close_top: 3px;
+ --close_right: 3px;
+ --close_height: 13px;
+ --close_width: 13px;
+}
\ No newline at end of file
diff --git a/theme/theme_size_preset_4.css b/theme/theme_size_preset_4.css
new file mode 100644
index 0000000..302a0f9
--- /dev/null
+++ b/theme/theme_size_preset_4.css
@@ -0,0 +1,30 @@
+body {
+
+ --scrollbar_height: 4px;
+ --scrollbar_width: 16px;
+ --button_size: 22px;
+
+ --pin_width: 26px;
+ --pin_height: 27px;
+
+ --tab_height: 23px;
+ --tab_height_line: 25px;
+
+ --title_font_size: 14px;
+
+ --tab_title_text_padding_left: 26px;
+ --tab_title_text_padding_right_with_close_button: 24px;
+
+ --favicon_size: 16px 16px;
+ --favicon_left: 6px;
+
+
+ --drag_area_top: 9px;
+ --drag_area_bottom: 6px;
+
+ --children_padding_left: 5px;
+ --close_top: 4px;
+ --close_right: 4px;
+ --close_height: 14px;
+ --close_width: 14px;
+}
\ No newline at end of file
diff --git a/theme/toolbar_edit.svg b/theme/toolbar_edit.svg
new file mode 100644
index 0000000..7ca6927
--- /dev/null
+++ b/theme/toolbar_edit.svg
@@ -0,0 +1,83 @@
+
+
+
+
diff --git a/theme/toolbar_groups.svg b/theme/toolbar_groups.svg
new file mode 100644
index 0000000..f08fb1f
--- /dev/null
+++ b/theme/toolbar_groups.svg
@@ -0,0 +1,81 @@
+
+
+
+
diff --git a/theme/toolbar_groups_hide.svg b/theme/toolbar_groups_hide.svg
new file mode 100644
index 0000000..6770117
--- /dev/null
+++ b/theme/toolbar_groups_hide.svg
@@ -0,0 +1,81 @@
+
+
+
+
diff --git a/theme/toolbar_import.svg b/theme/toolbar_import.svg
new file mode 100644
index 0000000..4965ce4
--- /dev/null
+++ b/theme/toolbar_import.svg
@@ -0,0 +1,78 @@
+
+
+
+
diff --git a/theme/toolbar_load_bak1.svg b/theme/toolbar_load_bak1.svg
new file mode 100644
index 0000000..a2d01ea
--- /dev/null
+++ b/theme/toolbar_load_bak1.svg
@@ -0,0 +1,82 @@
+
+
+
+
diff --git a/theme/toolbar_load_bak2.svg b/theme/toolbar_load_bak2.svg
new file mode 100644
index 0000000..ee74c40
--- /dev/null
+++ b/theme/toolbar_load_bak2.svg
@@ -0,0 +1,82 @@
+
+
+
+
diff --git a/theme/toolbar_load_bak3.svg b/theme/toolbar_load_bak3.svg
new file mode 100644
index 0000000..ed2f898
--- /dev/null
+++ b/theme/toolbar_load_bak3.svg
@@ -0,0 +1,82 @@
+
+
+
+
diff --git a/theme/toolbar_merge.svg b/theme/toolbar_merge.svg
new file mode 100644
index 0000000..330003e
--- /dev/null
+++ b/theme/toolbar_merge.svg
@@ -0,0 +1,114 @@
+
+
+
+
diff --git a/theme/toolbar_new.svg b/theme/toolbar_plus_big.svg
similarity index 100%
rename from theme/toolbar_new.svg
rename to theme/toolbar_plus_big.svg
diff --git a/theme/toolbar_plus_small.svg b/theme/toolbar_plus_small.svg
new file mode 100644
index 0000000..164b661
--- /dev/null
+++ b/theme/toolbar_plus_small.svg
@@ -0,0 +1,74 @@
+
+
+
+
diff --git a/theme/toolbar_save.svg b/theme/toolbar_save.svg
new file mode 100644
index 0000000..082af0e
--- /dev/null
+++ b/theme/toolbar_save.svg
@@ -0,0 +1,71 @@
+
+
+
+
diff --git a/theme/toolbar_trashcan.svg b/theme/toolbar_trashcan.svg
new file mode 100644
index 0000000..a6c9ddb
--- /dev/null
+++ b/theme/toolbar_trashcan.svg
@@ -0,0 +1,84 @@
+
+
+
+
diff --git a/theme/toolbar_tools.svg b/theme/toolbar_wrench.svg
similarity index 100%
rename from theme/toolbar_tools.svg
rename to theme/toolbar_wrench.svg