Merge lp:~3v1n0/unity-greeter/shutdown-blurred-bg into lp:unity-greeter

[Marco Trevisan (Treviño)]

ShutdownDialog: blur the background under the dialog

This is done by copying the the area under the dialog into a new ImageSurface
before drawing over it, then we apply some blur on it (only when it changes) and
finally we fill the dialog rectangle with it.

Moved some Cairo utility functions inside the CairoUtils namespace, added Gaussian and Exponential blur implementations based on Nux code and using them to blur the window area below the dialog.

Also fixed the spelling of "Shut Down" labels so that it matches unity.

Final result: http://i.imgur.com/ZHnFc35.png

[Robert Ancell (robert-ancell)]

This was in my too-hard-basket :) Works well here!

review: Approve

[Marco Trevisan (Treviño) (3v1n0)]

Just merged this one with previous branch in queue, removed the signal as the background average color is now a property, and using notify instead.

[lp:~3v1n0/unity-greeter/shutdown-blurred-bg]

1049. By Marco Trevisan (Treviño) on 2013-11-13

Merging with trunk

1050. By Marco Trevisan (Treviño) on 2013-11-13

ShutdownDialog: fix background margin for good (hopefully)

But now we've buttons with no border or paddings, it should be enough.

1051. By Marco Trevisan (Treviño) on 2013-11-13

debian/control: build-depends on libpixman-1-dev

=== modified file 'configure.ac'
--- configure.ac	2013-10-21 04:38:12 +0000
+++ configure.ac	2013-11-13 05:34:24 +0000
@@ -26,6 +26,7 @@
     freetype2
     cairo-ft
     libcanberra
+    pixman-1
     x11
 ])
 

=== modified file 'debian/changelog'
--- debian/changelog	2013-11-11 04:21:48 +0000
+++ debian/changelog	2013-11-13 05:34:24 +0000
@@ -1,3 +1,11 @@
+unity-greeter (14.04.0-0ubuntu2) UNRELEASED; urgency=low
+
+  * debian/control:
+    - build-depends on libpixman-1-dev
+    - Improved Unity style shutdown dialogs with blurred bg
+
+ -- Marco Trevisan <[e-mail]>  Wed, 13 Nov 2013 06:32:17 +0100
+
 unity-greeter (14.04.0-0ubuntu1) trusty; urgency=low
 
   * New upstream release:

=== modified file 'debian/control'
--- debian/control	2013-09-20 18:11:17 +0000
+++ debian/control	2013-11-13 05:34:24 +0000
@@ -15,6 +15,7 @@
                libindicator3-dev,
                libido3-0.1-dev (>= 13.10.0),
                liblightdm-gobject-1-dev (>= 1.4.0),
+               libpixman-1-dev,
                valac (>= 0.20.0),
                xvfb,
 Homepage: https://launchpad.net/unity-greeter

=== modified file 'src/Makefile.am'
--- src/Makefile.am	2013-11-05 02:46:46 +0000
+++ src/Makefile.am	2013-11-13 05:34:24 +0000
@@ -9,6 +9,7 @@
 	animate-timer.vala \
 	background.vala \
 	cached-image.vala \
+	cairo-utils.vala \
 	email-autocompleter.vala \
 	dash-box.vala \
 	dash-button.vala \
@@ -52,6 +53,7 @@
 	--pkg liblightdm-gobject-1 \
 	--pkg libcanberra \
 	--pkg gio-2.0 \
+	--pkg pixman-1 \
 	--target-glib 2.32
 
 unity_greeter_LDADD = \

=== modified file 'src/background.vala'
--- src/background.vala	2013-11-13 03:43:29 +0000
+++ src/background.vala	2013-11-13 05:34:24 +0000
@@ -374,6 +374,14 @@
         this.width = width;
         this.height = height;
     }
+
+    public bool equals (Monitor? other)
+    {
+        if (other != null)
+            return (x == other.x && y == other.y && width == other.width && height == other.height);
+
+        return false;
+    }
 }
 
 public class Background : Gtk.Fixed
