[gnome-shell] appMenu: Clip app icon when the button is active

[Florian Müllner <fmuellner src gnome org>]

commit 473dad0c3ea92fcdc981d6fa64eea40d10001254
Author: Florian Müllner <fmuellner gnome org>
Date:   Fri Feb 18 23:00:04 2011 +0100

    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(+), 0 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4cb71aa..08f636f 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 550ec2e..2b31599 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) {