[gnome-shell] popupMenu: Restyle the slider to use a color for the 'active' area

[Adel Gadllah <agadllah src gnome org>]

commit 3466829766d465336e352fe5020bb88573650fbb
Author: Adel Gadllah <adel gadllah gmail com>
Date:   Sat Mar 12 23:49:03 2011 +0100

    popupMenu: Restyle the slider to use a color for the 'active' area
    
    In the mockups the slider does not have an uniform color but uses
    one color (shade of blue) to indicate the current value and one
    to indicate "the rest" (shade of grey).
    
    So adjust the slider to look like that to be closer to the look
    in the mockups and thus to the design.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=644600

 data/theme/gnome-shell.css |    2 ++
 js/ui/popupMenu.js         |   20 +++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4fd303a..289b59c 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -150,6 +150,8 @@ StTooltip StLabel {
     -slider-height: 0.3em;
     -slider-background-color: #333333;
     -slider-border-color: #5f5f5f;
+    -slider-active-background-color: #76b0ec;
+    -slider-active-border-color: #1f6dbc;
     -slider-border-width: 1px;
     -slider-handle-radius: 0.5em;
 }
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index e16220c..d6eaf8e 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -485,12 +485,30 @@ PopupSliderMenuItem.prototype = {
         let sliderBorderColor = themeNode.get_color('-slider-border-color');
         let sliderColor = themeNode.get_color('-slider-background-color');
 
+        let sliderActiveBorderColor = themeNode.get_color('-slider-active-border-color');
+        let sliderActiveColor = themeNode.get_color('-slider-active-background-color');
+
+        cr.setSourceRGBA (
+            sliderActiveColor.red / 255,
+            sliderActiveColor.green / 255,
+            sliderActiveColor.blue / 255,
+            sliderActiveColor.alpha / 255);
+        cr.rectangle(handleRadius, (height - sliderHeight) / 2, sliderWidth * this._value, sliderHeight);
+        cr.fillPreserve();
+        cr.setSourceRGBA (
+            sliderActiveBorderColor.red / 255,
+            sliderActiveBorderColor.green / 255,
+            sliderActiveBorderColor.blue / 255,
+            sliderActiveBorderColor.alpha / 255);
+        cr.setLineWidth(sliderBorderWidth);
+        cr.stroke();
+
         cr.setSourceRGBA (
             sliderColor.red / 255,
             sliderColor.green / 255,
             sliderColor.blue / 255,
             sliderColor.alpha / 255);
-        cr.rectangle(handleRadius, (height - sliderHeight) / 2, sliderWidth, sliderHeight);
+        cr.rectangle(handleRadius + sliderWidth * this._value, (height - sliderHeight) / 2, sliderWidth * (1 - this._value), sliderHeight);
         cr.fillPreserve();
         cr.setSourceRGBA (
             sliderBorderColor.red / 255,