[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 4387aadf6317deda38b7e833b13b46f7cd33a224
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 |   26 +++++++++++++++---
 gtk/theme/Adwaita/gtk-contained.css      |   26 +++++++++++++++---
 4 files changed, 122 insertions(+), 13 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..aca9c00 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); }
@@ -1852,9 +1870,9 @@ headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.tit
 
 headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { 
-gtk-icon-shadow: none; }
 
-.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, 
iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #215d9c; }
+.view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #215d9c; }
 
-row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview 
text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview 
text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text 
selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, 
spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { color: #ffffff; }
+row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
.view:selected, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view 
text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview 
text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, 
treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
 
 row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview 
text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview 
text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text 
selection:disabled, iconview text selection:disabled, textview text selection:disabled, flowbox 
flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, entry 
selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, 
row:disabled:selected, calendar:disabled:selected { color: #90aece; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 9fa66b7..9b2e76e 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); }
@@ -1872,9 +1890,9 @@ headerbar.selection-mode button.titlebutton, .titlebar.selection-mode button.tit
 
 headerbar.selection-mode button.titlebutton:backdrop, .titlebar.selection-mode button.titlebutton:backdrop { 
-gtk-icon-shadow: none; }
 
-.view:selected:focus, iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, 
iconview text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #4a90d9; }
+.view:selected:focus, .view:selected, iconview:selected, .view text:selected, iconview text:selected, 
textview text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, 
iconview text selection, textview text selection:focus, textview text selection, flowbox 
flowboxchild:selected, spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { background-color: #4a90d9; }
 
-row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
iconview:selected:focus, .view:selected, iconview:selected, .view text:selected:focus, iconview 
text:selected:focus, textview text:selected:focus, .view text:selected, iconview text:selected, textview 
text:selected, .view text selection:focus, iconview text selection:focus, .view text selection, iconview text 
selection, textview text selection:focus, textview text selection, flowbox flowboxchild:selected, 
spinbutton:not(.vertical) selection, entry selection, modelbutton.flat:selected, 
.menuitem.button.flat:selected, treeview.view:selected:focus, treeview.view:selected, row:selected, 
calendar:selected { color: #ffffff; }
+row:selected label, label:selected, .selection-mode button.titlebutton, .view:selected:focus, 
.view:selected, iconview:selected, .view text:selected, iconview text:selected, textview text:selected, .view 
text selection:focus, iconview text selection:focus, .view text selection, iconview text selection, textview 
text selection:focus, textview text selection, flowbox flowboxchild:selected, spinbutton:not(.vertical) 
selection, entry selection, modelbutton.flat:selected, .menuitem.button.flat:selected, 
treeview.view:selected:focus, treeview.view:selected, row:selected, calendar:selected { color: #ffffff; }
 
 row:selected label:disabled, label:disabled:selected, .selection-mode button.titlebutton:disabled, 
iconview:disabled:selected:focus, .view:disabled:selected, iconview:disabled:selected, iconview 
text:disabled:selected:focus, textview text:disabled:selected:focus, .view text:disabled:selected, iconview 
text:disabled:selected, textview text:disabled:selected, iconview text selection:disabled:focus, .view text 
selection:disabled, iconview text selection:disabled, textview text selection:disabled, flowbox 
flowboxchild:disabled:selected, label:disabled selection, spinbutton:not(.vertical) selection:disabled, entry 
selection:disabled, modelbutton.flat:disabled:selected, .menuitem.button.flat:disabled:selected, 
row:disabled:selected, calendar:disabled:selected { color: #a5c8ec; }