[gtk+/wip/gbsneto/edge-constraints: 5/5] window: Add individual CSS classes based on edge constraints

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 40fcee3a4c9fd7f3cf2cac7a0b6773cd1c2e887e
Author: Georges Basile Stavracas Neto <georges stavracas gmail com>
Date:   Fri Aug 18 20:12:23 2017 -0300

    window: Add individual CSS classes based on edge constraints
    
    The last touch on this patch series is making GtkWindow able to
    selectively adjust various UI details based on the different
    tiled edges. The main driver here is that we don't want to show
    shadows on edges that are constrained.
    
    This patch adds the necessary code to do that, while still
    maintaining compatibility with the old ways.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=783669

 gtk/gtkwindow.c                          |   41 ++++++++++++++++++++++++++---
 gtk/theme/Adwaita/_common.scss           |   42 +++++++++++++++++++++++++++++-
 gtk/theme/Adwaita/gtk-contained-dark.css |   22 ++++++++++++++-
 gtk/theme/Adwaita/gtk-contained.css      |   22 ++++++++++++++-
 4 files changed, 118 insertions(+), 9 deletions(-)
---
diff --git a/gtk/gtkwindow.c b/gtk/gtkwindow.c
index 512c360..f267c0a 100644
--- a/gtk/gtkwindow.c
+++ b/gtk/gtkwindow.c
@@ -7633,10 +7633,37 @@ update_window_style_classes (GtkWindow *window)
 
   context = gtk_widget_get_style_context (GTK_WIDGET (window));
 
-  if (priv->tiled)
-    gtk_style_context_add_class (context, "tiled");
+  if (priv->edge_constraints == 0)
+    {
+      if (priv->tiled)
+        gtk_style_context_add_class (context, "tiled");
+      else
+        gtk_style_context_remove_class (context, "tiled");
+    }
   else
-    gtk_style_context_remove_class (context, "tiled");
+    {
+      guint edge_constraints = priv->edge_constraints;
+
+      if (edge_constraints & GDK_WINDOW_STATE_TOP_TILED)
+        gtk_style_context_add_class (context, "tiled-top");
+      else
+        gtk_style_context_remove_class (context, "tiled-top");
+
+      if (edge_constraints & GDK_WINDOW_STATE_RIGHT_TILED)
+        gtk_style_context_add_class (context, "tiled-right");
+      else
+        gtk_style_context_remove_class (context, "tiled-right");
+
+      if (edge_constraints & GDK_WINDOW_STATE_BOTTOM_TILED)
+        gtk_style_context_add_class (context, "tiled-bottom");
+      else
+        gtk_style_context_remove_class (context, "tiled-bottom");
+
+      if (edge_constraints & GDK_WINDOW_STATE_LEFT_TILED)
+        gtk_style_context_add_class (context, "tiled-left");
+      else
+        gtk_style_context_remove_class (context, "tiled-left");
+    }
 
   if (priv->maximized)
     gtk_style_context_add_class (context, "maximized");
