Merge lp:~3v1n0/ubuntu-themes/headerbars-as-titlebar-children-fix into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

Ambiance,Radiance: refactor .titlebar theming to properly support headerbar children

Sometimes we've a widget as titlebar containing two or more headerbars
as children, thus we should paint the background in the parent, and only apply
rounded corners to the first and last headerbars.

So we now define paddings and main theming for .titlebar, while the border
radius only for headerbars.

Code inspired on upstream changes, keeping unity7 working too.

[Didier Roche (didrocks)]

Looking good to me, even if more complicated than I was anticipated :)
Good work!

review: Approve

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2017-09-23 03:58:24 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2017-09-23 03:58:24 +0000
@@ -2152,11 +2152,6 @@
     border-radius: 0;
 }
 
-.titlebar:not(headerbar),
-headerbar {
-    min-height: 26px;
-}
-
 .solid-csd .titlebar:backdrop:dir(rtl):not(headerbar),
 .solid-csd .titlebar:backdrop:dir(ltr):not(headerbar),
 .solid-csd .titlebar:dir(rtl):not(headerbar),
@@ -2185,10 +2180,11 @@
     border-color: @dark_bg_color
 }
 
-.titlebar,
+.titlebar:not(headerbar),
+headerbar:not(.toolbar-mode),
 UnityDecoration .top {
+    min-height: 26px;
     border: 1px solid rgba (0, 3, 5, 0.03); /* shade (@dark_bg_color, 1.04) - shade (@dark_bg_color, 1.5) */
-    border-radius: 6px 6px 0 0;
     padding: 1px 6px 1px 6px;
 
     box-shadow: inset 0 0 transparent, inset 0 0 transparent,
@@ -2204,7 +2200,8 @@
     text-shadow: 1px 0 #333, -1px 0 #333, 0 1px #333, 0 -1px #333;
 }
 
-.titlebar:backdrop,
+.titlebar:not(headerbar):backdrop,
+headerbar:not(.toolbar-mode):backdrop,
 UnityDecoration .top:backdrop {
     border: 1px solid rgba (14, 13, 0, 0.03); /* @dark_bg_color - shade (#474642, 0.92) */;
     background-color: transparent;
@@ -2217,8 +2214,30 @@
     color: #807d78;
 }
 
+UnityDecoration .top,
+.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + headerbar,
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) headerbar:first-child {
+  border-top-left-radius: 6px;
+}
+
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) headerbar:last-child {
+  border-top-right-radius: 6px;
+}
+
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack headerbar:first-child,
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack headerbar:last-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
 .maximized .titlebar,
