joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend now looks like firefox and chrome tabs on linux

Browse source
This commit is contained in:
Joe Lothan 2026-05-25 22:53:11 -04:00
parent 7c4572aafb
commit 3ea88790b5
2 changed files with 123 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

48
frontend/site.js
View file

@ -14,16 +14,26 @@ const loadedBundles = new Set();
const container = document.getElementById("tab-container");
const loadingEl = document.getElementById("loading");
// Detect browser and set class on body for tab styling
// Detect browser and OS, set classes on body for tab styling
function detectBrowser() {
const ua = navigator.userAgent;
if (ua.includes("Firefox")) return "firefox";
if (ua.includes("Safari") && !ua.includes("Chrome")) return "safari";
if (ua.includes("Edg/")) return "edge";
if (ua.includes("Safari") && !ua.includes("Chrome") && !ua.includes("CriOS")) return "safari";
return "chrome"; // Chrome, Edge, Opera, Brave, etc.
}
function detectOS() {
const ua = navigator.userAgent;
if (ua.includes("Windows")) return "windows";
if (ua.includes("Macintosh") || ua.includes("Mac OS")) return "mac";
if (ua.includes("iPhone") || ua.includes("iPad")) return "mac";
return "linux"; // Linux, Android, ChromeOS, unknown
}
const browserName = detectBrowser();
document.body.classList.add(`browser-${browserName}`);
const osName = detectOS();
document.body.classList.add(`browser-${browserName}`, `os-${osName}`);
const isFirefox = browserName === "firefox";
console.log(`EveryTab: browser=${browserName}, os=${osName}`);
// How many tabs fit in one row?
function tabsPerRow() {
@ -266,39 +276,47 @@ function openInlineViewer(tabEl, entry, url) {
const viewer = document.createElement("div");
viewer.className = "iframe-viewer";
const header = document.createElement("div");
header.className = "iframe-header";
// Toolbar (address bar area)
const toolbar = document.createElement("div");
toolbar.className = "iframe-toolbar";
// URL bar pill
const urlbar = document.createElement("div");
urlbar.className = "iframe-urlbar";
if (entry.icon) {
const icon = document.createElement("img");
icon.className = "tab-icon";
icon.src = `data:image/png;base64,${entry.icon}`;
header.appendChild(icon);
urlbar.appendChild(icon);
}
const title = document.createElement("span");
title.className = "tab-title";
title.textContent = entry.title || entry.url;
header.appendChild(title);
const link = document.createElement("a");
link.className = "url-text";
link.href = url;
link.target = "_blank";
link.rel = "noopener";
link.textContent = entry.url + " ↗";
header.appendChild(link);
link.textContent = entry.url;
urlbar.appendChild(link);
const urlTitle = document.createElement("span");
urlTitle.className = "url-title";
urlTitle.textContent = entry.title || "";
urlbar.appendChild(urlTitle);
toolbar.appendChild(urlbar);
const close = document.createElement("button");
close.className = "iframe-close";
close.textContent = "✕";
close.addEventListener("click", closeInlineViewer);
header.appendChild(close);
toolbar.appendChild(close);
const iframe = document.createElement("iframe");
iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
iframe.src = url;
viewer.appendChild(header);
viewer.appendChild(toolbar);
viewer.appendChild(iframe);
// Insert after the row