Unify tab bar on Windows/Linux

scss/linux/_menupopup.scss

@@ -1,5 +1,20 @@
 menupopup, panel {
 	--panel-padding-block: 0;
-	--panel-border-radius: 2px;
-	--panel-border-color: ActiveBorder;
-}
+	--panel-border-radius: 6px;
+	--panel-background: var(--material-toolbar);
+	--menuitem-hover-background-color: var(--fill-quinary);
+	--menuitem-disabled-hover-background-color: var(--fill-quinary);
+	@include light-dark(--panel-border-color, #dddddd, #1c1c1c);
+}
+
+menupopup {
+	menu {
+		menupopup {
+			margin-top: -4px;
+		}
+	}
+}
+
+:is(panel, menupopup)::part(content) {
+	padding: 6px 0px 6px 0px;
+}

scss/linux/_tabBar.scss

@@ -0,0 +1,12 @@
+#tab-bar-container {
+	--safe-area-start: 30px;
+	--safe-area-end: 0px;
+}
+
+.tabs {
+	-moz-window-dragging: drag;
+}
+
+.tab {
+	-moz-window-dragging: no-drag;
+}

scss/linux/_titleBar.scss

@@ -0,0 +1,147 @@
+// Prevent window background overflows window border
+#main-window {
+	background-color: initial;
+}
+
+// Prevent background flicker
+#browser {
+	background: var(--material-tabbar);
+}
+
+#navigator-toolbox {
+	height: var(--tab-min-height);
+	-moz-box-pack: center;
+	pointer-events: none;
+}
+
+#toolbar-menubar {
+	pointer-events: none;
+	visibility: visible;
+	// space for 30*30 icon
+	padding-left: var(--tab-min-height);
+}
+
+#menubar-items {
+	pointer-events: all;
+}
+
+#titlebar {
+	pointer-events: none;
+}
+
+.titlebar-buttonbox {
+	pointer-events: all;
+}
+
+.titlebar-icon-container {
+	margin-bottom: calc(0px - var(--tab-min-height));
+	height: var(--tab-min-height);
+}
+
+.titlebar-icon {
+	-moz-window-dragging: drag;
+	// to make the icon 30*30
+	margin: 7px;
+	object-fit: none;
+}
+
+.titlebar-buttonbox-container {
+	-moz-box-pack: end;
+	height: var(--tab-min-height);
+}
+
+// Following rules from https://searchfox.org/mozilla-central/source/browser/themes/linux/browser.css
+
+/* The button box must appear on top of the navigator-toolbox in order for
+ * click and hover mouse events to work properly for the button in the restored
+ * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
+ * can swallow those events. */
+.titlebar-buttonbox {
+	z-index: 1;
+	align-items: center;
+	// Disable button stretch
+	-moz-box-align: baseline;
+}
+
+/* Render titlebar command buttons according to system config.
+ * Use full scale icons here as the Gtk+ does. */
+.titlebar-min {
+	appearance: auto;
+	-moz-default-appearance: -moz-window-button-minimize;
+	order: env(-moz-gtk-csd-minimize-button-position);
+}
+.titlebar-max {
+	appearance: auto;
+	-moz-default-appearance: -moz-window-button-maximize;
+	order: env(-moz-gtk-csd-maximize-button-position);
+}
+.titlebar-restore {
+	appearance: auto;
+	-moz-default-appearance: -moz-window-button-restore;
+	order: env(-moz-gtk-csd-maximize-button-position);
+}
+.titlebar-close {
+	appearance: auto;
+	-moz-default-appearance: -moz-window-button-close;
+	order: env(-moz-gtk-csd-close-button-position);
+}
+
+/* When using lightweight themes, use our own buttons since native ones might
+ * assume a native background in order to be visible. */
+.titlebar-button:-moz-lwtheme {
+	appearance: none;
+	border-radius: 100%;
+}
+.titlebar-button > .toolbarbutton-icon:-moz-lwtheme {
+	padding: 6px;
+	-moz-context-properties: stroke;
+	stroke: currentColor;
+}
+.titlebar-min:-moz-lwtheme {
+	list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
+}
+.titlebar-max:-moz-lwtheme {
+	list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
+}
+.titlebar-restore:-moz-lwtheme {
+	list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
+}
+.titlebar-close:-moz-lwtheme {
+	list-style-image: url(chrome://browser/skin/window-controls/close.svg);
+}
+.titlebar-button:-moz-lwtheme:hover {
+	background-color: color-mix(in srgb, currentColor 12%, transparent);
+}
+.titlebar-button:-moz-lwtheme:hover:active {
+	background-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+.titlebar-close:-moz-lwtheme:hover {
+	background-color: #d70022;
+	color: white;
+}
+.titlebar-close:-moz-lwtheme:hover:active {
+	background-color: #ff0039;
+}
+
+@media (not (-moz-gtk-csd-minimize-button)) {
+	.titlebar-min {
+	display: none;
+	}
+}
+@media (not (-moz-gtk-csd-maximize-button)) {
+	.titlebar-restore,
+	.titlebar-max {
+	display: none;
+	}
+}
+@media (not (-moz-gtk-csd-close-button)) {
+	.titlebar-close {
+	display: none;
+	}
+}
+
+@media (-moz-gtk-csd-reversed-placement) {
+	.titlebar-buttonbox-container {
+	order: -1;
+	}
+}