-.tiled .titlebar {
+.tiled .titlebar,
+.fullscreen .titlebar {
     border-radius: 0;
     border-image: none;
     border: none;
@@ -2230,6 +2249,19 @@
     box-shadow: inset 0 1px shade (@dark_bg_color, 1.6);
 }
 
+window.csd > .titlebar:not(headerbar) {
+    padding: 0;
+    background-color: transparent;
+    /* It would be nice to do this, but it would break separators between
+     * headerbars (as g-c-c has) since we use the border to get the
+     * separator effect here. We can enable this back if we ever just use bg
+     * background-image: none;
+     */
+    border-style: none;
+    border-color: transparent;
+    box-shadow: none;
+}
+
 .titlebar .title {
     font-weight: bold;
 }
@@ -2333,6 +2365,7 @@
 .primary-toolbar,
 /* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */
 :not(.titlebar) > headerbar:not(.titlebar),
+window.csd.unity-csd.maximized .titlebar,
 .titlebar.toolbar-mode {
     -GtkWidget-window-dragging: true;
 
@@ -2354,6 +2387,7 @@
 .primary-toolbar:backdrop,
 /* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */
 :not(.titlebar) > headerbar:not(.titlebar):backdrop,
+window.csd.unity-csd.maximized .titlebar:backdrop,
 .titlebar.toolbar-mode:backdrop {
     background-image: none;
     background-color: @dark_bg_color;
@@ -2366,6 +2400,7 @@
 
 .primary-toolbar:disabled,
 .titlebar.toolbar-mode:disabled,
+window.csd.unity-csd.maximized .titlebar:disabled,
 headerbar:disabled {
     text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
 }

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2017-09-23 03:58:24 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2017-09-23 03:58:24 +0000
@@ -2151,11 +2151,6 @@
     border-radius: 0;
 }
 
-.titlebar:not(headerbar),
-headerbar {
-    min-height: 26px;
-}
-
 .solid-csd .titlebar:backdrop:dir(rtl):not(headerbar),
 .solid-csd .titlebar:backdrop:dir(ltr):not(headerbar),
 .solid-csd .titlebar:dir(rtl):not(headerbar),
@@ -2184,10 +2179,11 @@
     border-color: @dark_bg_color
 }
 
-.titlebar,
+.titlebar:not(headerbar),
+headerbar:not(.toolbar-mode),
 UnityDecoration .top {
+    min-height: 26px;
     border: 1px solid rgba (85, 40, 0, 0.04); /* shade (@dark_bg_color) (shade (#edebe6, 1.06) */
-    border-radius: 6px 6px 0 0;
     padding: 1px 6px 1px 6px;
 
     box-shadow: inset 0 0 transparent, inset 0 0 transparent,
@@ -2204,7 +2200,8 @@
                  0 1px shade (@dark_bg_color, 1.06), 0 -1px shade (@dark_bg_color, 1.06);
 }
 
-.titlebar:backdrop,
+.titlebar:not(headerbar):backdrop,
+headerbar:not(.toolbar-mode):backdrop,
 UnityDecoration .top:backdrop {
     border: 1px solid rgba (110, 27, 0, 0.04); /* shade @dark_bg_color - shade (#edebe6, 0.96) */
     background-color: transparent;
@@ -2220,6 +2217,27 @@
                  0 1px 1px shade (@dark_bg_color, 1.08), 0 -1px 1px shade (@dark_bg_color, 1.08);
 }
 
+UnityDecoration .top,
+.background:not(.tiled):not(.maximized):not(.solid-csd) .titlebar {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) separator:first-child + headerbar,
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) headerbar:first-child {
+  border-top-left-radius: 6px;
+}
+
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) headerbar:last-child {
+  border-top-right-radius: 6px;
+}
+
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack headerbar:first-child,
+window.csd:not(.tiled):not(.maximized):not(.fullscreen):not(.solid-csd) stack headerbar:last-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
 .maximized .titlebar,
 .tiled .titlebar {
     border-radius: 0;
@@ -2233,6 +2251,19 @@
     box-shadow: inset 0 1px shade (#edebe6, 1.08);
 }
 
+window.csd > .titlebar:not(headerbar) {
+    padding: 0;
+    background-color: transparent;
+    /* It would be nice to do this, but it would break separators between
+     * headerbars (as g-c-c has) since we use the border to get the
+     * separator effect here. We can enable this back if we ever just use bg
+     * background-image: none;
+     */
+    border-style: none;
+    border-color: transparent;
+    box-shadow: none;
+}
+
 .titlebar .title {
     font-weight: bold;
 }
@@ -2336,6 +2367,7 @@
 .primary-toolbar,
 /* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */
 :not(.titlebar) > headerbar:not(.titlebar),
+window.csd.unity-csd.maximized .titlebar,
 .titlebar.toolbar-mode {
     -GtkWidget-window-dragging: true;
 
@@ -2357,6 +2389,7 @@
 .primary-toolbar:backdrop,
 /* Workaround for LP: #1689239, selects headerbars used as toolbar in Unity */
 :not(.titlebar) > headerbar:not(.titlebar):backdrop,
+window.csd.unity-csd.maximized .titlebar:backdrop,
 .titlebar.toolbar-mode:backdrop {
     background-image: none;
     background-color: @dark_bg_color;
@@ -2369,6 +2402,7 @@
 
 .primary-toolbar:disabled,
 .titlebar.toolbar-mode:disabled,
+window.csd.unity-csd.maximized .titlebar:disabled,
 headerbar:disabled {
     text-shadow: 0 -1px shade (@dark_bg_color, 0.7);
 }