333 lines
12 KiB
JavaScript
333 lines
12 KiB
JavaScript
// 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 ***************
|
|
|
|
async function RefreshGUI() {
|
|
let toolbar = document.getElementById("toolbar");
|
|
let toolbarHeight = 27;
|
|
if (toolbar.children.length > 0) {
|
|
toolbar.style.height = "";
|
|
toolbar.style.width = "";
|
|
toolbar.style.display = "";
|
|
toolbar.style.border = "";
|
|
toolbar.style.padding = "";
|
|
if (document.querySelector(".on.button") != null) {
|
|
toolbar.style.height = "53px";
|
|
toolbarHeight = 54;
|
|
} else {
|
|
toolbar.style.height = "26px";
|
|
}
|
|
} else {
|
|
toolbar.style.height = "0px";
|
|
toolbarHeight = 0;
|
|
toolbar.style.width = "0px";
|
|
toolbar.style.display = "none";
|
|
toolbar.style.border = "none";
|
|
toolbar.style.padding = "0";
|
|
}
|
|
|
|
let group_list = document.getElementById("group_list");
|
|
group_list.style.width = document.body.clientWidth + 50 + "px";
|
|
|
|
let pin_list = document.getElementById("pin_list");
|
|
if (pin_list.children.length > 0) {
|
|
pin_list.style.top = toolbarHeight + "px";
|
|
pin_list.style.height = "";
|
|
pin_list.style.width = "";
|
|
pin_list.style.display = "";
|
|
pin_list.style.border = "";
|
|
pin_list.style.padding = "";
|
|
} else {
|
|
pin_list.style.top = "0px";
|
|
pin_list.style.height = "0px";
|
|
pin_list.style.width = "0px";
|
|
pin_list.style.display = "none";
|
|
pin_list.style.border = "none";
|
|
pin_list.style.padding = "0";
|
|
}
|
|
let pin_listHeight = pin_list.getBoundingClientRect().height;
|
|
|
|
let toolbar_groups = document.getElementById("toolbar_groups");
|
|
toolbar_groups.style.top = toolbarHeight + pin_listHeight + "px";
|
|
toolbar_groups.style.height = document.body.clientHeight - toolbarHeight - pin_listHeight + "px";
|
|
let toolbar_groupsWidth = toolbar_groups.getBoundingClientRect().width;
|
|
|
|
if (opt.show_counter_groups) {
|
|
document.querySelectorAll(".group").forEach(function(s){
|
|
let groupLabel = document.getElementById("_gte"+s.id);
|
|
if (groupLabel) {
|
|
groupLabel.textContent = (bggroups[s.id] ? bggroups[s.id].name : caption_noname_group) + " (" + document.querySelectorAll("#"+s.id+" .tab").length + ")";
|
|
}
|
|
});
|
|
} else {
|
|
document.querySelectorAll(".group").forEach(function(s){
|
|
let groupLabel = document.getElementById("_gte"+s.id);
|
|
if (groupLabel) {
|
|
groupLabel.textContent = bggroups[s.id] ? bggroups[s.id].name : caption_noname_group;
|
|
}
|
|
});
|
|
}
|
|
document.querySelectorAll(".group_button").forEach(function(s){
|
|
s.style.height = s.firstChild.getBoundingClientRect().height + "px";
|
|
});
|
|
let groups = document.getElementById("groups");
|
|
let groupsHeight = document.body.clientHeight - toolbarHeight - pin_listHeight;
|
|
|
|
groups.style.top = toolbarHeight + pin_listHeight + "px";
|
|
groups.style.left = toolbar_groupsWidth + "px";
|
|
groups.style.height = groupsHeight + "px";
|
|
groups.style.width = (document.body.clientWidth - toolbar_groupsWidth - 1) + "px";
|
|
|
|
|
|
// let total = ManagerWindowGroupsListHeight + ManagerWindowSessionsListHeight;
|
|
// if (total > document.body.clientHeight - 200) {
|
|
// let cut = (total - (document.body.clientHeight - 200))/2;
|
|
// ManagerWindowGroupsList.style.height = ManagerWindowGroupsListHeight - cut + "px";
|
|
// ManagerWindowSessionsList.style.height = ManagerWindowSessionsListHeight - cut + "px";
|
|
// } else {
|
|
// ManagerWindowGroupsList.style.height = ManagerWindowGroupsListHeight + "px";
|
|
// ManagerWindowSessionsList.style.height = ManagerWindowSessionsListHeight + "px";
|
|
// }
|
|
// ManagerWindow.style.height = ManagerWindowGroupsList.clientHeight + ManagerWindowSessionsList.clientHeight + 300 + "px";
|
|
|
|
|
|
|
|
|
|
let PanelList = document.querySelector(".mw_pan_on>.manager_window_list");
|
|
let PanelListHeight = 3 + PanelList.children.length * 18;
|
|
|
|
let ManagerWindowPanelButtons = document.querySelector(".mw_pan_on>.manager_window_panel_buttons");
|
|
let ManagerWindowPanelButtonsHeight = ManagerWindowPanelButtons.clientHeight;
|
|
|
|
let MaxAllowedHeight = document.body.clientHeight - 140;
|
|
|
|
|
|
if (PanelListHeight + ManagerWindowPanelButtonsHeight < MaxAllowedHeight) {
|
|
PanelList.style.height = PanelListHeight + "px";
|
|
} else {
|
|
PanelList.style.height = MaxAllowedHeight - ManagerWindowPanelButtonsHeight + "px";
|
|
}
|
|
|
|
// if (ManagerWindowSessionsListHeight > document.body.clientHeight - 300) {
|
|
// ManagerWindowSessionsList.style.height = document.body.clientHeight - 300 + "px";
|
|
// } else {
|
|
// ManagerWindowSessionsList.style.height = ManagerWindowSessionsListHeight + "px";
|
|
// }
|
|
|
|
|
|
|
|
let ManagerWindow = document.getElementById("manager_window");
|
|
// ManagerWindow.style.height = PanelListHeight.clientHeight + 700 + "px";
|
|
ManagerWindow.style.height = PanelList.clientHeight + ManagerWindowPanelButtonsHeight + 56 + "px";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
// set discarded class
|
|
function RefreshDiscarded(tabId) {
|
|
let t = document.getElementById(tabId);
|
|
if (t != null) {
|
|
chrome.tabs.get(parseInt(tabId), function(tab) {
|
|
if (tab) {
|
|
if (tab.discarded) {
|
|
t.classList.add("discarded");
|
|
} else {
|
|
t.classList.remove("discarded");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// set discarded class
|
|
function SetAttentionIcon(tabId) {
|
|
let t = document.getElementById(tabId);
|
|
if (t != null) {
|
|
t.classList.add("attention");
|
|
}
|
|
}
|
|
|
|
// change media icon
|
|
function RefreshMediaIcon(tabId) {
|
|
let t = document.getElementById(tabId);
|
|
if (t != null) {
|
|
chrome.tabs.get(parseInt(tabId), function(tab) {
|
|
if (tab) {
|
|
if (tab.mutedInfo.muted) {
|
|
t.classList.remove("audible");
|
|
t.classList.add("muted");
|
|
}
|
|
if (!tab.mutedInfo.muted && tab.audible) {
|
|
t.classList.remove("muted");
|
|
t.classList.add("audible");
|
|
}
|
|
if (!tab.mutedInfo.muted && !tab.audible) {
|
|
t.classList.remove("audible");
|
|
t.classList.remove("muted");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
// Vivaldi does not have changeInfo.audible listener, this is my own implementation, hopefully this will not affect performance too much
|
|
function VivaldiRefreshMediaIcons() {
|
|
setInterval(function() {
|
|
chrome.tabs.query({currentWindow: true, audible: true}, function(tabs) {
|
|
document.querySelectorAll(".audible, .muted").forEach(function(s){
|
|
s.classList.remove("audible");
|
|
s.classList.remove("muted");
|
|
});
|
|
let tc = tabs.length;
|
|
for (var ti = 0; ti < tc; ti++) {
|
|
if (tabs[ti].audible) {
|
|
document.getElementById(tabs[ti].id).classList.add("audible");
|
|
}
|
|
if (tabs[ti].mutedInfo.muted) {
|
|
document.getElementById(tabs[ti].id).classList.add("muted");
|
|
}
|
|
}
|
|
});
|
|
}, 2000);
|
|
}
|
|
|
|
async function GetFaviconAndTitle(tabId, addCounter) {
|
|
let t = document.getElementById(tabId);
|
|
if (t != null) {
|
|
chrome.tabs.get(parseInt(tabId), function(tab) {
|
|
if (tab){
|
|
let title = tab.title ? tab.title : tab.url;
|
|
let tHeader = t.childNodes[0];
|
|
let tTitle = tHeader.childNodes[1];
|
|
if (tab.status == "complete") {
|
|
t.classList.remove("loading");
|
|
// change title
|
|
tTitle.textContent = title;
|
|
tHeader.title = title;
|
|
tHeader.setAttribute("tabTitle", title);
|
|
// compatibility with various Tab suspender extensions
|
|
if (tab.favIconUrl != undefined && tab.favIconUrl.match("data:image/png;base64") != null) {
|
|
tHeader.style.backgroundImage = "url(" + tab.favIconUrl + ")";
|
|
} else {
|
|
// case for internal pages, favicons don't have access, but can be loaded from url
|
|
if (tab.url.match("opera://|vivaldi://|browser://|chrome://|chrome-extension://") != null) {
|
|
tHeader.style.backgroundImage = "url(chrome://favicon/" + tab.url + ")";
|
|
} else {
|
|
// change favicon
|
|
let img = new Image();
|
|
img.src = tab.favIconUrl;
|
|
img.onload = function() {
|
|
tHeader.style.backgroundImage = "url(" + tab.favIconUrl + ")";
|
|
};
|
|
img.onerror = function() {
|
|
tHeader.style.backgroundImage = ((tab.url == "" || browserId == "F") ? "url(./theme/icon_empty.svg)" : ("url(chrome://favicon/" + tab.url + ")"));
|
|
// "url(" + tab.url + ")"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (tab.status == "loading") {
|
|
title = tab.title ? tab.title : caption_loading;
|
|
t.classList.add("loading");
|
|
tHeader.style.backgroundImage = "";
|
|
tHeader.title = caption_loading;
|
|
tHeader.setAttribute("tabTitle", caption_loading);
|
|
tTitle.textContent = caption_loading;
|
|
setTimeout(function() {
|
|
if (document.getElementById(tab.id) != null) GetFaviconAndTitle(tab.id, addCounter);
|
|
}, 1000);
|
|
}
|
|
if (addCounter && (opt.show_counter_tabs || opt.show_counter_tabs_hints)) {
|
|
RefreshTabCounter(tabId);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// refresh open closed trees states
|
|
async function RefreshExpandStates() {
|
|
document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
|
|
if (s.childNodes[1].children.length == 0 && s.childNodes[2].children.length == 0) {
|
|
s.classList.remove("o");
|
|
s.classList.remove("c");
|
|
} else {
|
|
if (s.classList.contains("o") == false && s.classList.contains("c") == false) {
|
|
s.classList.add("o");
|
|
}
|
|
}
|
|
});
|
|
document.querySelectorAll("#"+active_group+" .tab").forEach(function(s){
|
|
if (s.childNodes[1].children.length == 0) {
|
|
s.classList.remove("o");
|
|
s.classList.remove("c");
|
|
} else {
|
|
if (s.classList.contains("o") == false && s.classList.contains("c") == false) {
|
|
s.classList.add("o");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
async function RefreshCounters() {
|
|
if (opt.show_counter_tabs || opt.show_counter_tabs_hints) {
|
|
document.querySelectorAll("#"+active_group+" .tab").forEach(function(s){
|
|
let title = s.childNodes[0].getAttribute("tabTitle");
|
|
if (title != null) {
|
|
s.childNodes[0].title = title;
|
|
s.childNodes[0].childNodes[1].textContent =title;
|
|
}
|
|
});
|
|
document.querySelectorAll("#"+active_group+" .o.tab, #"+active_group+" .c.tab").forEach(function(s){
|
|
let title = s.childNodes[0].getAttribute("tabTitle");
|
|
if (opt.show_counter_tabs && title != null) {
|
|
s.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
|
|
}
|
|
if (opt.show_counter_tabs_hints) {
|
|
s.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + title;
|
|
}
|
|
});
|
|
|
|
|
|
document.querySelectorAll("#"+active_group+" .folder").forEach(function(s){
|
|
if (opt.show_counter_tabs && bgfolders[s.id]) {
|
|
s.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + bgfolders[s.id].name;
|
|
}
|
|
if (opt.show_counter_tabs_hints && bgfolders[s.id]) {
|
|
s.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + bgfolders[s.id].name;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
async function RefreshTabCounter(tabId) {
|
|
let t = document.getElementById(tabId);
|
|
if (t.childNodes[0]) {
|
|
let title = t.childNodes[0].getAttribute("tabTitle");
|
|
if (t != null && title != null) {
|
|
if (t.classList.contains("o") || t.classList.contains("c")) {
|
|
if (opt.show_counter_tabs) {
|
|
t.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
|
|
}
|
|
if (opt.show_counter_tabs_hints) {
|
|
t.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + t.id + "'] .tab").length +") ") + title;
|
|
}
|
|
} else {
|
|
t.childNodes[0].title = title;
|
|
t.childNodes[0].childNodes[1].textContent = title;
|
|
}
|
|
}
|
|
}
|
|
}
|