[gnome-shell] osdWindow: Reuse BarLevel drawing functionality

[Florian Müllner <fmuellner src gnome org>]

commit ed8e89bc195a9e56244109e63d1cb0026f498331
Author: Didier Roche <didrocks ubuntu com>
Date:   Thu Feb 8 19:22:29 2018 +0100

    osdWindow: Reuse BarLevel drawing functionality
    
    Reuse the BarLevel class to get similar drawing behavior as Slider.
    Rename theme css impacted properties and ensure that the osdWindow
    remains accessible.
    Ensure we don't force setting a custom border color like on the OSD.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=790280.

 data/theme/gnome-shell-sass/_common.scss | 10 +++-------
 js/ui/barLevel.js                        | 12 +++++++++---
 js/ui/osdWindow.js                       | 17 ++++++++---------
 3 files changed, 20 insertions(+), 19 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index de107d7b7..dd6287f8e 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -585,13 +585,9 @@ StScrollBar {
   .osd-monitor-label { font-size: 3em; }
   .level {
     height: 0.6em;
-    border-radius: 0.3em;
-    background-color: transparentize(darken($osd_bg_color,15%),0.5);
-    color: $osd_fg_color;
-  }
-  .level-bar {
-    background-color: $osd_fg_color;
-    border-radius: 0.3em;
+    -barlevel-height: 0.6em;
+    -barlevel-background-color: transparentize(darken($osd_bg_color,15%),0.5);
+    -barlevel-active-background-color: $osd_fg_color;
   }
 }
 
diff --git a/js/ui/barLevel.js b/js/ui/barLevel.js
index c018ef31b..2b35496b4 100644
--- a/js/ui/barLevel.js
+++ b/js/ui/barLevel.js
@@ -60,9 +60,15 @@ var BarLevel = new Lang.Class({
         let barLevelColor = themeNode.get_color('-barlevel-background-color');
         let barLevelActiveColor = themeNode.get_color('-barlevel-active-background-color');
 
-        let barLevelBorderWidth = themeNode.get_length('-barlevel-border-width');
-        let barLevelBorderColor = themeNode.get_color('-barlevel-border-color');
-        let barLevelActiveBorderColor = themeNode.get_color('-barlevel-active-border-color');
+        let barLevelBorderWidth = Math.min(themeNode.get_length('-barlevel-border-width'), 1);
+        let [hasBorderColor, barLevelBorderColor] =
+            themeNode.lookup_color('-barlevel-border-color', false);
+        if (!hasBorderColor)
+            barLevelBorderColor = barLevelColor;
+        let [hasActiveBorderColor, barLevelActiveBorderColor] =
+            themeNode.lookup_color('-barlevel-active-border-color', false);
+        if (!hasActiveBorderColor)
+            barLevelActiveBorderColor = barLevelActiveColor;
 
         const TAU = Math.PI * 2;
 
diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index 5bd91c7fa..fe8cf780a 100644
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -4,6 +4,7 @@ const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
 const St = imports.gi.St;
 
+const BarLevel = imports.ui.barLevel;
 const Lang = imports.lang;
 const Layout = imports.ui.layout;
 const Main = imports.ui.main;
@@ -17,16 +18,17 @@ var LEVEL_ANIMATION_TIME = 0.1;
 
 var LevelBar = new Lang.Class({
     Name: 'LevelBar',
+    Extends: BarLevel.BarLevel,
 
     _init() {
         this._level = 0;
 
-        this.actor = new St.Bin({ style_class: 'level',
-                                  x_align: St.Align.START,
-                                  y_fill: true });
-        this._bar = new St.Widget({ style_class: 'level-bar' });
+        let params = {
+            styleClass: 'level',
+        }
+        this.parent(this._level, params);
 
-        this.actor.set_child(this._bar);
+        this.actor.accessible_name = _("Volume");
 
         this.actor.connect('notify::width', () => { this.level = this.level; });
     },
@@ -38,10 +40,7 @@ var LevelBar = new Lang.Class({
     set level(value) {
         this._level = Math.max(0, Math.min(value, 100));
 
-        let alloc = this.actor.get_allocation_box();
-        let newWidth = Math.round((alloc.x2 - alloc.x1) * this._level / 100);
-        if (newWidth != this._bar.width)
-            this._bar.width = newWidth;
+        this.setValue(this._level / 100);
     }
 });