barLevel: Add "overdrive" capability

Implement for barLevel an overdrive area. This is a zone represented via a
different styling to indicate that you are bypassing the normal zone of
a given level, without reaching yet the maximum limit.

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

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

@@ -133,6 +133,9 @@ StScrollBar {
   -barlevel-border-color: $borders_color; //trough border color
   -barlevel-active-background-color: $selected_bg_color; //active trough fill
   -barlevel-active-border-color: darken($selected_bg_color,10%); //active trough border
+  -barlevel-overdrive-color: $destructive_color;
+  -barlevel-overdrive-border-color: darken($destructive_color,10%);
+  -barlevel-overdrive-separator-width: 0.2em;
   -barlevel-border-width: 1px;
   -slider-handle-radius: 6px;
 }
@@ -588,6 +591,8 @@ StScrollBar {
     -barlevel-height: 0.6em;
     -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5);
     -barlevel-active-background-color: $osd_fg_color;
+    -barlevel-overdrive-color: $destructive_color;
+    -barlevel-overdrive-separator-width: 0.2em;
   }
 }
 

js/ui/barLevel.js

@@ -16,6 +16,7 @@ var BarLevel = new Lang.Class({
             throw TypeError('The bar level value must be a number');
         this._maxValue = 1;
         this._value = Math.max(Math.min(value, this._maxValue), 0);
+        this._overdriveStart = 1;
         this._barLevelWidth = 0;
 
         if (params == undefined)
@@ -54,6 +55,19 @@ var BarLevel = new Lang.Class({
             throw TypeError('The bar level max value must be a number');
 
         this._maxValue = Math.max(value, 1);
+        this._overdriveStart = Math.min(this._overdriveStart, this._maxValue);
+        this.actor.queue_repaint();
+    },
+
+    setOverdriveStart(value) {
+        if (isNaN(value))
+            throw TypeError('The overdrive limit value must be a number');
+        if (value > this._maxValue)
+            throw new Error(`Tried to set overdrive value to ${value}, ` +
+                `which is a number greater than the maximum allowed value ${this._maxValue}`);
+
+        this._overdriveStart = value;
+        this._value = Math.max(Math.min(value, this._maxValue), 0);
         this.actor.queue_repaint();
     },
 
@@ -68,6 +82,7 @@ var BarLevel = new Lang.Class({
 
         let barLevelColor = themeNode.get_color('-barlevel-background-color');
         let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
+        let barLevelOverdriveColor = themeNode.get_color('-barlevel-overdrive-color');
 
         let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1);
         let [hasBorderColor, barLevelBorderColor] =
@@ -78,6 +93,10 @@ var BarLevel = new Lang.Class({
             themeNode.lookup_color('-barlevel-active-border-color', false);
         if (!hasActiveBorderColor)
             barLevelActiveBorderColor = barLevelActiveColor;
+        let [hasOverdriveBorderColor, barLevelOverdriveBorderColor] =
+            themeNode.lookup_color('-barlevel-overdrive-border-color', false);
+        if (!hasOverdriveBorderColor)
+            barLevelOverdriveBorderColor = barLevelOverdriveColor;
 
         const TAU = Math.PI * 2;
 
@@ -85,6 +104,12 @@ var BarLevel = new Lang.Class({
         if (this._maxValue > 0)
             endX = barLevelBorderRadius + (width - 2 * barLevelBorderRadius) * this._value / this._maxValue;
 
+        let overdriveSeparatorX = barLevelBorderRadius + (width - 2 * barLevelBorderRadius) * this._overdriveStart / this._maxValue;
+        let overdriveActive = this._overdriveStart !== this._maxValue;
+        let overdriveSeparatorWidth = 0;
+        if (overdriveActive)
+            overdriveSeparatorWidth = themeNode.get_length('-barlevel-overdrive-separator-width');
+
         /* background bar */
         cr.arc(width - barLevelBorderRadius - barLevelBorderWidth, height / 2, barLevelBorderRadius, TAU * 3 / 4, TAU * 1 / 4);
         cr.lineTo(endX, (height + barLevelHeight) / 2);
@@ -97,9 +122,10 @@ var BarLevel = new Lang.Class({
         cr.stroke();
 
         /* normal progress bar */
+        let x = Math.min(endX, overdriveSeparatorX - overdriveSeparatorWidth / 2);
         cr.arc(barLevelBorderRadius + barLevelBorderWidth, height / 2, barLevelBorderRadius, TAU * 1 / 4, TAU * 3 / 4);
-        cr.lineTo(endX, (height - barLevelHeight) / 2);
+        cr.lineTo(x, (height - barLevelHeight) / 2);
-        cr.lineTo(endX, (height + barLevelHeight) / 2);
+        cr.lineTo(x, (height + barLevelHeight) / 2);
         cr.lineTo(barLevelBorderRadius + barLevelBorderWidth, (height + barLevelHeight) / 2);
         Clutter.cairo_set_source_color(cr, barLevelActiveColor);
         cr.fillPreserve();
@@ -107,8 +133,26 @@ var BarLevel = new Lang.Class({
         cr.setLineWidth(barLevelBorderWidth);
         cr.stroke();
 
+        /* overdrive progress barLevel */
+        x = Math.min(endX, overdriveSeparatorX) + overdriveSeparatorWidth / 2;
+        if (this._value > this._overdriveStart) {
+            cr.moveTo(x, (height - barLevelHeight) / 2);
+            cr.lineTo(endX, (height - barLevelHeight) / 2);
+            cr.lineTo(endX, (height + barLevelHeight) / 2);
+            cr.lineTo(x, (height + barLevelHeight) / 2);
+            cr.lineTo(x, (height - barLevelHeight) / 2);
+            Clutter.cairo_set_source_color(cr, barLevelOverdriveColor);
+            cr.fillPreserve();
+            Clutter.cairo_set_source_color(cr, barLevelOverdriveBorderColor);
+            cr.setLineWidth(barLevelBorderWidth);
+            cr.stroke();
+        }
+
         /* end progress bar arc */
+        if (this._value <= this._overdriveStart)
             Clutter.cairo_set_source_color(cr, barLevelActiveColor);
+        else
+            Clutter.cairo_set_source_color(cr, barLevelOverdriveColor);
         cr.arc(endX, height / 2, barLevelBorderRadius, TAU * 3 / 4, TAU * 1 / 4);
         cr.lineTo(Math.floor(endX), (height + barLevelHeight) / 2);
         cr.lineTo(Math.floor(endX), (height - barLevelHeight) / 2);
@@ -117,6 +161,20 @@ var BarLevel = new Lang.Class({
         cr.setLineWidth(barLevelBorderWidth);
         cr.stroke();
 
+        /* draw overdrive separator */
+        if (overdriveActive) {
+            cr.moveTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2);
+            cr.lineTo(overdriveSeparatorX + overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2);
+            cr.lineTo(overdriveSeparatorX + overdriveSeparatorWidth / 2, (height + barLevelHeight) / 2);
+            cr.lineTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height + barLevelHeight) / 2);
+            cr.lineTo(overdriveSeparatorX - overdriveSeparatorWidth / 2, (height - barLevelHeight) / 2);
+            if (this._value <= this._overdriveStart)
+                Clutter.cairo_set_source_color(cr, fgColor);
+            else
+                Clutter.cairo_set_source_color(cr, barLevelColor);
+            cr.fill();
+        }
+
         cr.$dispose();
     },
 
@@ -124,6 +182,10 @@ var BarLevel = new Lang.Class({
         return this._value;
     },
 
+    _getOverdriveStart(actor) {
+        return this._overdriveStart;
+    },
+
     _getMinimumValue(actor) {
         return 0;
     },