Arch Linux

gravitezero

Member

Registered: 2012-05-03

Posts: 11

[Gnome-shell] make the notification image size depends of the sender

Hi,

I just set up my Arch and decided to make it beautiful.
And one of the things upset me was the size of the profil picture in Gwibber notification.

So I decided to look a bit into the Gnome-Shell code to change that.
Now, Gwibber notification will be displayed with 48px images, while Rhythmbox will still display 125px images.

Here is the code :
In /usr/share/themes/<your-theme>/gnome-shell/
gnome-shell.css

/* We use row-span = 2 for the image cell, which prevents its height preferences to be
   taken into account during allocation, so its height ends up being limited by the height
   of the content in the other rows. To avoid showing a stretched image, we set the minimum
   height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159*/
.notification-with-image {
    min-height: 159px;
}
/*=== ADD THIS === */
/* Same for twitter notification :
	24 + 48 + 10 = 82*/*/
.notification-with-twitter-image {
    min-height: 82px;
}
/*=== END ADD ====*/

Add the .notification-with-twitter-image section.
The idea is to differentiate the two type of notification to apply different height on it.

In /usr/share/gnome-shell/js/ui
messageTray.js

    setImage: function(image) {
        if (this._imageBin)
            this.unsetImage();
        this._imageBin = new St.Bin();
        this._imageBin.child = image;
        this._imageBin.opacity = 230;
        this._table.add_style_class_name('multi-line-notification');
        /*this._table.add_style_class_name('notification-with-image');*/
/*=== ADD THIS === */
        if (this.IMAGE_SIZE === 48) {
            this._table.add_style_class_name('notification-with-twitter-image');
        } else { // IMAGE_SIZE === 125
            this._table.add_style_class_name('notification-with-image');
        }
/*=== END ADD ==== */
        this._addBannerBody();
        this._updateLastColumnSettings();
        this._table.add(this._imageBin, { row: 1,
                                          col: 1,
                                          row_span: 2,
                                          x_expand: false,
                                          y_expand: false,
                                          x_fill: false,
                                          y_fill: false });
    },

    unsetImage: function() {
        if (this._imageBin) {
            this._table.remove_style_class_name('notification-with-image');
/*=== ADD THIS === */
            this._table.remove_style_class_name('notification-with-twitter-image');
/*=== END ADD ==== */
            this._table.remove_actor(this._imageBin);
            this._imageBin = null;
            this._updateLastColumnSettings();
            if (!this._scrollArea && !this._actionArea)
                this._table.remove_style_class_name('multi-line-notification');
        }
    },

Here we add everything related to notification-with-twitter-image in both functions.
Adding the class, and removing the class.

notificationDaemon.js

        // We only display a large image if an icon is also specified.
        if (icon && (hints['image-data'] || hints['image-path'])) {
            let image = null;
/*=== ADD THIS === */
            if (ndata.appName === 'Gwibber') {
                notification.IMAGE_SIZE = 48;
            }
/*=== END ADD ==== */
            if (hints['image-data']) {
                let [width, height, rowStride, hasAlpha,
                 bitsPerSample, nChannels, data] = hints['image-data'];
                image = St.TextureCache.get_default().load_from_raw(data, hasAlpha,
                                                                    width, height, rowStride, notification.IMAGE_SIZE);
            } else if (hints['image-path']) {
                image = St.TextureCache.get_default().load_uri_async(GLib.filename_to_uri(hints['image-path'], null),
                                                                     notification.IMAGE_SIZE,
                                                                     notification.IMAGE_SIZE);
            }
            notification.setImage(image);
        } else {
            notification.unsetImage();
        }

Here, we modify the IMAGE_SIZE depending if it's a Gwibber notification.

That's all.

Edit: Does someone know how to submit this patch to Gnome-Shell developers ?

Last edited by gravitezero (2012-05-03 15:55:43)

coldjeanz

Member

Registered: 2012-06-10

Posts: 2

Re: [Gnome-shell] make the notification image size depends of the sender

Hey

Is there a specific place in those files to add these codes? I just added them at the end of each of them and it ended up wrecking my system so I had to remove them.

gravitezero

Member

Registered: 2012-05-03

Posts: 11

Re: [Gnome-shell] make the notification image size depends of the sender

Hi,

I wasn't exactly clear, but yes there is a specific place to add the code.

My patches only add code to the existing one.
You should search in original file for code I didn't add (outside the "===== ADD THIS =====" blocks), and then add my code were I added it.

coldjeanz

Member

Registered: 2012-06-10

Posts: 2

Re: [Gnome-shell] make the notification image size depends of the sender

got it. thanks it works perfectly, no more ugly twitter profile pictures!