slider: Remove border drawing code add hover style

- remove all the border drawing on sliders since they are unused
- listen for hover and add hover style

Fixes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/6274
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3320>

data/theme/gnome-shell-sass/widgets/_slider.scss

@@ -3,25 +3,25 @@
 $slider_size: $scalable_icon_size;
 
 .slider {
+  color: if($variant == 'light', $fg_color, darken($fg_color, 9%));
+
   // slider trough
   -barlevel-height: 4px;
-  -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
+  -barlevel-background-color: transparentize($fg_color, 0.9);
-  -barlevel-border-width: 2px;
-  -barlevel-border-color: transparent; // trough border color
   // fill style
   -barlevel-active-background-color: $selected_bg_color;
-  -barlevel-active-border-color: transparent;
   // overfill style (red in this case)
   -barlevel-overdrive-color: $destructive_color;
-  -barlevel-overdrive-border-color: transparent; //trough border when red;
   -barlevel-overdrive-separator-width:1px;
   // slider handler
   -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-  -slider-handle-border-width: 0;
-  -slider-handle-border-color: transparent; // because 0 width
 
-    // hc style
+  // hc style
-    @if $contrast == 'high' {
+  @if $contrast == 'high' {
-      -barlevel-background-color: transparentize($fg_color, 0.6);
+    -barlevel-background-color: transparentize($fg_color, 0.6);
-    }
+  }
+
+  &:hover {
+    color: if($variant == 'light', lighten($fg_color, 7%), $fg_color);
+  }
 }

js/ui/barLevel.js

