Lightbox: complete radial effect for modal dialogs

Rework the radial effect to use similar code to MetaBackground,
and adjust parameters to make it more noticeable.

https://bugzilla.gnome.org/show_bug.cgi?id=725830

js/ui/lightbox.js

@@ -11,30 +11,60 @@ const Params = imports.misc.params;
 const Tweener = imports.ui.tweener;
 
 const DEFAULT_FADE_FACTOR = 0.4;
+const VIGNETTE_BRIGHTNESS = 0.8;
+const VIGNETTE_SHARPNESS = 0.7;
 
-const GLSL_DIM_EFFECT_DECLARATIONS = '\
-float compute_dim_factor (const vec2 coords) {\
-   vec2 dist = coords - vec2(0.5, 0.5); \
-   float elipse_radius = 0.5; \
-   /* interpolate darkening value, based on distance from screen center */ \
-   float val = min(length(dist), elipse_radius); \
-   return mix(0.3, 1.0, val / elipse_radius) * 0.4; \
-}';
-const GLSL_DIM_EFFECT_CODE = '\
-   float a = compute_dim_factor (cogl_tex_coord0_in.xy);\
-   cogl_color_out = vec4(0, 0, 0, cogl_color_in.a * a);'
-;
+const VIGNETTE_DECLARATIONS = '\
+uniform float brightness;\n\
+uniform float vignette_sharpness;\n';
+
+const VIGNETTE_CODE = '\
+cogl_color_out.a = cogl_color_in.a;\n\
+cogl_color_out.rgb = vec3(0.0, 0.0, 0.0);\n\
+vec2 position = cogl_tex_coord_in[0].xy - 0.5;\n\
+float t = length(2.0 * position);\n\
+t = clamp(t, 0.0, 1.0);\n\
+float pixel_brightness = mix(1.0, 1.0 - vignette_sharpness, t);\n\
+cogl_color_out.a = cogl_color_out.a * (1 - pixel_brightness * brightness);';
 
 const RadialShaderQuad = new Lang.Class({
     Name: 'RadialShaderQuad',
     Extends: Shell.GLSLQuad,
 
+    _init: function(params) {
+        this.parent(params);
+
+        this._brightnessLocation = this.get_uniform_location('brightness');
+        this._sharpnessLocation = this.get_uniform_location('vignette_sharpness');
+
+        this.brightness = 1.0;
+        this.vignetteSharpness = 0.0;
+    },
+
     vfunc_build_pipeline: function() {
         this.add_glsl_snippet(Shell.SnippetHook.FRAGMENT,
-                              GLSL_DIM_EFFECT_DECLARATIONS,
-                              GLSL_DIM_EFFECT_CODE,
-                              true);
+                              VIGNETTE_DECLARATIONS, VIGNETTE_CODE, true);
     },
+
+    get brightness() {
+        return this._brightness;
+    },
+
+    set brightness(v) {
+        this._brightness = v;
+        this.set_uniform_float(this._brightnessLocation,
+                               1, [this._brightness]);
+    },
+
+    get vignetteSharpness() {
+        return this._sharpness;
+    },
+
+    set vignetteSharpness(v) {
+        this._sharpness = v;
+        this.set_uniform_float(this._sharpnessLocation,
+                               1, [this._sharpness]);
+    }
 });
 
 /**
@@ -75,6 +105,7 @@ const Lightbox = new Lang.Class({
         this._container = container;
         this._children = container.get_children();
         this._fadeFactor = params.fadeFactor;
+        this._radialEffect = params.radialEffect;
         if (params.radialEffect)
             this.actor = new RadialShaderQuad({ x: 0,
                                                 y: 0,
@@ -82,6 +113,7 @@ const Lightbox = new Lang.Class({
         else
             this.actor = new St.Bin({ x: 0,
                                       y: 0,
+                                      opacity: 0,
                                       style_class: 'lightbox',
                                       reactive: params.inhibitEvents });
 
@@ -133,9 +165,18 @@ const Lightbox = new Lang.Class({
         fadeInTime = fadeInTime || 0;
 
         Tweener.removeTweens(this.actor);
-        if (fadeInTime != 0) {
-            this.shown = false;
-            this.actor.opacity = 0;
+        if (this._radialEffect) {
+            Tweener.addTween(this.actor,
+                             { brightness: VIGNETTE_BRIGHTNESS,
+                               vignetteSharpness: VIGNETTE_SHARPNESS,
+                               time: fadeInTime,
+                               transition: 'easeOutQuad',
+                               onComplete: Lang.bind(this, function() {
+                                   this.shown = true;
+                                   this.emit('shown');
+                               })
+                             });
+        } else {
             Tweener.addTween(this.actor,
                              { opacity: 255 * this._fadeFactor,
                                time: fadeInTime,
@@ -145,11 +186,8 @@ const Lightbox = new Lang.Class({
                                    this.emit('shown');
                                })
                              });
-        } else {
-            this.actor.opacity = 255 * this._fadeFactor;
-            this.shown = true;
-            this.emit('shown');
         }
+
         this.actor.show();
     },
 
@@ -158,7 +196,18 @@ const Lightbox = new Lang.Class({
 
         this.shown = false;
         Tweener.removeTweens(this.actor);
-        if (fadeOutTime != 0) {
+        if (this._radialEffect) {
+            Tweener.addTween(this.actor,
+                             { brightness: 1.0,
+                               vignetteSharpness: 0.0,
+                               opacity: 0,
+                               time: fadeOutTime,
+                               transition: 'easeOutQuad',
+                               onComplete: Lang.bind(this, function() {
+                                   this.actor.hide();
+                               })
+                             });
+        } else {
             Tweener.addTween(this.actor,
                              { opacity: 0,
                                time: fadeOutTime,
@@ -167,8 +216,6 @@ const Lightbox = new Lang.Class({
                                    this.actor.hide();
                                })
                              });
-        } else {
-            this.actor.hide();
         }
     },