TreeTabsMigration/scripts/refresh.js

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

// **********          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 = (tt.groups[s.id] ? tt.groups[s.id].name : labels.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 = tt.groups[s.id] ? tt.groups[s.id].name : labels.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;
	let groupsWidth =  document.body.clientWidth - toolbar_groupsWidth - 1;

	groups.style.top = toolbarHeight + pin_listHeight + "px";
	groups.style.left = toolbar_groupsWidth + "px";
	groups.style.height = groupsHeight + "px";
	groups.style.width = groupsWidth + "px";

	// let bottom_floating_buttons = document.getElementById("status_bar");
	// let active_group_tabs = document.getElementById("ct"+tt.active_group);
	// bottom_floating_buttons.style.left = toolbar_groupsWidth + "px";
	// bottom_floating_buttons.style.width = toolbar_groupsWidth + active_group_tabs.clientWidth + "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";
	}
	
	
	let ManagerWindow = document.getElementById("manager_window");
	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");
					t.classList.remove("audible");
					t.classList.remove("muted");
				}
			}
		});
	}
}

// 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 && !tab.discarded) {
					t.classList.remove("audible");
					t.classList.add("muted");
				}
				if (!tab.mutedInfo.muted && tab.audible && !tab.discarded) {
					t.classList.remove("muted");
					t.classList.add("audible");
				}
				if ((!tab.mutedInfo.muted && !tab.audible) || tab.discarded) {
					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 LoadFavicon(tabId, Img, TryUrls, TabHeaderNode, i) {
	if (TabHeaderNode){
		Img.src = TryUrls[i];
		Img.onload = function() {
			TabHeaderNode.style.backgroundImage = "url(" + TryUrls[i] + ")";
			if (browserId == "F") { // cache Firefox favicon - solution for bug with empty favicons in unloaded tabs
				browser.sessions.setTabValue(tabId, "CachedFaviconUrl", TryUrls[i]);
			}
		};
		Img.onerror = function() {
			if (i < TryUrls.length) {
				LoadFavicon(tabId, Img, TryUrls, TabHeaderNode, (i+1));
			}
		}
	}
}

async function GetFaviconAndTitle(tabId, addCounter) {
	let t = document.getElementById(tabId);
	if (t != null) {
		
		let CachedFavicon;
		if (browserId == "F") {
			let ttf = Promise.resolve(browser.sessions.getTabValue(tabId, "CachedFaviconUrl")).then(function(FaviconUrl) {
				CachedFavicon = FaviconUrl;
			});
		}
		
		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" || tab.discarded) {
					t.classList.remove("loading");

					tTitle.textContent = title;
					tHeader.title = title;
					tHeader.setAttribute("tabTitle", title);
	
					let Img = new Image();

					if (browserId != "F") {
						CachedFavicon = "chrome://favicon/"+tab.url;
					}
					let TryCases = [tab.favIconUrl, CachedFavicon, , "./theme/icon_empty.svg"];
					LoadFavicon(tabId, Img, TryCases, tHeader, 0);

				}
				if (tab.status == "loading" && tab.discarded == false) {
					title = tab.title ? tab.title : labels.loading;
					t.classList.add("loading");
					tHeader.style.backgroundImage = "";
					tHeader.title = labels.loading;
					tHeader.setAttribute("tabTitle", labels.loading);
					tTitle.textContent = labels.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("#"+tt.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("#"+tt.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("#"+tt.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("#"+tt.active_group+" .o.tab, #"+tt.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("#"+tt.active_group+" .folder").forEach(function(s){
			if (opt.show_counter_tabs && tt.folders[s.id]) {
				s.childNodes[0].childNodes[1].textContent = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + tt.folders[s.id].name;
			}
			if (opt.show_counter_tabs_hints && tt.folders[s.id]) {
				s.childNodes[0].title = ("("+ document.querySelectorAll("[id='" + s.id + "'] .tab").length +") ") + tt.folders[s.id].name;
			}
		});
	}
}

async function RefreshTabCounter(tabId) {
	let t = document.getElementById(tabId);
	if (t != null && 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;
			}
		}
	}
}