commit 46fd2136aa799bb17dfb1002278f98e6397e5806
author James Ye <jamesye@google.com> Wed Mar 23 15:26:36 2022 +1100
committer Chromeos LUCI <chromeos-scoped@luci-project-accounts.iam.gserviceaccount.com> Fri Apr 01 06:25:17 2022 +0000
tree 7b93178709970757d72325b63d06bc6935e825c3
parent e0f70fcd7b4ca9e83c6dc57f74dd4ce53cedee0b

Fix CSD titlebar buttons in Firefox

CSS rules for the GtkImage in CSD/GtkHeaderBar decorations do not work
in Firefox. Move these rules to the parent GtkButton with the
.titlebutton class.

BUG=b:226273525
TEST=Enable CSD in Firefox 91.7.0esr, 98.0
     Checked for no visual differences in normal GtkHeaderBars.

Change-Id: I58ea8b1d47f7057857f7c8c3452dd2efbc88a39b
Reviewed-on: https://chromium-review.googlesource.com/c/chromiumos/third_party/cros-adapta/+/3543230
Reviewed-by: Fergus Dall <sidereal@google.com>
Commit-Queue: James Ye <jamesye@google.com>
Tested-by: James Ye <jamesye@google.com>

gtk-3.0/window.css

diff --git a/gtk-3.0/window.css b/gtk-3.0/window.css
index aa2853d..ec43b98 100644
--- a/gtk-3.0/window.css
+++ b/gtk-3.0/window.css
@@ -41,65 +41,65 @@
   min-height: 32px;
   padding: 0;
   margin: 0 1px 0 1px;
-}
-
-.titlebar .titlebutton image {
-  color: transparent;
   background-size: 38%, 90%;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-.titlebar .titlebutton.maximize image {
+.titlebar .titlebutton image {
+  color: transparent;
+}
+
+.titlebar .titlebutton.maximize {
   background-image: url("assets/Window/maximize.svg"),
                     url("assets/Window/background.svg");
 }
-.titlebar .titlebutton.maximize:hover image,
-.titlebar .titlebutton.maximize:hover:backdrop image {
+.titlebar .titlebutton.maximize:hover,
+.titlebar .titlebutton.maximize:hover:backdrop {
   background-image: url("assets/Window/maximize.svg"),
                     url("assets/Window/background_hover.svg");
 }
-.titlebar .titlebutton.maximize:backdrop image {
+.titlebar .titlebutton.maximize:backdrop {
   background-image: url('assets/Window/maximize_backdrop.svg'),
                     url("assets/Window/background.svg");
 }
-.maximized .titlebar .titlebutton.maximize image {
+.maximized .titlebar .titlebutton.maximize {
   background-image: url('assets/Window/restore.svg'),
                     url("assets/Window/background.svg");
 }
-.maximized .titlebar .titlebutton.maximize:hover image,
-.maximized .titlebar .titlebutton.maximize:hover:backdrop image {
+.maximized .titlebar .titlebutton.maximize:hover,
+.maximized .titlebar .titlebutton.maximize:hover:backdrop {
   background-image: url('assets/Window/restore.svg'),
                     url('assets/Window/background_hover.svg');
 }
-.maximized .titlebar .titlebutton.maximize:backdrop image,
-.maximized .titlebar .titlebutton.maximize:hover:backdrop image {
+.maximized .titlebar .titlebutton.maximize:backdrop,
+.maximized .titlebar .titlebutton.maximize:hover:backdrop {
   background-image: url('assets/Window/restore_backdrop.svg'),
                     url("assets/Window/background.svg");
 }
-.titlebar .titlebutton.minimize image {
+.titlebar .titlebutton.minimize {
   background-image: url("assets/Window/minimize.svg"),
                     url("assets/Window/background.svg");
 }
-.titlebar .titlebutton.minimize:hover image,
-.titlebar .titlebutton.minimize:hover:backdrop image {
+.titlebar .titlebutton.minimize:hover,
+.titlebar .titlebutton.minimize:hover:backdrop {
   background-image: url("assets/Window/minimize.svg"),
                     url("assets/Window/background_hover.svg");
 }
-.titlebar .titlebutton.minimize:backdrop image {
+.titlebar .titlebutton.minimize:backdrop {
   background-image: url('assets/Window/minimize_backdrop.svg'),
                     url("assets/Window/background.svg");
 }
-.titlebar .titlebutton.close image {
+.titlebar .titlebutton.close {
   background-image: url("assets/Window/close.svg"),
                     url("assets/Window/background.svg");
 }
-.titlebar .titlebutton.close:hover image,
-.titlebar .titlebutton.close:hover:backdrop image {
+.titlebar .titlebutton.close:hover,
+.titlebar .titlebutton.close:hover:backdrop {
   background-image: url("assets/Window/close.svg"),
                     url("assets/Window/background_hover.svg");
 }
-.titlebar .titlebutton.close:backdrop image {
+.titlebar .titlebutton.close:backdrop {
   background-image: url("assets/Window/close_backdrop.svg"),
                     url("assets/Window/background.svg");
 }