[gnome-shell] osdWindow: don't use custom cairo drawing

[Cosimo Cecchi <cosimoc src gnome org>]

commit 9b07ce1d0d543d6b8a791f38387e85fbf94ce2d0
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Sat Nov 21 13:06:08 2015 -0800

    osdWindow: don't use custom cairo drawing
    
    We can just set the width on a regular actor inside the StBin.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=758471

 data/theme/gnome-shell-high-contrast.css |    3 ++
 data/theme/gnome-shell-sass              |    2 +-
 data/theme/gnome-shell.css               |    3 ++
 js/ui/osdWindow.js                       |   37 +++++-------------------------
 4 files changed, 13 insertions(+), 32 deletions(-)
---
diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 8b61bc1..bb1255a 100644
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -535,6 +535,9 @@ StScrollBar {
     border-radius: 0.3em;
     background-color: rgba(11, 12, 13, 0.5);
     color: #eeeeec; }
+  .osd-window .level-bar {
+    background-color: #eeeeec;
+    border-radius: 0.3em; }
 
 /* App Switcher */
 .switcher-popup {
diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 6ccc180..31aac7f 160000
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 6ccc1808114d803f6699877143c614f14aaf14ea
+Subproject commit 31aac7f7b524786965e4c9a1890009ea362b9c87
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ebdd7fd..d3155ed 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -535,6 +535,9 @@ StScrollBar {
     border-radius: 0.3em;
     background-color: rgba(11, 12, 13, 0.5);
     color: #eeeeec; }
+  .osd-window .level-bar {
+    background-color: #eeeeec;
+    border-radius: 0.3em; }
 
 /* App Switcher */
 .switcher-popup {
diff --git a/js/ui/osdWindow.js b/js/ui/osdWindow.js
index bcdc391..53ccc97 100644
--- a/js/ui/osdWindow.js
+++ b/js/ui/osdWindow.js
@@ -22,9 +22,9 @@ const LevelBar = new Lang.Class({
         this._level = 0;
 
         this.actor = new St.Bin({ style_class: 'level',
-                                  x_fill: true, y_fill: true });
-        this._bar = new St.DrawingArea();
-        this._bar.connect('repaint', Lang.bind(this, this._repaint));
+                                  x_align: St.Align.START,
+                                  y_fill: true });
+        this._bar = new St.Widget({ style_class: 'level-bar' });
 
         this.actor.set_child(this._bar);
     },
@@ -38,35 +38,10 @@ const LevelBar = new Lang.Class({
         if (newValue == this._level)
             return;
         this._level = newValue;
-        this._bar.queue_repaint();
-    },
-
-    _repaint: function() {
-        let cr = this._bar.get_context();
-
-        let node = this.actor.get_theme_node();
-        let radius = node.get_border_radius(0); // assume same radius for all corners
-        Clutter.cairo_set_source_color(cr, node.get_foreground_color());
-
-        let [w, h] = this._bar.get_surface_size();
-        w *= (this._level / 100.);
-
-        if (w == 0)
-            return;
 
-        cr.moveTo(radius, 0);
-        if (w >= radius)
-            cr.arc(w - radius, radius, radius, 1.5 * Math.PI, 2. * Math.PI);
-        else
-            cr.lineTo(w, 0);
-        if (w >= radius)
-            cr.arc(w - radius, h - radius, radius, 0, 0.5 * Math.PI);
-        else
-            cr.lineTo(w, h);
-        cr.arc(radius, h - radius, radius, 0.5 * Math.PI, Math.PI);
-        cr.arc(radius, radius, radius, Math.PI, 1.5 * Math.PI);
-        cr.fill();
-        cr.$dispose();
+        let width = this.actor.width;
+        width *= (this._level / 100.);
+        this._bar.width = width;
     }
 });