@@ -7930,7 +7957,13 @@ gtk_window_state_event (GtkWidget           *widget,
 
   update_edge_constraints (window, event);
 
-  if (event->changed_mask & (GDK_WINDOW_STATE_FULLSCREEN | GDK_WINDOW_STATE_MAXIMIZED | 
GDK_WINDOW_STATE_TILED))
+  if (event->changed_mask & (GDK_WINDOW_STATE_FULLSCREEN |
+                             GDK_WINDOW_STATE_MAXIMIZED |
+                             GDK_WINDOW_STATE_TILED |
+                             GDK_WINDOW_STATE_TOP_TILED |
+                             GDK_WINDOW_STATE_RIGHT_TILED |
+                             GDK_WINDOW_STATE_BOTTOM_TILED |
+                             GDK_WINDOW_STATE_LEFT_TILED))
     {
       update_window_style_classes (window);
       update_window_buttons (window);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index f1e0cea..5e901d7 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1589,6 +1589,7 @@ headerbar {
 
   // squared corners when the window is maximized, tiled, or fullscreen
   .tiled &,
+  .tiled-top &,
   .maximized &,
   .fullscreen & {
     &:backdrop, & {
@@ -1596,6 +1597,14 @@ headerbar {
     }
   }
 
+  .tiled-left & {
+    border-top-left-radius: 0;
+  }
+
+  .tiled-right & {
+    border-top-right-radius: 0;
+  }
+
   &.default-decoration {
     min-height: 28px;
     padding: 4px;
@@ -1636,13 +1645,17 @@ headerbar {
   }
 }
 
-.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar {
+.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar,
+.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar {
   &:backdrop, & {
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
   }
 }
 
+.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar { &:backdrop, & { 
border-top-left-radius: 7px; }}
+.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar { &:backdrop, & { 
border-top-right-radius: 7px; }}
+
 headerbar { // headerbar border rounding
   window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + &, // tackles 
the paned container case
   window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) &:first-child { &:backdrop, & { 
border-top-left-radius: 7px; }}
@@ -4257,6 +4270,33 @@ decoration {
   .fullscreen &,
   .tiled & { border-radius: 0; }
 
+  // Don't round corners on tiled windows
+  .tiled-top &,
+  .tiled-left & { border-top-left-radius: 0; }
+
+  .tiled-top &,
+  .tiled-right & { border-top-right-radius: 0; }
+
+  // Since we cannot have individual box-shadow selectors, special-case
+  // each possible case here.
+
+  // No shadow
+  .tiled-top.tiled-right.tiled-bottom.tiled-left & {
+    box-shadow: 0 0 0 1px $_wm_border;
+  }
+
+  // Right-only
+  .tiled-top.tiled-left.tiled-right & {
+    box-shadow: 3px 0 9px -9px transparentize(black, 0.5),
+                0 0 0 1px $_wm_border;
+  }
+
+  // Left-only
+  .tiled-top.tiled-left.tiled-right & {
+    box-shadow: -3px 0 9px -9px transparentize(black, 0.5),
+                0 0 0 1px $_wm_border;
+  }
+
   .popup & { box-shadow: none; }
 
   // server-side decorations as used by mutter
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 9241893..88b366c 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -648,7 +648,11 @@ searchbar, .location-bar { border-width: 0 0 1px; padding: 3px; }
 
 .selection-mode.titlebar:not(headerbar) .selection-menu:backdrop .arrow, 
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow, headerbar.selection-mode 
.selection-menu:backdrop .arrow, headerbar.selection-mode .selection-menu .arrow { -gtk-icon-source: 
-gtk-icontheme("pan-down-symbolic"); color: rgba(255, 255, 255, 0.5); -gtk-icon-shadow: none; }
 
-.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .maximized headerbar:backdrop, .maximized headerbar, .fullscreen headerbar:backdrop, .fullscreen 
headerbar { border-radius: 0; }
+.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .tiled-top 
.titlebar:backdrop:not(headerbar), .tiled-top .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .tiled-top headerbar:backdrop, .tiled-top headerbar, .maximized headerbar:backdrop, .maximized 
headerbar, .fullscreen headerbar:backdrop, .fullscreen headerbar { border-radius: 0; }
+
+.tiled-left .titlebar:not(headerbar), .tiled-left headerbar { border-top-left-radius: 0; }
+
+.tiled-right .titlebar:not(headerbar), .tiled-right headerbar { border-top-right-radius: 0; }
 
 .default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 4px; }
 
@@ -660,7 +664,11 @@ headerbar entry, headerbar spinbutton, headerbar separator, headerbar button { m
 
 headerbar switch { margin-top: 9px; margin-bottom: 9px; }
 
-.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar { border-top-left-radius: 7px; 
border-top-right-radius: 7px; }
+.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar, 
.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar { border-top-left-radius: 7px; 
border-top-right-radius: 7px; }
+
+.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar { border-top-left-radius: 7px; }
+
+.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar { border-top-right-radius: 7px; }
 
 window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + 
headerbar:backdrop, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child 
+ headerbar, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) 
headerbar:first-child:backdrop, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) 
headerbar:first-child { border-top-left-radius: 7px; }
 
@@ -1830,6 +1838,16 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration, .tiled decoration { border-radius: 0; }
 
+.tiled-top decoration, .tiled-left decoration { border-top-left-radius: 0; }
+
+.tiled-top decoration, .tiled-right decoration { border-top-right-radius: 0; }
+
+.tiled-top.tiled-right.tiled-bottom.tiled-left decoration { box-shadow: 0 0 0 1px rgba(27, 31, 32, 0.9); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: 3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(27, 31, 32, 0.9); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: -3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(27, 31, 32, 0.9); }
+
 .popup decoration { box-shadow: none; }
 
 .ssd decoration { box-shadow: 0 0 0 1px rgba(27, 31, 32, 0.9); }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 9fa66b7..47ffe69 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -656,7 +656,11 @@ searchbar, .location-bar { border-width: 0 0 1px; padding: 3px; }
 
 .selection-mode.titlebar:not(headerbar) .selection-menu:backdrop .arrow, 
.selection-mode.titlebar:not(headerbar) .selection-menu .arrow, headerbar.selection-mode 
.selection-menu:backdrop .arrow, headerbar.selection-mode .selection-menu .arrow { -gtk-icon-source: 
-gtk-icontheme("pan-down-symbolic"); color: rgba(255, 255, 255, 0.5); -gtk-icon-shadow: none; }
 
-.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .maximized headerbar:backdrop, .maximized headerbar, .fullscreen headerbar:backdrop, .fullscreen 
headerbar { border-radius: 0; }
+.tiled .titlebar:backdrop:not(headerbar), .tiled .titlebar:not(headerbar), .tiled-top 
.titlebar:backdrop:not(headerbar), .tiled-top .titlebar:not(headerbar), .maximized 
.titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .fullscreen 
.titlebar:backdrop:not(headerbar), .fullscreen .titlebar:not(headerbar), .tiled headerbar:backdrop, .tiled 
headerbar, .tiled-top headerbar:backdrop, .tiled-top headerbar, .maximized headerbar:backdrop, .maximized 
headerbar, .fullscreen headerbar:backdrop, .fullscreen headerbar { border-radius: 0; }
+
+.tiled-left .titlebar:not(headerbar), .tiled-left headerbar { border-top-left-radius: 0; }
+
+.tiled-right .titlebar:not(headerbar), .tiled-right headerbar { border-top-right-radius: 0; }
 
 .default-decoration.titlebar:not(headerbar), headerbar.default-decoration { min-height: 28px; padding: 4px; }
 
@@ -668,7 +672,11 @@ headerbar entry, headerbar spinbutton, headerbar separator, headerbar button { m
 
 headerbar switch { margin-top: 9px; margin-bottom: 9px; }
 
-.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar { border-top-left-radius: 7px; 
border-top-right-radius: 7px; }
+.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar, 
.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled-top):not(.maximized):not(.solid-csd) .titlebar { border-top-left-radius: 7px; 
border-top-right-radius: 7px; }
+
+.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled-left):not(.maximized):not(.solid-csd) .titlebar { border-top-left-radius: 7px; }
+
+.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar:backdrop, 
.background:not(.tiled-right):not(.maximized):not(.solid-csd) .titlebar { border-top-right-radius: 7px; }
 
 window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + 
headerbar:backdrop, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child 
+ headerbar, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) 
headerbar:first-child:backdrop, window:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) 
headerbar:first-child { border-top-left-radius: 7px; }
 
@@ -1850,6 +1858,16 @@ decoration:backdrop { box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(
 
 .maximized decoration, .fullscreen decoration, .tiled decoration { border-radius: 0; }
 
+.tiled-top decoration, .tiled-left decoration { border-top-left-radius: 0; }
+
+.tiled-top decoration, .tiled-right decoration { border-top-right-radius: 0; }
+
+.tiled-top.tiled-right.tiled-bottom.tiled-left decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: 3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(0, 0, 0, 0.23); }
+
+.tiled-top.tiled-left.tiled-right decoration { box-shadow: -3px 0 9px -9px rgba(0, 0, 0, 0.5), 0 0 0 1px 
rgba(0, 0, 0, 0.23); }
+
 .popup decoration { box-shadow: none; }
 
 .ssd decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.23); }