Add blur to translucent styles

data/styles/Application.css

@@ -20,21 +20,21 @@ panel.translucent > box {
 }
 
 panel.translucent.color-dark > box {
-    background-color: alpha(black, 0.4);
+    background-color: alpha(black, 0.3);
     box-shadow:
-        0 1px 3px alpha(#000, 0.3),
+        0 1px 3px alpha(#000, 0.15),
         0 1px 1px alpha(#000, 0.3);
 }
 
 panel.translucent.color-light > box {
-    background-color: alpha(white, 0.75);
+    background-color: alpha(white, 0.3);
     box-shadow:
-        inset 0 -1px 0 0 alpha(white, 0.2),
-        inset 0 1px 0 0 alpha(white, 0.3),
-        inset 1px 0 0 0 alpha(white, 0.07),
-        inset -1px 0 0 0 alpha(white, 0.07),
-        0 1px 3px alpha(black, 0.16),
-        0 1px 1px alpha(black, 0.1);
+        inset 0 -1px 0 0 alpha(white, 0.15),
+        inset 0 1px 0 0 alpha(white, 0.15),
+        inset 1px 0 0 0 alpha(white, 0.03),
+        inset -1px 0 0 0 alpha(white, 0.03),
+        0 1px 3px alpha(black, 0.1),
+        0 1px 1px alpha(black, 0.05);
 }
 
 .composited-indicator {

protocol/pantheon-desktop-shell-v1.xml

@@ -98,6 +98,30 @@
 
       <arg name="hide_mode" type="uint" enum="hide_mode" summary="hide mode"/>
     </request>
+
+    <request name="request_visible_in_multitasking_view">
+      <description summary="request visible in multitasking view">
+        Tell the shell that the panel would like to be visible in the multitasking view.
+      </description>
+    </request>
+
+    <request name="add_blur">
+      <description summary="add blur">
+        Tell the window manager to add background blur.
+      </description>
+
+      <arg name="left" type="uint"/>
+      <arg name="right" type="uint"/>
+      <arg name="top" type="uint"/>
+      <arg name="bottom" type="uint"/>
+      <arg name="clip_radius" type="uint"/>
+    </request>
+
+    <request name="remove_blur">
+      <description summary="remove blur">
+        Tell the window manager to remove blur that was set in set_blur_region.
+      </description>
+    </request>
   </interface>
 
   <interface name="io_elementary_pantheon_widget_v1" version="1">
@@ -111,5 +135,21 @@
         Tell the shell to keep the surface above on all workspaces
       </description>
     </request>
+
+    <request name="make_centered">
+      <description summary="requests to keep the surface centered">
+        Request to keep the surface centered. This will cause keyboard focus
+        to not be granted automatically but having to be requested via focus.
+      </description>
+    </request>
+
+    <request name="focus">
+      <description summary="request keyboard focus">
+        Request keyboard focus, taking it away from any other window.
+        Keyboard focus must always be manually be requested and is
+        - in contrast to normal windows - never automatically granted
+        by the compositor.
+      </description>
+    </request>
   </interface>
 </protocol>

protocol/pantheon-desktop-shell.vapi

@@ -47,6 +47,9 @@ namespace Pantheon.Desktop {
         public void focus ();
         public void set_size (int width, int height);
         public void set_hide_mode (Pantheon.Desktop.HideMode hide_mode);
+        public void request_visible_in_multitasking_view ();
+        public void add_blur (uint left, uint right, uint top, uint bottom, uint clip_radius);
+        public void remove_blur ();
     }
 
     [CCode (cheader_filename = "pantheon-desktop-shell-client-protocol.h", cname = "struct io_elementary_pantheon_widget_v1", cprefix = "io_elementary_pantheon_widget_v1_")]

src/PanelWindow.vala

@@ -26,6 +26,8 @@ public class Wingpanel.PanelWindow : Gtk.Window {
     private Pantheon.Desktop.Shell? desktop_shell;
     private Pantheon.Desktop.Panel? desktop_panel;
 
+    private Gtk.CssProvider? style_provider = null;
+
     public PanelWindow (Gtk.Application application) {
         Object (
             application: application,
@@ -65,6 +67,10 @@ public class Wingpanel.PanelWindow : Gtk.Window {
         notify["scale-factor"].connect (on_scale_changed);
     }
 
+    construct {
+        Services.BackgroundManager.get_default ().background_state_changed.connect (update_background);
+    }
+
     private void on_realize () {
         update_panel_dimensions ();
         Services.BackgroundManager.initialize (panel_height);
@@ -138,4 +144,64 @@ public class Wingpanel.PanelWindow : Gtk.Window {
             return;
         }
     }
+
+    private void update_background (Services.BackgroundState state, uint animation_duration) {
+        if (style_provider == null) {
+            style_provider = new Gtk.CssProvider ();
+            Gtk.StyleContext.add_provider_for_display (
+                Gdk.Display.get_default (),
+                style_provider,
+                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
+            );
+        }
+
+        string css = """
+            panel {
+                transition: all %ums cubic-bezier(0.4, 0, 0.2, 1);
+            }
+        """.printf (animation_duration);
+
+        style_provider.load_from_string (css);
+
+        switch (state) {
+            case Services.BackgroundState.DARK :
+                panel.css_classes = {"color-light"};
+                break;
+            case Services.BackgroundState.LIGHT:
+                panel.css_classes = {"color-dark"};
+                break;
+            case Services.BackgroundState.MAXIMIZED:
+                panel.css_classes = {"maximized"};
+                break;
+            case Services.BackgroundState.TRANSLUCENT_DARK:
+                panel.css_classes = {
+                    "color-light",
+                    "translucent"
+                };
+                break;
+            case Services.BackgroundState.TRANSLUCENT_LIGHT:
+                panel.css_classes = {
+                    "color-dark",
+                    "translucent"
+                };
+                break;
+        }
+
+
+        if (desktop_panel == null) {
+            return;
+        }
+
+        switch (state) {
+            case Services.BackgroundState.DARK :
+            case Services.BackgroundState.LIGHT:
+            case Services.BackgroundState.MAXIMIZED:
+                desktop_panel.remove_blur ();
+                break;
+            case Services.BackgroundState.TRANSLUCENT_DARK:
+            case Services.BackgroundState.TRANSLUCENT_LIGHT:
+                desktop_panel.add_blur (0, 0, 0, 4, 0);
+                break;
+        }
+    }
 }

src/Widgets/Panel.vala

@@ -27,7 +27,6 @@ public class Wingpanel.Widgets.Panel : Granite.Bin {
     private IndicatorBar center_menubar;
 
     private Gtk.CenterBox box;
-    private Gtk.CssProvider? style_provider = null;
 
     private Gtk.GestureClick gesture_controller;
     private Gtk.EventControllerScroll scroll_controller;
@@ -74,8 +73,6 @@ public class Wingpanel.Widgets.Panel : Granite.Bin {
             return true;
         });
 
-        Services.BackgroundManager.get_default ().background_state_changed.connect (update_background);
-
         gesture_controller = new Gtk.GestureClick ();
         add_controller (gesture_controller);
         gesture_controller.pressed.connect ((n_press, x, y) => {
@@ -187,47 +184,4 @@ public class Wingpanel.Widgets.Panel : Granite.Bin {
         center_menubar.remove_indicator (indicator);
         right_menubar.remove_indicator (indicator);
     }
-
-    private void update_background (Services.BackgroundState state, uint animation_duration) {
-        if (style_provider == null) {
-            style_provider = new Gtk.CssProvider ();
-            Gtk.StyleContext.add_provider_for_display (
-                Gdk.Display.get_default (),
-                style_provider,
-                Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
-            );
-        }
-
-        string css = """
-            panel {
-                transition: all %ums cubic-bezier(0.4, 0, 0.2, 1);
-            }
-        """.printf (animation_duration);
-
-        style_provider.load_from_string (css);
-
-        switch (state) {
-            case Services.BackgroundState.DARK :
-                css_classes = {"color-light"};
-                break;
-            case Services.BackgroundState.LIGHT:
-                css_classes = {"color-dark"};
-                break;
-            case Services.BackgroundState.MAXIMIZED:
-                css_classes = {"maximized"};
-                break;
-            case Services.BackgroundState.TRANSLUCENT_DARK:
-                css_classes = {
-                    "color-light",
-                    "translucent"
-                };
-                break;
-            case Services.BackgroundState.TRANSLUCENT_LIGHT:
-                css_classes = {
-                    "color-dark",
-                    "translucent"
-                };
-                break;
-        }
-    }
 }