@@ -574,7 +582,6 @@
     private void animate_cb (double progress)
     {
         alpha = progress;
-
         queue_draw ();
 
         /* Stop when we get there */
@@ -681,6 +688,7 @@
 
     void publish_average_color ()
     {
+        notify_property ("average-color");
         var rgba = current.average_color.to_string ();
         var root = get_screen ().get_root_window ();
 

=== added file 'src/cairo-utils.vala'
--- src/cairo-utils.vala	1970-01-01 00:00:00 +0000
+++ src/cairo-utils.vala	2013-11-13 05:34:24 +0000
@@ -0,0 +1,238 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Marco Trevisan <[e-mail]>
+ *          Mirco "MacSlow" Mueller <[e-mail]>
+ */
+
+namespace CairoUtils
+{
+
+public void rounded_rectangle (Cairo.Context c, double x, double y,
+                               double width, double height, double radius)
+{
+    var w = width - radius * 2;
+    var h = height - radius * 2;
+    var kappa = 0.5522847498 * radius;
+    c.move_to (x + radius, y);
+    c.rel_line_to (w, 0);
+    c.rel_curve_to (kappa, 0, radius, radius - kappa, radius, radius);
+    c.rel_line_to (0, h);
+    c.rel_curve_to (0, kappa, kappa - radius, radius, -radius, radius);
+    c.rel_line_to (-w, 0);
+    c.rel_curve_to (-kappa, 0, -radius, kappa - radius, -radius, -radius);
+    c.rel_line_to (0, -h);
+    c.rel_curve_to (0, -kappa, radius - kappa, -radius, radius, -radius);
+}
+
+class GaussianBlur
+{
+    /* Gaussian Blur, based on Mirco Mueller work on notify-osd */
+
+    public static void surface (Cairo.ImageSurface surface, uint radius, double sigma = 0.0f)
+    {
+        if (surface.get_format () != Cairo.Format.ARGB32)
+        {
+            warning ("Impossible to blur a non ARGB32-formatted ImageSurface");
+            return;
+        }
+
+        surface.flush ();
+
+        double radiusf = Math.fabs (radius) + 1.0f;
+
+        if (sigma == 0.0f)
+            sigma = Math.sqrt (-(radiusf * radiusf) / (2.0f * Math.log (1.0f / 255.0f)));
+
+        int w = surface.get_width ();
+        int h = surface.get_height ();
+        int s = surface.get_stride ();
+
+        // create pixman image for cairo image surface
+        unowned uchar[] p = surface.get_data ();
+        var src = new Pixman.Image.bits (Pixman.Format.A8R8G8B8, w, h, p, s);
+
+        // attach gaussian kernel to pixman image
+        var params = create_gaussian_blur_kernel ((int) radius, sigma);
+        src.set_filter (Pixman.Filter.CONVOLUTION, params);
+
+        // render blured image to new pixman image
+        Pixman.Image.composite (Pixman.Operation.SRC, src, null, src,
+                                0, 0, 0, 0, 0, 0, (uint16) w, (uint16) h);
+
+        surface.mark_dirty ();
+    }
+
+    private static Pixman.Fixed[] create_gaussian_blur_kernel (int radius, double sigma)
+    {
+        double scale2 = 2.0f * sigma * sigma;
+        double scale1 = 1.0f / (Math.PI * scale2);
+        int size = 2 * radius + 1;
+        int n_params = size * size;
+        double sum = 0;
+
+        var tmp = new double[n_params];
+
+        // caluclate gaussian kernel in floating point format
+        for (int i = 0, x = -radius; x <= radius; ++x)
+        {
+            for (int y = -radius; y <= radius; ++y, ++i)
+            {
+                double u = x * x;
+                double v = y * y;
+
+                tmp[i] = scale1 * Math.exp (-(u+v)/scale2);
+
+                sum += tmp[i];
+            }
+        }
+
+        // normalize gaussian kernel and convert to fixed point format
+        var params = new Pixman.Fixed[n_params + 2];
+
+        params[0] = Pixman.Fixed.int (size);
+        params[1] = Pixman.Fixed.int (size);
+
+        for (int i = 2; i < params.length; ++i)
+            params[i] = Pixman.Fixed.double (tmp[i] / sum);
+
+        return params;
+    }
+}
+
+class ExponentialBlur
+{
+    /* Exponential Blur, based on the Nux version */
+
+    const int APREC = 16;
+    const int ZPREC = 7;
+
+    public static void surface (Cairo.ImageSurface surface, int radius)
+    {
+        if (radius < 1)
+            return;
+
+        // before we mess with the surface execute any pending drawing
+        surface.flush ();
+
+        unowned uchar[] pixels = surface.get_data ();
+        var width  = surface.get_width ();
+        var height = surface.get_height ();
+        var format = surface.get_format ();
+
+        switch (format)
+        {
+            case Cairo.Format.ARGB32:
+                blur (pixels, width, height, 4, radius);
+                break;
+
+            case Cairo.Format.RGB24:
+                blur (pixels, width, height, 3, radius);
+                break;
+
+            case Cairo.Format.A8:
+                blur (pixels, width, height, 1, radius);
+                break;
+
+            default :
+                // do nothing
+                break;
+        }
+
+        // inform cairo we altered the surfaces contents
+        surface.mark_dirty ();
+    }
+
+    static void blur (uchar[] pixels, int width, int height, int channels, int radius)
+    {
+        // calculate the alpha such that 90% of
+        // the kernel is within the radius.
+        // (Kernel extends to infinity)
+
+        int alpha = (int) ((1 << APREC) * (1.0f - Math.expf(-2.3f / (radius + 1.0f))));
+
+        for (int row = 0; row < height; ++row)
+          blurrow (pixels, width, height, channels, row, alpha);
+
+        for (int col = 0; col < width; ++col)
+          blurcol (pixels, width, height, channels, col, alpha);
+    }
+
+    static void blurrow (uchar[] pixels, int width, int height, int channels, int line, int alpha)
+    {
+        var scanline = &(pixels[line * width * channels]);
+
+        int zR = *scanline << ZPREC;
+        int zG = *(scanline + 1) << ZPREC;
+        int zB = *(scanline + 2) << ZPREC;
+        int zA = *(scanline + 3) << ZPREC;
+
+        for (int index = 0; index < width; ++index)
+        {
+          blurinner (&scanline[index * channels], alpha, ref zR, ref zG, ref zB, ref zA);
+        }
+
+        for (int index = width - 2; index >= 0; --index)
+        {
+          blurinner (&scanline[index * channels], alpha, ref zR, ref zG, ref zB, ref zA);
+        }
+    }
+
+    static void blurcol (uchar[] pixels, int width, int height, int channels, int x, int alpha)
+    {
+        var ptr = &(pixels[x * channels]);
+
+        int zR = *ptr << ZPREC;
+        int zG = *(ptr + 1) << ZPREC;
+        int zB = *(ptr + 2) << ZPREC;
+        int zA = *(ptr + 3) << ZPREC;
+
+        for (int index = width; index < (height - 1) * width; index += width)
+        {
+            blurinner (&ptr[index * channels], alpha, ref zR, ref zG, ref zB, ref zA);
+        }
+
+        for (int index = (height - 2) * width; index >= 0; index -= width)
+        {
+            blurinner (&ptr[index * channels], alpha, ref zR, ref zG, ref zB, ref zA);
+        }
+    }
+
+    static void blurinner (uchar *pixel, int alpha, ref int zR, ref int zG, ref int zB, ref int zA)
+    {
+        int R;
+        int G;
+        int B;
+        uchar A;
+
+        R = *pixel;
+        G = *(pixel + 1);
+        B = *(pixel + 2);
+        A = *(pixel + 3);
+
+        zR += (alpha * ((R << ZPREC) - zR)) >> APREC;
+        zG += (alpha * ((G << ZPREC) - zG)) >> APREC;
+        zB += (alpha * ((B << ZPREC) - zB)) >> APREC;
+        zA += (alpha * ((A << ZPREC) - zA)) >> APREC;
+
+        *pixel = zR >> ZPREC;
+        *(pixel + 1) = zG >> ZPREC;
+        *(pixel + 2) = zB >> ZPREC;
+        *(pixel + 3) = zA >> ZPREC;
+    }
+}
+
+}

=== modified file 'src/dash-box.vala'
--- src/dash-box.vala	2012-10-23 20:01:56 +0000
+++ src/dash-box.vala	2013-11-13 05:34:24 +0000
@@ -214,7 +214,7 @@
 
         c.save ();
 
-        cairo_rounded_rectangle (c, 0, box_y, box_w, box_h, box_r);
+        CairoUtils.rounded_rectangle (c, 0, box_y, box_w, box_h, box_r);
 
         c.set_source_rgba (0.1, 0.1, 0.1, 0.4);
         c.fill_preserve ();
@@ -227,22 +227,4 @@
 
         return base.draw (c);
     }
-
-    public static void cairo_rounded_rectangle (Cairo.Context c, double x,
-                                                double y, double width,
-                                                double height, double radius)
-    {
-        var w = width - radius * 2;
-        var h = height - radius * 2;
-        var kappa = 0.5522847498 * radius;
-        c.move_to (x + radius, y);
-        c.rel_line_to (w, 0);
-        c.rel_curve_to (kappa, 0, radius, radius - kappa, radius, radius);
-        c.rel_line_to (0, h);
-        c.rel_curve_to (0, kappa, kappa - radius, radius, -radius, radius);
-        c.rel_line_to (-w, 0);
-        c.rel_curve_to (-kappa, 0, -radius, kappa - radius, -radius, -radius);
-        c.rel_line_to (0, -h);
-        c.rel_curve_to (0, -kappa, radius - kappa, -radius, radius, -radius);
-    }
 }

