layout: Use background gradient when top bar is transparent

Make sure the legibility of top bar elements doesn't depend on the
wallpaper by adding a light gradient at the top when the top bar
is transparent, similar to what Android does.

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

data/theme/gnome-shell-sass/_common.scss

@@ -729,7 +729,9 @@ StScrollBar {
 /* TOP BAR */
 
 #panel {
-  background-color: rgba(0, 0, 0, 0.35);
+  background-gradient-start: rgba(0,0,0,0.3);
+  background-gradient-end: rgba(0,0,0,0);
+  background-gradient-direction: vertical;
   /* transition from solid to transparent */
   transition-duration: 500ms;
   font-weight: bold;
@@ -748,7 +750,7 @@ StScrollBar {
 
   .panel-corner {
     -panel-corner-radius: $panel-corner-radius;
-    -panel-corner-background-color: rgba(0, 0, 0, 0.35);
+    -panel-corner-background-color: rgba(0, 0, 0, 0);
     -panel-corner-border-width: 2px;
     -panel-corner-border-color: transparent;
 
@@ -768,7 +770,7 @@ StScrollBar {
     -minimum-hpadding: 6px;
     font-weight: bold;
     color: #eee;
-    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
+    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
     transition-duration: 100ms;
 
     .app-menu-icon {
@@ -781,17 +783,17 @@ StScrollBar {
     .system-status-icon,
     .app-menu-icon > StIcon,
     .popup-menu-arrow {
-      icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.9);
+      icon-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
     }
 
     &:hover {
       color: lighten($fg_color, 10%);
-      text-shadow: 0px 1px 6px rgba(0, 0, 0, 1);
+      text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
 
       .system-status-icon,
       .app-menu-icon > StIcon,
       .popup-menu-arrow {
-        icon-shadow: 0px 1px 6px rgba(0, 0, 0, 1);
+        icon-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
       }
     }
 
@@ -830,6 +832,9 @@ StScrollBar {
 
   &.solid {
     background-color: black;
+    background-gradient-start: none;
+    background-gradient-end: none;
+    background-gradient-direction: none;
     /* transition from transparent to solid */
     transition-duration: 300ms;
 

js/ui/layout.js

@@ -21,6 +21,8 @@ const Tweener = imports.ui.tweener;
 var STARTUP_ANIMATION_TIME = 0.5;
 var KEYBOARD_ANIMATION_TIME = 0.15;
 var BACKGROUND_FADE_ANIMATION_TIME = 1.0;
+var GRADIENT_FADE_IN_ANIMATION_TIME = 1.0;
+var GRADIENT_FADE_OUT_ANIMATION_TIME = 0.3;
 
 var HOT_CORNER_PRESSURE_THRESHOLD = 100; // pixels
 var HOT_CORNER_PRESSURE_TIMEOUT = 1000; // ms
@@ -301,8 +303,10 @@ var LayoutManager = new Lang.Class({
     // This is called by Main after everything else is constructed
     init() {
         Main.sessionMode.connect('updated', this._sessionUpdated.bind(this));
+        Main.panel.connect('solid-style-changed', this._updatePrimaryBackground.bind(this));
 
         this._loadBackground();
+        this._updatePrimaryBackground();
     },
 
     showOverview() {
@@ -324,6 +328,29 @@ var LayoutManager = new Lang.Class({
         this._queueUpdateRegions();
     },
 
+    _updatePrimaryBackground() {
+        let metaBackgroundActor = this._bgManagers[this.primaryIndex].backgroundActor;
+        metaBackgroundActor.gradient = true;
+        metaBackgroundActor.gradient_height = 3 * Main.panel.actor.get_height();
+        if (Main.panel.solidStyle) {
+            Tweener.addTween(metaBackgroundActor,
+                             { gradient_max_darkness: 0,
+                               time: GRADIENT_FADE_OUT_ANIMATION_TIME,
+                               transition: 'easeOutQuad',
+                               onComplete: function() {
+                                   metaBackgroundActor.gradient = false;
+                               }
+                             });
+        } else {
+            Tweener.removeTweens(metaBackgroundActor);
+            Tweener.addTween(metaBackgroundActor,
+                             { gradient_max_darkness: 0.4,
+                               time: GRADIENT_FADE_IN_ANIMATION_TIME,
+                               transition: 'easeOutQuad'
+                             });
+        }
+    },
+
     _updateMonitors() {
         let display = global.display;