[Share] Change Title Bar Style

[windingwind]

Description

Change title bar style at startup: old-fashioned to modern. More vertical space.

Only for Windows & Linux.

Old	New

Event

Main Window Load

Operation

Script

Data

/**
 * Change Title Bar Style
 * @author windingwind
 * @usage Change title bar style at startup
 * @link https://github.com/windingwind/zotero-actions-tags/discussions/
 * @see https://github.com/windingwind/zotero-actions-tags/discussions/
 */
if (Zotero.isMac) {
	return;
}

const document = window.document;

const titleBar = document.querySelector("#titlebar");
titleBar.removeAttribute("hidden");
titleBar.innerHTML = "";
titleBar.append(window.MozXULElement.parseXULToFragment(`
<hbox class="titlebar-icon-container">
	<toolbarbutton class="titlebar-icon"></toolbarbutton>
</hbox>
<hbox class="titlebar-buttonbox-container" skipintoolbarset="true">
	<hbox class="titlebar-buttonbox titlebar-color">
		<toolbarbutton class="titlebar-button titlebar-min"
						oncommand="window.minimize();"
						data-l10n-id="browser-window-minimize-button"
						/>
		<toolbarbutton class="titlebar-button titlebar-max"
						oncommand="window.maximize();"
						data-l10n-id="browser-window-maximize-button"
						/>
		<toolbarbutton class="titlebar-button titlebar-restore"
						oncommand="window.fullScreen ? BrowserFullScreen() : window.restore();"
						data-l10n-id="browser-window-restore-down-button"
						/>
		<toolbarbutton class="titlebar-button titlebar-close"
						oncommand="window.close();"
						data-l10n-id="browser-window-close-button"
						/>
	</hbox>
</hbox>
`));

const mainWindow = document.querySelector("#main-window");

const linkTheme = document.createElement("link");
linkTheme.rel = "stylesheet";
linkTheme.href = "chrome://browser/skin/";

const linkContent = document.createElement("link");
linkContent.rel = "stylesheet";
linkContent.href = "chrome://browser/content/browser.css";

const style = document.createElement("style");
style.textContent = `
#titlebar {
	margin-bottom: -30px;
}

#tab-bar-container {
	--safe-area-start: 0px;
	--safe-area-end: 0px;
}

.tabs {
	-moz-window-dragging: drag;
}

.tab {
	-moz-window-dragging: no-drag;
}

#navigator-toolbox {
	height: 30px;
	-moz-box-pack: center;
}

#toolbar-menubar {
	visibility: visible;
}

.titlebar-close {
	padding-right: 6px;
}

#toolbar-menubar {
	padding-left: 30px;
}

.titlebar-icon-container {
	margin-bottom: -30px;
	height: 30px;
}

.titlebar-icon {
	list-style-image: url('chrome://zotero/skin/zotero-new-z-16px.png');
	-moz-window-dragging: drag;
	padding: 5px 7px 5px 7px;
}

.titlebar-button {
	appearance: none;
	border-radius: 0;
}
.titlebar-button > .toolbarbutton-icon {
	padding: 6px;
	-moz-context-properties: stroke;
	stroke: currentColor;
}
.titlebar-min {
	list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
}
.titlebar-max {
	list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
}
.titlebar-restore {
	list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
}
.titlebar-close {
	list-style-image: url(chrome://browser/skin/window-controls/close.svg);
}
.titlebar-button:hover {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}
.titlebar-button:hover:active {
	background-color: color-mix(in srgb, currentColor 20%, transparent);
}
.titlebar-close:hover {
	background-color: #d70022;
	color: white;
}
.titlebar-close:hover:active {
	background-color: #ff0039;
}

.titlebar-buttonbox-container {
	-moz-box-pack: end;
}
`;

mainWindow.append(linkTheme, linkContent, style);

document.querySelector("#toolbar-menubar").setAttribute("autohide", "false");

require("Zotero_Tabs")._updateTabBar = () => {};

// Create tab bar by default
document.documentElement.setAttribute('drawintitlebar', true);
document.documentElement.setAttribute('tabsintitlebar', true);
document.documentElement.setAttribute('chromemargin', '0,2,2,2');

return;

Anything else

No response

[windingwind]

no. this alert belongs to another plugin, you should ask the author to remove that.

[pad-mac]

this is actually so amazing, cannot thank you enough! i went through a lot of options to find a way to hide the title bar and here just the perfect, automatic solution pops up, wow

[Monkee1337]

Does this work on Zotero 6? I cant seem to get it to work?

[longquanyi]

在win10系统上，7.0.0-beta.68+c31a40c74 (64-bit)版本启用该代码可能会出现“文件、编辑、查看、工具、帮助”一栏消失情况。

[windingwind]

Zotero7-beta55 or higher has native menu-in-titlebar, so no need to run this action.

[longquanyi]

谢谢。