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

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

commit 326cfa20d4490e189e5c7ad5cd9861ff74b7f4ff
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 fb87ca6..ffc8418 100644
--- a/gtk/gtkwindow.c
+++ b/gtk/gtkwindow.c
@@ -7643,10 +7643,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");
@@ -7940,7 +7967,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 3dd8832..4f9457c 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; }}
@@ -4275,6 +4288,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 8596f6f..2c70c49 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; }
 
@@ -1834,6 +1842,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 2ff271f..95f0957 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; }
 
@@ -1854,6 +1862,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); }