💄 Add support for native titlebars using NativeTitlebar module

app/profile/dot.js

@@ -35,4 +35,7 @@ pref("widget.use-xdg-desktop-portal.file-picker", 1);
 pref("extensions.getAddons.showPane", false);
 
 // Show warning for about:config
-pref("browser.aboutConfig.showWarning", true);
+pref("browser.aboutConfig.showWarning", true);
+
+// Determines whether the window should have a native titlebar
+pref("dot.window.use-native-titlebar", false);

base/content/browser-init.ts

@@ -50,6 +50,10 @@ var { nsBrowserAccess } = ChromeUtils.importESModule(
     "resource:///modules/DotBrowserWindow.sys.mjs"
 );
 
+var { NativeTitlebar } = ChromeUtils.importESModule(
+    "resource:///modules/NativeTitlebar.sys.mjs"
+);
+
 // Ensure that these icons match up with the actual page favicon
 // Reflect any changes here with components/tabs/BrowserTabs.sys.mjs
 const gPageIcons = {
@@ -94,6 +98,8 @@ var gDotInit = {
 			}
 		}
 
+        NativeTitlebar.init(document);
+
 		new LightweightThemeConsumer(document);
 
 		// Check whether we are on Windows 8, if so apply a dark window frame if it is dark enough

base/content/browser.ts

@@ -15,6 +15,10 @@ var { BrowserTabs } = ChromeUtils.importESModule(
 	"resource:///modules/BrowserTabs.sys.mjs"
 );
 
+var { NativeTitlebar } = ChromeUtils.importESModule(
+    "resource:///modules/NativeTitlebar.sys.mjs"
+);
+
 // This is exported only for type checking reasons, this should never be imported directly
 export const _gDot = {
 	_done: false,
@@ -49,6 +53,10 @@ export const _gDot = {
         );
     },
 
+    get usesNativeTitlebar() {
+        return NativeTitlebar.enabled;
+    },
+
 	/**
 	 * Initialises the browser and its components
 	 */

base/content/browser.xhtml

@@ -19,12 +19,6 @@
     data-l10n-id="browser-main-window-window-titles"
     data-l10n-args="{"content-title":"CONTENTTITLE"}"
     data-l10n-attrs="data-content-title-default, data-content-title-private, data-title-default, data-title-private"
-#ifdef XP_WIN
-    chromemargin="0,2,2,2"
-#else
-    chromemargin="0,-1,-1,-1"
-#endif
-    tabsintitlebar="true"
     windowtype="navigator:browser"
     macanimationtype="document"
     macnativefullscreen="true"

components/csd/NativeTitlebar.sys.mjs

@@ -0,0 +1,96 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+var { AppConstants } = ChromeUtils.importESModule(
+    "resource://gre/modules/AppConstants.sys.mjs"
+);
+
+export const NativeTitlebar = {
+    QueryInterface: ChromeUtils.generateQI([
+        "nsIObserver",
+        "nsIContentPrefObserver",
+        "nsISupportsWeakReference",
+    ]),
+
+    _doc: null,
+
+    _enabled: Services.prefs.getBoolPref(
+        "dot.window.use-native-titlebar",
+        false
+    ),
+
+    /**
+     * Determines whether we are using a native titlebar
+     */
+    get enabled() {
+        return this._enabled;
+    },
+
+    /**
+     * @deprecated
+     */
+    set enabled(newVal) {
+        throw new Error(
+            "NativeTitlebar.enabled setter should not be used! See NativeTitlebar.set() instead."
+        );
+    },
+
+    /**
+     * Sets the state of the native titlebar
+     * @param {boolean} enabled 
+     * @param {boolean} permanent - Whether the state should persist between restarts
+     */
+    set(enabled, permanent) {
+        if (enabled) {
+            this._doc.documentElement.removeAttribute("chromemargin");
+        } else {
+            this._doc.documentElement.setAttribute(
+                "chromemargin",
+                AppConstants.platform == "macosx"
+                    ? "0,-1,-1,-1"
+                    : "0,2,2,2"
+            );
+        }
+
+        this._enabled = enabled;
+
+        if (permanent) {
+            Services.prefs.setBoolPref(
+                "dot.window.use-native-titlebar",
+                enabled
+            );
+        }
+    },
+
+    /**
+     * Observes preference changes
+     * @param {any} subject 
+     * @param {any} topic 
+     * @param {any} data 
+     */
+    observe(subject, topic, data) {
+        switch (data) {
+            case "dot.window.use-native-titlebar":
+                const val = Services.prefs.getBoolPref(
+                    "dot.window.use-native-titlebar"
+                );
+
+                // Make sure the change is permanent
+                this.set(val, true);
+                break;
+        }
+    },
+
+    /**
+     * Initialises the NativeTitlebar module
+     * @param {Document} doc 
+     */
+    init(doc) {
+        this._doc = doc;
+
+        this.set(this.enabled, false);
+
+        Services.prefs.addObserver("dot.window.", this);
+    }
+}

components/csd/content/browser-window-controls.css

@@ -7,6 +7,11 @@ browser-window-controls {
     gap: 0.1rem;
 }
 
+:root[chromemargin=""] browser-window-controls,
+:root:not([chromemargin]) browser-window-controls {
+    display: none;
+}
+
 :root[chromepopup] browser-window-controls .control-min {
     display: none;
 }

components/csd/moz.build

@@ -4,4 +4,8 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-JAR_MANIFESTS += ["jar.mn"]
+JAR_MANIFESTS += ["jar.mn"]
+
+EXTRA_JS_MODULES += [
+    "NativeTitlebar.sys.mjs",
+]

modules_registry.mjs

@@ -9,6 +9,7 @@ const registry = {
     DotWindowTracker: "modules/DotWindowTracker.sys.mjs",
     BrowserCompatibility: "components/compat/BrowserCompatibility.sys.mjs",
     BrowserTabs: "components/tabs/BrowserTabs.sys.mjs",
+    NativeTitlebar: "components/csd/NativeTitlebar.sys.mjs",
     NavigationHelper: "components/navigation/NavigationHelper.sys.mjs",
     StartPage: "components/startpage/StartPage.sys.mjs",
     TabProgressListener: "components/tabs/TabProgressListener.sys.mjs"

themes/linux/browser.css

@@ -12,12 +12,12 @@
 
 /* Apply GTK rounded top corners */
 @media (-moz-gtk-csd-available) {
-    :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) {
+    :root:not([chromemargin=""])[chromemargin][sizemode="normal"]:not([gtktiledwindow="true"]) {
         -moz-default-appearance: -moz-window-titlebar;
         appearance: auto;
     }
 
-    :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) body {
+    :root:not([chromemargin=""])[chromemargin][sizemode="normal"]:not([gtktiledwindow="true"]) body {
         border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
         border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
     }

themes/shared/browser-shared.css

@@ -160,6 +160,6 @@ hr.fdn-separator {
     width: 100%;
 }
 
-#toolbox {
+:root[chromemargin]:not([chromemargin=""]) #toolbox {
     -moz-window-dragging: drag;
 }