decorations: add support for gtk4 applications

unite@hardpixel.eu/handlers.js

@@ -9,7 +9,8 @@ const SETTINGS = Convenience.getSettings()
 const WM_PREFS = Convenience.getPreferences()
 
 const USER_CONFIG = GLib.get_user_config_dir()
-const USER_STYLES = `${USER_CONFIG}/gtk-3.0/gtk.css`
+const USER_STYLES_GTK3 = `${USER_CONFIG}/gtk-3.0/gtk.css`
+const USER_STYLES_GTK4 = `${USER_CONFIG}/gtk-4.0/gtk.css`
 
 function fileExists(path) {
   return GLib.file_test(path, GLib.FileTest.EXISTS)
@@ -36,13 +37,13 @@ function setFileContents(path, contents) {
   GLib.file_set_contents(path, contents)
 }
 
-function resetGtkStyles() {
-  let style = getFileContents(USER_STYLES)
+function resetGtkStyles(filepath) {
+  let style = getFileContents(filepath)
 
   style = style.replace(/\/\* UNITE ([\s\S]*?) UNITE \*\/\n/g, '')
   style = style.replace(/@import.*unite@hardpixel\.eu.*css['"]\);\n/g, '')
 
-  setFileContents(USER_STYLES, style)
+  setFileContents(filepath, style)
 }
 
 var Signals = class Signals {
@@ -154,22 +155,23 @@ var WidgetStyle = class WidgetStyle {
 }
 
 var GtkStyle = class GtkStyle {
-  constructor(name, contents) {
+  constructor(filepath, name, contents) {
+    this.filepath = filepath
     this.contents = `/* UNITE ${name} */\n${contents}\n/* ${name} UNITE */\n`
   }
 
   get existing() {
-    return getFileContents(USER_STYLES)
+    return getFileContents(this.filepath)
   }
 
   load() {
     const style = this.contents + this.existing
-    setFileContents(USER_STYLES, style)
+    setFileContents(this.filepath, style)
   }
 
   unload() {
     const style = this.existing.replace(this.contents, '')
-    setFileContents(USER_STYLES, style)
+    setFileContents(this.filepath, style)
   }
 }
 
@@ -214,9 +216,14 @@ var Styles = class Styles {
     this.setStyle(name, WidgetStyle, widget, styles)
   }
 
-  addGtkStyle(name, contents) {
+  addGtk3Style(name, contents) {
     this.deleteStyle(name)
-    this.setStyle(name, GtkStyle, name, contents)
+    this.setStyle(name, GtkStyle, USER_STYLES_GTK3, name, contents)
+  }
+
+  addGtk4Style(name, contents) {
+    this.deleteStyle(name)
+    this.setStyle(name, GtkStyle, USER_STYLES_GTK4, name, contents)
   }
 
   removeAll() {
@@ -226,4 +233,5 @@ var Styles = class Styles {
   }
 }
 
-resetGtkStyles()
+resetGtkStyles(USER_STYLES_GTK3)
+resetGtkStyles(USER_STYLES_GTK4)

unite@hardpixel.eu/styles/gtk4/buttons-left/always.css

@@ -0,0 +1,22 @@
+window headerbar:not(.selection-mode),
+window .titlebar:not(.selection-mode) {
+  padding-left: 0;
+}
+
+window headerbar ~ headerbar:not(.selection-mode),
+window headerbar ~ .titlebar:not(.selection-mode),
+window .titlebar ~ .titlebar:not(.selection-mode),
+window .titlebar ~ headerbar:not(.selection-mode) {
+  padding-left: 6px;
+}
+
+window headerbar windowcontrols.start,
+window .titlebar windowcontrols.start {
+  margin: 0 0 0 -200px;
+  opacity: 0;
+}
+
+window .titlebar.default-decoration {
+  margin: -200px 0 0;
+  opacity: 0;
+}

unite@hardpixel.eu/styles/gtk4/buttons-left/both.css

@@ -0,0 +1,2 @@
+@import "maximized.css";
+@import "tiled.css";

unite@hardpixel.eu/styles/gtk4/buttons-left/maximized.css

@@ -0,0 +1,22 @@
+.maximized headerbar:not(.selection-mode),
+.maximized .titlebar:not(.selection-mode) {
+  padding-left: 0;
+}
+
+.maximized headerbar ~ headerbar:not(.selection-mode),
+.maximized headerbar ~ .titlebar:not(.selection-mode),
+.maximized .titlebar ~ .titlebar:not(.selection-mode),
+.maximized .titlebar ~ headerbar:not(.selection-mode) {
+  padding-left: 6px;
+}
+
+.maximized headerbar windowcontrols.start,
+.maximized .titlebar windowcontrols.start {
+  margin: 0 0 0 -200px;
+  opacity: 0;
+}
+
+.maximized .titlebar.default-decoration {
+  margin: -200px 0 0;
+  opacity: 0;
+}

unite@hardpixel.eu/styles/gtk4/buttons-left/tiled.css

@@ -0,0 +1,22 @@
+.tiled headerbar:not(.selection-mode),
+.tiled .titlebar:not(.selection-mode) {
+  padding-left: 0;
+}
+
+.tiled headerbar ~ headerbar:not(.selection-mode),
+.tiled headerbar ~ .titlebar:not(.selection-mode),
+.tiled .titlebar ~ .titlebar:not(.selection-mode),
+.tiled .titlebar ~ headerbar:not(.selection-mode) {
+  padding-left: 6px;
+}
+
+.tiled headerbar windowcontrols.start,
+.tiled .titlebar windowcontrols.start {
+  margin: 0 0 0 -200px;
+  opacity: 0;
+}
+
+.tiled .titlebar.default-decoration {
+  margin: -200px 0 0;
+  opacity: 0;
+}

unite@hardpixel.eu/styles/gtk4/buttons-right/always.css

@@ -0,0 +1,20 @@
+window > headerbar:not(.selection-mode),
+window > .titlebar:not(.selection-mode),
+window > headerbar > headerbar:not(.selection-mode),
+window > .titlebar > .titlebar:not(.selection-mode),
+window > .titlebar > stack > headerbar:not(.selection-mode),
+window headerbar:last-child:not(.selection-mode),
+window .titlebar:last-child:not(.selection-mode) {
+  padding-right: 0;
+}
+
+window headerbar windowcontrols.end,
+window .titlebar windowcontrols.end {
+  margin: 0 -200px 0 0;
+  opacity: 0;
+}
+
+window .titlebar.default-decoration {
+  margin: -200px 0 0;
+  opacity: 0;
+}

unite@hardpixel.eu/styles/gtk4/buttons-right/both.css

@@ -0,0 +1,2 @@
+@import "maximized.css";
+@import "tiled.css";

unite@hardpixel.eu/styles/gtk4/buttons-right/maximized.css

@@ -0,0 +1,20 @@
+.maximized > headerbar:not(.selection-mode),
+.maximized > .titlebar:not(.selection-mode),
+.maximized > headerbar > headerbar:not(.selection-mode),
+.maximized > .titlebar > .titlebar:not(.selection-mode),
+.maximized > .titlebar > stack > headerbar:not(.selection-mode),
+.maximized headerbar:last-child:not(.selection-mode),
+.maximized .titlebar:last-child:not(.selection-mode) {
+  padding-right: 0;
+}
+
+.maximized headerbar windowcontrols.end,
+.maximized .titlebar windowcontrols.end {
+  margin: 0 -200px 0 0;
+  opacity: 0;
+}
+
+.maximized .titlebar.default-decoration {
+  margin: -200px 0 0;
+  opacity: 0;
+}

unite@hardpixel.eu/styles/gtk4/buttons-right/tiled.css

@@ -0,0 +1,20 @@
+.tiled > headerbar:not(.selection-mode),
+.tiled > .titlebar:not(.selection-mode),
+.tiled > headerbar > headerbar:not(.selection-mode),
+.tiled > .titlebar > .titlebar:not(.selection-mode),
+.tiled > .titlebar > stack > headerbar:not(.selection-mode),
+.tiled headerbar:last-child:not(.selection-mode),
+.tiled .titlebar:last-child:not(.selection-mode) {
+  padding-right: 0;
+}
+
+.tiled headerbar windowcontrols.end,
+.tiled .titlebar windowcontrols.end {
+  margin: 0 -200px 0 0;
+  opacity: 0;
+}
+
+.tiled .titlebar.default-decoration {
+  margin: -200px 0 0;
+  opacity: 0;
+}

unite@hardpixel.eu/window.js

@@ -468,12 +468,14 @@ var WindowManager = GObject.registerClass(
     _onStylesChange() {
       if (this.hideTitlebars != 'never') {
         const variant = this.settings.get('window-buttons-position')
-        const folder  = `${Unite.path}/styles/buttons-${variant}`
-        const content = `@import url('${folder}/${this.hideTitlebars}.css');`
+        const folder  = path => `${Unite.path}/styles/${path}/buttons-${variant}`
+        const content = path => `@import url('${folder(path)}/${this.hideTitlebars}.css');`
 
-        this.styles.addGtkStyle('windowDecorations', content)
+        this.styles.addGtk3Style('windowDecorationsGTK3', content('gtk3'))
+        this.styles.addGtk4Style('windowDecorationsGTK4', content('gtk4'))
       } else {
-        this.styles.deleteStyle('windowDecorations')
+        this.styles.deleteStyle('windowDecorationsGTK3')
+        this.styles.deleteStyle('windowDecorationsGTK4')
       }
     }