From 3466829766d465336e352fe5020bb88573650fbb Mon Sep 17 00:00:00 2001
From: Adel Gadllah <adel.gadllah@gmail.com>
Date: Sat, 12 Mar 2011 23:49:03 +0100
Subject: [PATCH] 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 deletion(-)

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4fd303a95..289b59cbd 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 e16220c89..d6eaf8e93 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,