=== modified file 'src/main-window.vala'
--- src/main-window.vala	2013-11-13 03:32:25 +0000
+++ src/main-window.vala	2013-11-13 05:34:24 +0000
@@ -254,7 +254,7 @@
 
         if (shutdown_dialog != null)
         {
-            shutdown_dialog.set_size_request (monitor.width, monitor.height);
+            shutdown_dialog.set_active_monitor (monitor);
             background.move (shutdown_dialog, monitor.x, monitor.y);
         }
     }
@@ -342,7 +342,7 @@
         /* Stop input to login box */
         login_box.sensitive = false;
 
-        shutdown_dialog = new ShutdownDialog (type, background.average_color);
+        shutdown_dialog = new ShutdownDialog (type, background);
         shutdown_dialog.visible = true;
         shutdown_dialog.close.connect (close_shutdown_dialog);
         background.add (shutdown_dialog);

=== modified file 'src/shutdown-dialog.vala'
--- src/shutdown-dialog.vala	2013-11-13 05:23:57 +0000
+++ src/shutdown-dialog.vala	2013-11-13 05:34:24 +0000
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  * Authors: Robert Ancell <[e-mail]>
+ *          Marco Trevisan <[e-mail]>
  */
 
 public enum ShutdownDialogType
@@ -28,6 +29,7 @@
 {
     public signal void close ();
 
+    private Cairo.ImageSurface? bg_surface = null;
     private Cairo.ImageSurface? corner_surface = null;
     private Cairo.ImageSurface? left_surface = null;
     private Cairo.ImageSurface? top_surface = null;
@@ -36,22 +38,27 @@
     private Cairo.Pattern? top_pattern = null;
 
     private const int BORDER_SIZE = 30;
+    private const int BORDER_INTERNAL_SIZE = 10;
+    private const int BORDER_EXTERNAL_SIZE = BORDER_SIZE - BORDER_INTERNAL_SIZE;
     private const int CLOSE_OFFSET = 3;
     private const int BUTTON_TEXT_SPACE = 9;
-    private const int VBOX_EXTERNAL_PADDING = 10;
+    private const int BLUR_RADIUS = 4;
+
+    private Monitor monitor;
+    private weak Background background;
 
     private Gtk.Box vbox;
     private DialogButton close_button;
     private Gtk.Box button_box;
-
     private Gtk.EventBox monitor_events;
     private Gtk.EventBox vbox_events;
 
-    private Gdk.RGBA avg_color;
 
-    public ShutdownDialog (ShutdownDialogType type, Gdk.RGBA average_color)
+    public ShutdownDialog (ShutdownDialogType type, Background bg)
     {
-        this.avg_color = average_color;
+        background = bg;
+        background.notify["alpha"].connect (rebuild_background);
+        background.notify["average-color"].connect (rebuild_background);
 
         // This event box covers the monitor size, and closes the dialog on click.
         monitor_events = new Gtk.EventBox ();
@@ -66,12 +73,12 @@
 
         vbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 10);
         vbox.visible = true;
-        add (vbox);
 
-        vbox.margin_top = 10;
-        vbox.margin_left = 22;
-        vbox.margin_right = 18;
-        vbox.margin_bottom = 0;
+        vbox.margin = BORDER_INTERNAL_SIZE;
+        vbox.margin_top += 10;
+        vbox.margin_left += 20;
+        vbox.margin_right += 20;
+        vbox.margin_bottom += 0;
 
         // This event box consumes the click events inside the vbox
         vbox_events = new Gtk.EventBox();
@@ -79,24 +86,27 @@
         vbox_events.set_visible_window (false);
         vbox_events.events |= Gdk.EventMask.BUTTON_PRESS_MASK;
         vbox_events.button_press_event.connect (() => { return true; });
+        vbox_events.add (vbox);
         monitor_events.add (vbox_events);
 
-        var title_label = new Gtk.Label (_("Shutdown"));
-        title_label.override_font (Pango.FontDescription.from_string ("Ubuntu Light 15"));
-        title_label.override_color (Gtk.StateFlags.NORMAL, { 1.0f, 1.0f, 1.0f, 1.0f });
-        title_label.set_alignment (0.0f, 0.5f);
-        vbox.pack_start (title_label, false, false, 0);
-
         string text;
+
         if (type == ShutdownDialogType.SHUTDOWN)
         {
             text = _("Goodbye. Would you like to…");
         }
         else
         {
+            var title_label = new Gtk.Label (_("Shut Down"));
+            title_label.visible = true;
+            title_label.override_font (Pango.FontDescription.from_string ("Ubuntu Light 15"));
+            title_label.override_color (Gtk.StateFlags.NORMAL, { 1.0f, 1.0f, 1.0f, 1.0f });
+            title_label.set_alignment (0.0f, 0.5f);
+            vbox.pack_start (title_label, false, false, 0);
+
             text = _("Are you sure you want to shut down the computer?");
-            title_label.visible = true;
         }
+
         var label = new Gtk.Label (text);
         label.set_line_wrap (true);
         label.override_font (Pango.FontDescription.from_string ("Ubuntu Light 12"));
@@ -165,7 +175,7 @@
 
         if (LightDM.get_can_shutdown ())
         {
-            var button = add_button (_("Shutdown"), Path.build_filename (Config.PKGDATADIR, "shutdown.png"), Path.build_filename (Config.PKGDATADIR, "shutdown_highlight.png"));
+            var button = add_button (_("Shut Down"), Path.build_filename (Config.PKGDATADIR, "shutdown.png"), Path.build_filename (Config.PKGDATADIR, "shutdown_highlight.png"));
             button.clicked.connect (() =>
             {
                 try
@@ -187,6 +197,22 @@
         add (close_button);
     }
 
+    private void rebuild_background ()
+    {
+        bg_surface = null;
+        queue_draw ();
+    }
+
+    public void set_active_monitor (Monitor m)
+    {
+        if (m == this.monitor || m.equals (this.monitor))
+            return;
+
+        monitor = m;
+        rebuild_background ();
+        set_size_request (monitor.width, monitor.height);
+    }
+
     public void focus_next ()
     {
         (get_toplevel () as Gtk.Window).move_focus (Gtk.DirectionType.TAB_FORWARD);
@@ -213,26 +239,19 @@
 
         var content_allocation = Gtk.Allocation ();
         int minimum_width, natural_width, minimum_height, natural_height;
-        vbox.get_preferred_width (out minimum_width, out natural_width);
-        vbox.get_preferred_height_for_width (minimum_width, out minimum_height, out natural_height);
+        vbox_events.get_preferred_width (out minimum_width, out natural_width);
+        vbox_events.get_preferred_height_for_width (minimum_width, out minimum_height, out natural_height);
         content_allocation.x = allocation.x + (allocation.width - minimum_width) / 2;
         content_allocation.y = allocation.y + (allocation.height - minimum_height) / 2;
         content_allocation.width = minimum_width;
         content_allocation.height = minimum_height;
-        vbox.size_allocate (content_allocation);
-
-        var events_allocation = content_allocation;
-        events_allocation.x -= VBOX_EXTERNAL_PADDING;
-        events_allocation.y -= VBOX_EXTERNAL_PADDING;
-        events_allocation.width += VBOX_EXTERNAL_PADDING * 2;
-        events_allocation.height += VBOX_EXTERNAL_PADDING * 2;
-        vbox_events.size_allocate (events_allocation);
+        vbox_events.size_allocate (content_allocation);
 
         var a = Gtk.Allocation ();
         close_button.get_preferred_width (out minimum_width, out natural_width);
         close_button.get_preferred_height (out minimum_height, out natural_height);
-        a.x = content_allocation.x - BORDER_SIZE + CLOSE_OFFSET;
-        a.y = content_allocation.y - BORDER_SIZE + CLOSE_OFFSET;
+        a.x = content_allocation.x - BORDER_EXTERNAL_SIZE + CLOSE_OFFSET;
+        a.y = content_allocation.y - BORDER_EXTERNAL_SIZE + CLOSE_OFFSET;
         a.width = minimum_width;
         a.height = minimum_height;
         close_button.size_allocate (a);
@@ -252,16 +271,51 @@
             top_pattern.set_extend (Cairo.Extend.REPEAT);
         }
 
-        var width = vbox.get_allocated_width () + BORDER_SIZE * 2 + vbox.margin_left + vbox.margin_right;
-        var height = vbox.get_allocated_height () + BORDER_SIZE * 2 + vbox.margin_top + vbox.margin_bottom;
+        int width = vbox_events.get_allocated_width ();
+        int height = vbox_events.get_allocated_height ();
+        int x = (get_allocated_width () - width) / 2;
+        int y = (get_allocated_height () - height) / 2;
 
         /* Darken background */
         c.set_source_rgba (0, 0, 0, 0.25);
         c.paint ();
 
-        /* Draw dialog */
-        c.save ();
-        c.translate ((get_allocated_width () - width) * 0.5, (get_allocated_height () - height) * 0.5);
+        if (bg_surface == null)
+        {
+            /* Create a new blurred surface of the current surface */
+            bg_surface = new Cairo.ImageSurface (Cairo.Format.ARGB32, width, height);
+            var bg_cr = new Cairo.Context (bg_surface);
+
+            bg_cr.set_source_surface (c.get_target (), -x - monitor.x, -y - monitor.y);
+            bg_cr.rectangle (0, 0, width, height);
+            bg_cr.fill ();
+
+            CairoUtils.ExponentialBlur.surface (bg_surface, BLUR_RADIUS);
+        }
+
+        /* Background */
+        c.save ();
+        c.translate (x, y);
+
+        var avg_color = background.average_color;
+        CairoUtils.rounded_rectangle (c, 0, 0, width, height, 4);
+        c.set_source_surface (bg_surface, 0, 0);
+        c.fill_preserve ();
+        c.set_source_rgba (0.0, 0.0, 0.0, 0.55f);
+        c.fill_preserve ();
+        c.set_source_rgba (avg_color.red, avg_color.green, avg_color.blue, 0.35);
+        c.fill ();
+
+        c.restore();
+
+        /* Draw borders */
+        x -= BORDER_EXTERNAL_SIZE;
+        y -= BORDER_EXTERNAL_SIZE;
+        width += BORDER_EXTERNAL_SIZE * 2;
+        height += BORDER_EXTERNAL_SIZE * 2;
+
+        c.save ();
+        c.translate (x, y);
 
         /* Top left */
         var m = Cairo.Matrix.identity ();
@@ -329,13 +383,6 @@
         c.rectangle (BORDER_SIZE, height - BORDER_SIZE, width - BORDER_SIZE * 2, BORDER_SIZE);
         c.fill ();
 
-        /* Background */
-        DashBox.cairo_rounded_rectangle (c, 20, 20, width - 40, height - 40, 4);
-        c.set_source_rgba (0.0, 0.0, 0.0, 0.75f);
-        c.fill_preserve ();
-        c.set_source_rgba (avg_color.red, avg_color.green, avg_color.blue, 0.35);
-        c.fill ();
-
         c.restore ();
 
         return base.draw (c);

=== modified file 'src/toggle-box.vala'
--- src/toggle-box.vala	2012-10-23 20:01:56 +0000
+++ src/toggle-box.vala	2013-11-13 05:34:24 +0000
@@ -54,8 +54,8 @@
         Gtk.Allocation allocation;
         get_allocation (out allocation);
 
-        DashBox.cairo_rounded_rectangle (c, 0, 0, allocation.width,
-                                         allocation.height, 0.1 * grid_size);
+        CairoUtils.rounded_rectangle (c, 0, 0, allocation.width,
+                                      allocation.height, 0.1 * grid_size);
         c.set_source_rgba (0.5, 0.5, 0.5, 0.5);
         c.set_line_width (1);
         c.stroke ();