@@ -28,15 +28,11 @@ export const BarLevel = GObject.registerClass({
         this._barLevelWidth = 0;
         this._barLevelHeight = 0;
 
-        this._barLevelBorderWidth = 0;
         this._overdriveSeparatorWidth = 0;
 
         this._barLevelColor = null;
         this._barLevelActiveColor = null;
         this._barLevelOverdriveColor = null;
-        this._barLevelBorderColor = null;
-        this._barLevelActiveBorderColor = null;
-        this._barLevelOverdriveBorderColor = null;
 
         super._init({
             style_class: 'barlevel',
@@ -112,29 +108,12 @@ export const BarLevel = GObject.registerClass({
 
         const themeNode = this.get_theme_node();
         this._barLevelHeight = themeNode.get_length('-barlevel-height');
-        this._barLevelBorderWidth =
-            Math.min(themeNode.get_length('-barlevel-border-width'), this._barLevelHeight);
         this._overdriveSeparatorWidth =
             themeNode.get_length('-barlevel-overdrive-separator-width');
 
         this._barLevelColor = themeNode.get_color('-barlevel-background-color');
         this._barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
         this._barLevelOverdriveColor = themeNode.get_color('-barlevel-overdrive-color');
-
-        const [hasBorderColor, barLevelBorderColor] =
-            themeNode.lookup_color('-barlevel-border-color', false);
-        this._barLevelBorderColor = hasBorderColor
-            ? barLevelBorderColor : this._barLevelColor;
-
-        const [hasActiveBorderColor, barLevelActiveBorderColor] =
-            themeNode.lookup_color('-barlevel-active-border-color', false);
-        this._barLevelActiveBorderColor = hasActiveBorderColor
-            ? barLevelActiveBorderColor : this._barLevelActiveColor;
-
-        const [hasOverdriveBorderColor, barLevelOverdriveBorderColor] =
-            themeNode.lookup_color('-barlevel-overdrive-border-color', false);
-        this._barLevelOverdriveBorderColor = hasOverdriveBorderColor
-            ? barLevelOverdriveBorderColor : this._barLevelOverdriveColor;
     }
 
     vfunc_repaint() {
@@ -165,7 +144,7 @@ export const BarLevel = GObject.registerClass({
         const overdriveSeparatorWidth = overdriveActive
             ? this._overdriveSeparatorWidth : 0;
 
-        let xcArcStart = barLevelBorderRadius + this._barLevelBorderWidth;
+        let xcArcStart = barLevelBorderRadius;
         let xcArcEnd = width - xcArcStart;
         if (rtl)
             [xcArcStart, xcArcEnd] = [xcArcEnd, xcArcStart];
@@ -180,9 +159,7 @@ export const BarLevel = GObject.registerClass({
         cr.lineTo(xcArcEnd, (height - this._barLevelHeight) / 2);
         cr.setSourceColor(this._barLevelColor);
         cr.fillPreserve();
-        cr.setSourceColor(this._barLevelBorderColor);
+        cr.fill();
-        cr.setLineWidth(this._barLevelBorderWidth);
-        cr.stroke();
 
         /* normal progress bar */
         let x = 0;
@@ -199,9 +176,7 @@ export const BarLevel = GObject.registerClass({
         if (this._value > 0)
             cr.setSourceColor(this._barLevelActiveColor);
         cr.fillPreserve();
-        cr.setSourceColor(this._barLevelActiveBorderColor);
+        cr.fill();
-        cr.setLineWidth(this._barLevelBorderWidth);
-        cr.stroke();
 
         /* overdrive progress barLevel */
         if (!rtl)
@@ -216,9 +191,7 @@ export const BarLevel = GObject.registerClass({
             cr.lineTo(x, (height - this._barLevelHeight) / 2);
             cr.setSourceColor(this._barLevelOverdriveColor);
             cr.fillPreserve();
-            cr.setSourceColor(this._barLevelOverdriveBorderColor);
+            cr.fill();
-            cr.setLineWidth(this._barLevelBorderWidth);
-            cr.stroke();
         }
 
         /* end progress bar arc */
@@ -238,8 +211,6 @@ export const BarLevel = GObject.registerClass({
             }
             cr.lineTo(endX, (height - this._barLevelHeight) / 2);
             cr.fillPreserve();
-            cr.setLineWidth(this._barLevelBorderWidth);
-            cr.stroke();
         }
 
         /* draw overdrive separator */
@@ -272,11 +243,11 @@ export const BarLevel = GObject.registerClass({
     }
 
     _getPreferredHeight() {
-        return this._barLevelHeight + this._barLevelBorderWidth;
+        return this._barLevelHeight;
     }
 
     _getPreferredWidth() {
-        return this._overdriveSeparatorWidth + this._barLevelBorderWidth;
+        return this._overdriveSeparatorWidth;
     }
 
     _getCurrentValue() {

js/ui/slider.js

@@ -20,6 +20,8 @@ export const Slider = GObject.registerClass({
             style_class: 'slider',
             can_focus: true,
             reactive: true,
+            track_hover: true,
+            hover: false,
             accessible_role: Atk.Role.SLIDER,
             x_expand: true,
         });
@@ -28,8 +30,6 @@ export const Slider = GObject.registerClass({
         this._dragging = false;
 
         this._handleRadius = 0;
-        this._handleBorderWidth = 0;
-        this._handleBorderColor = null;
 
         this._customAccessible.connect('get-minimum-increment', this._getMinimumIncrement.bind(this));
     }
@@ -39,11 +39,6 @@ export const Slider = GObject.registerClass({
 
         const themeNode = this.get_theme_node();
         this._handleRadius = themeNode.get_length('-slider-handle-radius');
-        this._handleBorderWidth =
-            themeNode.get_length('-slider-handle-border-width');
-        const [hasHandleColor, handleBorderColor] =
-            themeNode.lookup_color('-slider-handle-border-color', false);
-        this._handleBorderColor = hasHandleColor ? handleBorderColor : null;
     }
 
     vfunc_repaint() {
@@ -55,7 +50,7 @@ export const Slider = GObject.registerClass({
         let [width, height] = this.get_surface_size();
         const rtl = this.get_text_direction() === Clutter.TextDirection.RTL;
 
-        const ceiledHandleRadius = Math.ceil(this._handleRadius + this._handleBorderWidth);
+        const ceiledHandleRadius = Math.ceil(this._handleRadius);
         const handleY = height / 2;
 
         let handleX = ceiledHandleRadius +
@@ -67,23 +62,18 @@ export const Slider = GObject.registerClass({
         cr.setSourceColor(color);
         cr.arc(handleX, handleY, this._handleRadius, 0, 2 * Math.PI);
         cr.fillPreserve();
-        if (this._handleBorderColor && this._handleBorderWidth) {
-            cr.setSourceColor(this._handleBorderColor);
-            cr.setLineWidth(this._handleBorderWidth);
-            cr.stroke();
-        }
         cr.$dispose();
     }
 
     _getPreferredHeight() {
         const barHeight = super._getPreferredHeight();
-        const handleHeight = 2 * this._handleRadius + this._handleBorderWidth;
+        const handleHeight = 2 * this._handleRadius;
         return Math.max(barHeight, handleHeight);
     }
 
     _getPreferredWidth() {
         const barWidth = super._getPreferredWidth();
-        const handleWidth = 2 * this._handleRadius + this._handleBorderWidth;
+        const handleWidth = 2 * this._handleRadius;
         return Math.max(barWidth, handleWidth);
     }