Sidebery replacement for Zen Browser Tabs

zen-sidebery.js

// Fetch first extension matching the name if any

let sidebery_policy = WebExtensionPolicy.getActiveExtensions().filter((ext) => ext.name == "Sidebery")[0]
let sidebery_browser;
let init_sidebery_browser;

if (sidebery_policy) {
	let sidebery_extension = sidebery_policy.extension;
	let sidebery_uri = sidebery_extension.manifest.sidebar_action.default_panel;

	sidebery_policy.baseCSP = "script-src 'self' https://* http://localhost:* http://127.0.0.1:* moz-extension: blob: filesystem: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline' chrome:;"

	// add a separate <browser> element outside of sidebar
	sidebery_browser = document.createXULElement("browser");
	sidebery_browser.setAttribute("id", "sidebery");
	sidebery_browser.setAttribute("type", "content");
	sidebery_browser.setAttribute("flex", "1");
	sidebery_browser.setAttribute("disableglobalhistory", "true");
	sidebery_browser.setAttribute("messagemanagergroup", "webext-browsers");
	//sidebery_browser.setAttribute("webextension-view-type", "sidebar"); // needed?
	//sidebery_browser.setAttribute("context", "contentAreaContextMenu"); // replace with tab are context menu?
	//sidebery_browser.setAttribute("tooltip", "aHTMLTooltip"); //replace with tab area tooltip?
	sidebery_browser.setAttribute("autocompletepopup", "PopupAutoComplete");
	sidebery_browser.setAttribute("transparent", "true");
	// Ensure that the browser is going to run in the same bc group as the other
	// extension pages from the same addon.
	sidebery_browser.setAttribute("initialBrowsingContextGroupId", sidebery_policy.browsingContextGroupId);
	sidebery_browser.setAttribute("remote", "true"); // absolutely nece
	// sidebery_browser.setAttribute("remote", "false");
	sidebery_browser.setAttribute("remoteType", "extension"	);
	//sidebery_browser.setAttribute("maychangeremoteness", "true");
	sidebery_browser.setAttribute("src", sidebery_uri); //moz-extension://975176be-3729-46a4-84fc-204e044f42d3/sidebar/sidebar.html
	//sidebery_browser.setAttribute("src", "chrome://browser/content/webext-panels.xhtml");

	//let readyPromise = promiseEvent(browser, "XULFrameLoaderCreated");

	const oldTabsContainer = document.querySelector("#TabsToolbar-customization-target");

	oldTabsContainer.insertAdjacentElement('beforebegin', sidebery_browser);

	//keep inner browser zoom in sync with outer
	sidebery_browser.addEventListener(
	"DoZoomEnlargeBy10",
		() => {
		  let { ZoomManager } = browser.ownerGlobal;
		  let zoom = browser.fullZoom;
		  zoom += 0.1;
		  if (zoom > ZoomManager.MAX) {
		    zoom = ZoomManager.MAX;
		  }
		  browser.fullZoom = zoom;
		},true
	);
	
	sidebery_browser.addEventListener(
	"DoZoomReduceBy10",
		() => {
		  let { ZoomManager } = browser.ownerGlobal;
		  let zoom = browser.fullZoom;
		  zoom -= 0.1;
		  if (zoom < ZoomManager.MIN) {
		    zoom = ZoomManager.MIN;
		  }
		  browser.fullZoom = zoom;
		}, true
	);

	// ignore window close command
	sidebery_browser.addEventListener("DOMWindowClose", event => {event.stopPropagation();});

	init_sidebery_browser = () => {
		oldTabsContainer.style.display = "none";
		let { ExtensionParent } = ChromeUtils.importESModule(
		  "resource://gre/modules/ExtensionParent.sys.mjs"
		);
		
    	ExtensionParent.apiManager.emit(
      		"extension-browser-inserted",
      		sidebery_browser,
      		null
    	);
	
		sidebery_browser.messageManager.loadFrameScript(
		  "chrome://extensions/content/ext-browser-content.js",
		  false,
		  true
		);
		
		let options = {};
		options.stylesheets = ["chrome://browser/content/extension.css"];
		sidebery_browser.messageManager.sendAsyncMessage("Extension:InitBrowser", options);
		console.log("Initialized Native Sidebery");

		
		//sidebery.contentDocument.querySelector("html").style.backgroundColor = "transparent";
		
	};
	
	//sidebery_browser.addEventListener("DidChangeBrowserRemoteness", init_sidebery_browser);
	//sidebery_browser.addEventListener("XULFrameLoaderCreated", init_sidebery_browser);
	//sidebery_browser.onload = init_sidebery_browser;
	//sidebery_browser.addEventListener("load", init_sidebery_browser);
	oldTabsContainer.style.display = "none";
}

To get Sidebery looking more native, add the Zen CSS variables to your Sidebery Custom CSS settings. For just the background to match, add this under Sidebery Settings -> Styles editor -> Sidebar:

#root.root {--frame-bg: transparent;}
#root.root {--toolbar-bg: transparent;}
:root {background-color: transparent;}

Coming Soon:

• Highlighting all open tabs when in split screen, rather than just the first
• Collapsing to icons (compact)
• Drop-in userChrome.js permanent install
• Actual Zen Mod (when documentation for js mods arrives)