Only load category button images when needed

Before we were loading them every time size_allocate was called,
even if the widget was not even realized. Now just check during
draw if the pixbuf needs to be reloaded. Also draw the pixbuf
directly with cairo which cuts down on widget hierarchy.
[endlessm/eos-sdk#349]

1 files changed, 19 insertions, 21 deletions

diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
index 54f0b79..4ca1d90 100644
--- a/wikipedia/widgets/category_button.js
+++ b/wikipedia/widgets/category_button.js
@@ -61,8 +61,8 @@ const CategoryButton = new Lang.Class({
         this._category_title = null;
         this._clickable_category = null;
         this._is_main_category = null;
+        this._pixbuf = null;
 
-        this._overlay = new Gtk.Overlay();
         this._eventbox = new Gtk.EventBox({
             expand: true
         });
@@ -92,22 +92,15 @@ const CategoryButton = new Lang.Class({
         context.add_class(EndlessWikipedia.STYLE_CLASS_TITLE);
         context.add_class(EndlessWikipedia.STYLE_CLASS_CATEGORY);
         context.add_class(EndlessWikipedia.STYLE_CLASS_FRONT_PAGE);
-        this._image = new Gtk.Image({
-            expand: true,
-            halign: Gtk.Align.FILL,
-            valign: Gtk.Align.FILL
-        });
 
         // Parent constructor sets all properties
         this.parent(props);
 
         // Put widgets together
-        this.add(this._overlay);
-        this._overlay.add(this._image);
         this._eventbox_grid.add(this._label);
         this._eventbox_grid.add(this._arrow);
         this._eventbox.add(this._eventbox_grid);
-        this._overlay.add_overlay(this._eventbox);
+        this.add(this._eventbox);
         this.show_all();
 
         // Connect signals
@@ -121,12 +114,6 @@ const CategoryButton = new Lang.Class({
 
     set image_uri(value) {
         this._image_uri = value;
-        if(this._image) {
-            let allocation = this.get_allocation();
-            let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
-                allocation.width, allocation.height);
-            this._image.set_from_pixbuf(new_pixbuf);
-        }
     },
 
     get category_title() {
@@ -189,13 +176,24 @@ const CategoryButton = new Lang.Class({
         }
     },
 
-    vfunc_size_allocate: function(allocation) {
-        this.parent(allocation);
-        if(this._image_uri !== "" && this._image_uri != null) {
-            let new_pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
-                allocation.width, allocation.height);
-            this._image.set_from_pixbuf(new_pixbuf);
+    // Reloads the pixbuf from the gresource at the proper size if necessary
+    _update_pixbuf: function () {
+        if (this._image_uri === "" || this._image_uri === null)
+            return;
+        let allocation = this.get_allocation();
+        if (this._pixbuf === null || this._pixbuf.get_width() !== allocation.width ||
+                                     this._pixbuf.get_height() !== allocation.height)
+            this._pixbuf = Utils.load_pixbuf_cover(Utils.resourceUriToPath(this._image_uri),
+                                                   allocation.width, allocation.height);
+    },
+
+    vfunc_draw: function (cr) {
+        this._update_pixbuf();
+        if (this._pixbuf !== null) {
+            Gdk.cairo_set_source_pixbuf(cr, this._pixbuf, 0, 0);
+            cr.paint();
         }
+        this.parent(cr);
     },
 
     // HANDLERS