From 473dad0c3ea92fcdc981d6fa64eea40d10001254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Florian=20M=C3=BCllner?= <fmuellner@gnome.org>
Date: Fri, 18 Feb 2011 23:00:04 +0100
Subject: [PATCH] appMenu: Clip app icon when the button is active

We now use a border image on active panel buttons to underline the
button's content. As the property does not affect the content's
allocation, the app icon ends up being drawn on top of the border
image. To prevent this, use a custom property to clip the bottom of
the app icon when the button is active.

https://bugzilla.gnome.org/show_bug.cgi?id=642697
---
 data/theme/gnome-shell.css |  6 ++++++
 js/ui/panel.js             | 13 +++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4cb71aa89..08f636f50 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -204,6 +204,12 @@ StTooltip StLabel {
     spacing: 4px;
 }
 
+.panel-button:active #appMenuIcon,
+.panel-button:checked #appMenuIcon,
+.panel-button:focus #appMenuIcon {
+    app-icon-bottom-clip: 2px;
+}
+
 .app-menu-icon {
     width: 24px;
     height: 24px;
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 550ec2e87..2b315993d 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -210,6 +210,8 @@ AppMenuButton.prototype = {
         this._container.connect('allocate', Lang.bind(this, this._contentAllocate));
 
         this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' });
+        this._iconBox.connect('style-changed',
+                              Lang.bind(this, this._onIconBoxStyleChanged));
         this._container.add_actor(this._iconBox);
         this._label = new TextShadower();
         this._container.add_actor(this._label.actor);
@@ -280,6 +282,17 @@ AppMenuButton.prototype = {
                            onCompleteScope: this });
     },
 
+    _onIconBoxStyleChanged: function() {
+        let node = this._iconBox.get_theme_node();
+        let bottomClip = node.get_length('app-icon-bottom-clip');
+        if (bottomClip > 0)
+            this._iconBox.set_clip(0, 0,
+                                   this._iconBox.width,
+                                   this._iconBox.height - bottomClip);
+        else
+            this._iconBox.remove_clip();
+    },
+
     _stopAnimation: function(animate) {
         this._label.actor.remove_clip();
         if (this._updateId) {