~ubuntu-branches/ubuntu/raring/gnome-shell/raring-proposed

// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-

const Clutter = imports.gi.Clutter;

const GLib = imports.gi.GLib;

const Gio = imports.gi.Gio;

const Gtk = imports.gi.Gtk;

const Atk = imports.gi.Atk;

const Lang = imports.lang;

const Mainloop = imports.mainloop;

const Meta = imports.gi.Meta;

const Pango = imports.gi.Pango;

const Shell = imports.gi.Shell;

const Signals = imports.signals;

const St = imports.gi.St;

const BoxPointer = imports.ui.boxpointer;

const CtrlAltTab = imports.ui.ctrlAltTab;

const GnomeSession = imports.misc.gnomeSession;

const GrabHelper = imports.ui.grabHelper;

const Lightbox = imports.ui.lightbox;

const Main = imports.ui.main;

const PointerWatcher = imports.ui.pointerWatcher;

const PopupMenu = imports.ui.popupMenu;

const Params = imports.misc.params;

const Tweener = imports.ui.tweener;

const Util = imports.misc.util;

const SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';

const ANIMATION_TIME = 0.2;

const NOTIFICATION_TIMEOUT = 4;

const SUMMARY_TIMEOUT = 1;

const LONGER_SUMMARY_TIMEOUT = 4;

const HIDE_TIMEOUT = 0.2;

const LONGER_HIDE_TIMEOUT = 0.6;

const NOTIFICATION_ICON_SIZE = 24;

// We delay hiding of the tray if the mouse is within MOUSE_LEFT_ACTOR_THRESHOLD

// range from the point where it left the tray.

const MOUSE_LEFT_ACTOR_THRESHOLD = 20;

// Time the user needs to leave the mouse on the bottom pixel row to open the tray

const TRAY_DWELL_TIME = 1000; // ms

// Time resolution when tracking the mouse to catch the open tray dwell

const TRAY_DWELL_CHECK_INTERVAL = 100; // ms

const IDLE_TIME = 1000;

const State = {

    HIDDEN:  0,

    SHOWING: 1,

    SHOWN:   2,

    HIDING:  3

};

// These reasons are useful when we destroy the notifications received through

// the notification daemon. We use EXPIRED for transient notifications that the

// user did not interact with, DISMISSED for all other notifications that were

// destroyed as a result of a user action, and SOURCE_CLOSED for the notifications

// that were requested to be destroyed by the associated source.

const NotificationDestroyedReason = {

    EXPIRED: 1,

    DISMISSED: 2,

    SOURCE_CLOSED: 3

};

// Message tray has its custom Urgency enumeration. LOW, NORMAL and CRITICAL

// urgency values map to the corresponding values for the notifications received

// through the notification daemon. HIGH urgency value is used for chats received

// through the Telepathy client.

const Urgency = {

    LOW: 0,

    NORMAL: 1,

    HIGH: 2,

    CRITICAL: 3

}

function _fixMarkup(text, allowMarkup) {

    if (allowMarkup) {

        // Support &, ", ', < and >, escape all other

        // occurrences of '&'.

        let _text = text.replace(/&(?!amp;|quot;|apos;|lt;|gt;)/g, '&');

        // Support <b>, <i>, and <u>, escape anything else

        // so it displays as raw markup.

        _text = _text.replace(/<(?!\/?[biu]>)/g, '&lt;');

        try {

            Pango.parse_markup(_text, -1, '');

            return _text;

        } catch (e) {}

    }

    // !allowMarkup, or invalid markup

    return GLib.markup_escape_text(text, -1);

}

const URLHighlighter = new Lang.Class({

    Name: 'URLHighlighter',

    _init: function(text, lineWrap, allowMarkup) {

        if (!text)

            text = '';

        this.actor = new St.Label({ reactive: true, style_class: 'url-highlighter' });

        this._linkColor = '#ccccff';

        this.actor.connect('style-changed', Lang.bind(this, function() {

            let [hasColor, color] = this.actor.get_theme_node().lookup_color('link-color', false);

            if (hasColor) {

                let linkColor = color.to_string().substr(0, 7);

                if (linkColor != this._linkColor) {

                    this._linkColor = linkColor;

                    this._highlightUrls();

                }

            }

        }));

        if (lineWrap) {

            this.actor.clutter_text.line_wrap = true;

            this.actor.clutter_text.line_wrap_mode = Pango.WrapMode.WORD_CHAR;

            this.actor.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;

        }

        this.setMarkup(text, allowMarkup);

        this.actor.connect('button-press-event', Lang.bind(this, function(actor, event) {

            // Don't try to URL highlight when invisible.

            // The MessageTray doesn't actually hide us, so

            // we need to check for paint opacities as well.

            if (!actor.visible || actor.get_paint_opacity() == 0)

                return false;

            // Keep Notification.actor from seeing this and taking

            // a pointer grab, which would block our button-release-event

            // handler, if an URL is clicked

            return this._findUrlAtPos(event) != -1;

        }));

        this.actor.connect('button-release-event', Lang.bind(this, function (actor, event) {

            if (!actor.visible || actor.get_paint_opacity() == 0)

                return false;

            let urlId = this._findUrlAtPos(event);

            if (urlId != -1) {

                let url = this._urls[urlId].url;

                if (url.indexOf(':') == -1)

                    url = 'http://' + url;

                try {

                    Gio.app_info_launch_default_for_uri(url, global.create_app_launch_context());

                    return true;

                } catch (e) {

                    // TODO: remove this after gnome 3 release

                    Util.spawn(['gvfs-open', url]);

                    return true;

                }

            }

            return false;

        }));

        this.actor.connect('motion-event', Lang.bind(this, function(actor, event) {

            if (!actor.visible || actor.get_paint_opacity() == 0)

                return false;

            let urlId = this._findUrlAtPos(event);

            if (urlId != -1 && !this._cursorChanged) {

                global.set_cursor(Shell.Cursor.POINTING_HAND);

                this._cursorChanged = true;

            } else if (urlId == -1) {

                global.unset_cursor();

                this._cursorChanged = false;

            }

            return false;

        }));

        this.actor.connect('leave-event', Lang.bind(this, function() {

            if (!this.actor.visible || this.actor.get_paint_opacity() == 0)

                return;

            if (this._cursorChanged) {

                this._cursorChanged = false;

                global.unset_cursor();

            }

        }));

    },

    setMarkup: function(text, allowMarkup) {

        text = text ? _fixMarkup(text, allowMarkup) : '';

        this._text = text;

        this.actor.clutter_text.set_markup(text);

        /* clutter_text.text contain text without markup */

        this._urls = Util.findUrls(this.actor.clutter_text.text);

        this._highlightUrls();

    },

    _highlightUrls: function() {

        // text here contain markup

        let urls = Util.findUrls(this._text);

        let markup = '';

        let pos = 0;

        for (let i = 0; i < urls.length; i++) {

            let url = urls[i];

            let str = this._text.substr(pos, url.pos - pos);

            markup += str + '<span foreground="' + this._linkColor + '"><u>' + url.url + '</u></span>';

            pos = url.pos + url.url.length;

        }

        markup += this._text.substr(pos);

        this.actor.clutter_text.set_markup(markup);

    },

    _findUrlAtPos: function(event) {

        let success;

        let [x, y] = event.get_coords();

        [success, x, y] = this.actor.transform_stage_point(x, y);

        let find_pos = -1;

        for (let i = 0; i < this.actor.clutter_text.text.length; i++) {

            let [success, px, py, line_height] = this.actor.clutter_text.position_to_coords(i);

            if (py > y || py + line_height < y || x < px)

                continue;

            find_pos = i;

        }

        if (find_pos != -1) {

            for (let i = 0; i < this._urls.length; i++)

            if (find_pos >= this._urls[i].pos &&

                this._urls[i].pos + this._urls[i].url.length > find_pos)

                return i;

        }

        return -1;

    }

});

function makeCloseButton() {

    let closeButton = new St.Button({ style_class: 'notification-close'});

    // This is a bit tricky. St.Bin has its own x-align/y-align properties

    // that compete with Clutter's properties. This should be fixed for

    // Clutter 2.0. Since St.Bin doesn't define its own setters, the

    // setters are a workaround to get Clutter's version.

    closeButton.set_x_align(Clutter.ActorAlign.END);

    closeButton.set_y_align(Clutter.ActorAlign.START);

    // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand

    // to respect the alignments.

    closeButton.set_x_expand(true);

    closeButton.set_y_expand(true);

    closeButton.connect('style-changed', function() {

        let themeNode = closeButton.get_theme_node();

        // libcroco doesn't support negative units

        let direction = closeButton.get_text_direction() == Clutter.TextDirection.RTL ? -1 : 1;

        closeButton.translation_x = direction * themeNode.get_length('-shell-close-overlap-x');

        // libcroco doesn't support negative units

        closeButton.translation_y = -themeNode.get_length('-shell-close-overlap-y');

    });

    return closeButton;

}

// Notification:

// @source: the notification's Source

// @title: the title

// @banner: the banner text

// @params: optional additional params

//

// Creates a notification. In the banner mode, the notification

// will show an icon, @title (in bold) and @banner, all on a single

// line (with @banner ellipsized if necessary).

//

// The notification will be expandable if either it has additional

// elements that were added to it or if the @banner text did not

// fit fully in the banner mode. When the notification is expanded,

// the @banner text from the top line is always removed. The complete

// @banner text is added as the first element in the content section,

// unless 'customContent' parameter with the value 'true' is specified

// in @params.

//

// Additional notification content can be added with addActor() and

// addBody() methods. The notification content is put inside a

// scrollview, so if it gets too tall, the notification will scroll

// rather than continue to grow. In addition to this main content

// area, there is also a single-row action area, which is not

// scrolled and can contain a single actor. The action area can

// be set by calling setActionArea() method. There is also a

// convenience method addButton() for adding a button to the action

// area.

//

// @params can contain values for 'customContent', 'body', 'icon',

// 'titleMarkup', 'bannerMarkup', 'bodyMarkup', and 'clear'

// parameters.

//

// If @params contains a 'customContent' parameter with the value %true,

// then @banner will not be shown in the body of the notification when the

// notification is expanded and calls to update() will not clear the content

// unless 'clear' parameter with value %true is explicitly specified.

//

// If @params contains a 'body' parameter, then that text will be added to

// the content area (as with addBody()).

//

// By default, the icon shown is created by calling

// source.createIcon(). However, if @params contains an 'icon'

// parameter, the passed in icon will be used.

//

// If @params contains a 'titleMarkup', 'bannerMarkup', or

// 'bodyMarkup' parameter with the value %true, then the corresponding

// element is assumed to use pango markup. If the parameter is not

// present for an element, then anything that looks like markup in

// that element will appear literally in the output.

//

// If @params contains a 'clear' parameter with the value %true, then

// the content and the action area of the notification will be cleared.

// The content area is also always cleared if 'customContent' is false

// because it might contain the @banner that didn't fit in the banner mode.

const Notification = new Lang.Class({

    Name: 'Notification',

    IMAGE_SIZE: 125,

    _init: function(source, title, banner, params) {

        this.source = source;

        this.title = title;

        this.urgency = Urgency.NORMAL;

        this.resident = false;

        // 'transient' is a reserved keyword in JS, so we have to use an alternate variable name

        this.isTransient = false;

        this.expanded = false;

        this.focused = false;

        this.acknowledged = false;

        this._destroyed = false;

        this._useActionIcons = false;

        this._customContent = false;

        this._bannerBodyText = null;

        this._bannerBodyMarkup = false;

        this._titleFitsInBannerMode = true;

        this._titleDirection = Clutter.TextDirection.DEFAULT;

        this._spacing = 0;

        this._scrollPolicy = Gtk.PolicyType.AUTOMATIC;

        this._imageBin = null;

        source.connect('destroy', Lang.bind(this,

            function (source, reason) {

                this.destroy(reason);

            }));

        this.actor = new St.Button({ accessible_role: Atk.Role.NOTIFICATION });

        this.actor.add_style_class_name('notification-unexpanded');

        this.actor._delegate = this;

        this.actor.connect('clicked', Lang.bind(this, this._onClicked));

        this.actor.connect('destroy', Lang.bind(this, this._onDestroy));

        this._table = new St.Table({ style_class: 'notification',

                                     reactive: true });

        this._table.connect('style-changed', Lang.bind(this, this._styleChanged));

        this.actor.set_child(this._table);

        // The first line should have the title, followed by the

        // banner text, but ellipsized if they won't both fit. We can't

        // make St.Table or St.BoxLayout do this the way we want (don't

        // show banner at all if title needs to be ellipsized), so we

        // use Shell.GenericContainer.

        this._bannerBox = new Shell.GenericContainer();

        this._bannerBox.connect('get-preferred-width', Lang.bind(this, this._bannerBoxGetPreferredWidth));

        this._bannerBox.connect('get-preferred-height', Lang.bind(this, this._bannerBoxGetPreferredHeight));

        this._bannerBox.connect('allocate', Lang.bind(this, this._bannerBoxAllocate));

        this._table.add(this._bannerBox, { row: 0,

                                           col: 1,

                                           col_span: 2,

                                           x_expand: false,

                                           y_expand: false,

                                           y_fill: false });

        // This is an empty cell that overlaps with this._bannerBox cell to ensure

        // that this._bannerBox cell expands horizontally, while not forcing the

        // this._imageBin that is also in col: 2 to expand horizontally.

        this._table.add(new St.Bin(), { row: 0,

                                        col: 2,

                                        y_expand: false,

                                        y_fill: false });

        this._titleLabel = new St.Label();

        this._bannerBox.add_actor(this._titleLabel);

        this._bannerUrlHighlighter = new URLHighlighter();

        this._bannerLabel = this._bannerUrlHighlighter.actor;

        this._bannerBox.add_actor(this._bannerLabel);

        this.update(title, banner, params);

    },

    // update:

    // @title: the new title

    // @banner: the new banner

    // @params: as in the Notification constructor

    //

    // Updates the notification by regenerating its icon and updating

    // the title/banner. If @params.clear is %true, it will also

    // remove any additional actors/action buttons previously added.

    update: function(title, banner, params) {

        params = Params.parse(params, { customContent: false,

                                        body: null,

                                        icon: null,

                                        secondaryIcon: null,

                                        titleMarkup: false,

                                        bannerMarkup: false,

                                        bodyMarkup: false,

                                        clear: false });

        this._customContent = params.customContent;

        let oldFocus = global.stage.key_focus;

        if (this._icon && (params.icon || params.clear)) {

            this._icon.destroy();

            this._icon = null;

        }

        if (this._secondaryIcon && (params.secondaryIcon || params.clear)) {

            this._secondaryIcon.destroy();

            this._secondaryIcon = null;

        }

        // We always clear the content area if we don't have custom

        // content because it might contain the @banner that didn't

        // fit in the banner mode.

        if (this._scrollArea && (!this._customContent || params.clear)) {

            if (oldFocus && this._scrollArea.contains(oldFocus))

                this.actor.grab_key_focus();

            this._scrollArea.destroy();

            this._scrollArea = null;

            this._contentArea = null;

        }

        if (this._actionArea && params.clear) {

            if (oldFocus && this._actionArea.contains(oldFocus))

                this.actor.grab_key_focus();

            this._actionArea.destroy();

            this._actionArea = null;

            this._buttonBox = null;

        }

        if (this._imageBin && params.clear)

            this.unsetImage();

        if (!this._scrollArea && !this._actionArea && !this._imageBin)

            this._table.remove_style_class_name('multi-line-notification');

        if (!this._icon) {

            this._icon = params.icon || this.source.createIcon(NOTIFICATION_ICON_SIZE);

            this._table.add(this._icon, { row: 0,

                                          col: 0,

                                          x_expand: false,

                                          y_expand: false,

                                          y_fill: false,

                                          y_align: St.Align.START });

        }

        if (!this._secondaryIcon) {

            this._secondaryIcon = params.secondaryIcon;

            if (this._secondaryIcon)

                this._bannerBox.add_actor(this._secondaryIcon);

        }

        this.title = title;

        title = title ? _fixMarkup(title.replace(/\n/g, ' '), params.titleMarkup) : '';

        this._titleLabel.clutter_text.set_markup('<b>' + title + '</b>');

        if (Pango.find_base_dir(title, -1) == Pango.Direction.RTL)

            this._titleDirection = Clutter.TextDirection.RTL;

        else

            this._titleDirection = Clutter.TextDirection.LTR;

        // Let the title's text direction control the overall direction

        // of the notification - in case where different scripts are used

        // in the notification, this is the right thing for the icon, and

        // arguably for action buttons as well. Labels other than the title

        // will be allocated at the available width, so that their alignment

        // is done correctly automatically.

        this._table.set_text_direction(this._titleDirection);

        // Unless the notification has custom content, we save this._bannerBodyText

        // to add it to the content of the notification if the notification is

        // expandable due to other elements in its content area or due to the banner

        // not fitting fully in the single-line mode.

        this._bannerBodyText = this._customContent ? null : banner;

        this._bannerBodyMarkup = params.bannerMarkup;

        banner = banner ? banner.replace(/\n/g, '  ') : '';

        this._bannerUrlHighlighter.setMarkup(banner, params.bannerMarkup);

        this._bannerLabel.queue_relayout();

        // Add the bannerBody now if we know for sure we'll need it

        if (this._bannerBodyText && this._bannerBodyText.indexOf('\n') > -1)

            this._addBannerBody();

        if (params.body)

            this.addBody(params.body, params.bodyMarkup);

        this.updated();

    },

    setIconVisible: function(visible) {

        this._icon.visible = visible;

    },

    enableScrolling: function(enableScrolling) {

        this._scrollPolicy = enableScrolling ? Gtk.PolicyType.AUTOMATIC : Gtk.PolicyType.NEVER;

        if (this._scrollArea) {

            this._scrollArea.vscrollbar_policy = this._scrollPolicy;

            this._scrollArea.enable_mouse_scrolling = enableScrolling;

        }

    },

    _createScrollArea: function() {

        this._table.add_style_class_name('multi-line-notification');

        this._scrollArea = new St.ScrollView({ style_class: 'notification-scrollview',

                                               vscrollbar_policy: this._scrollPolicy,

                                               hscrollbar_policy: Gtk.PolicyType.NEVER });

        this._table.add(this._scrollArea, { row: 1,

                                            col: 2 });

        this._updateLastColumnSettings();

        this._contentArea = new St.BoxLayout({ style_class: 'notification-body',

                                               vertical: true });

        this._scrollArea.add_actor(this._contentArea);

        // If we know the notification will be expandable, we need to add

        // the banner text to the body as the first element.

        this._addBannerBody();

    },

    // addActor:

    // @actor: actor to add to the body of the notification

    //

    // Appends @actor to the notification's body

    addActor: function(actor, style) {

        if (!this._scrollArea) {

            this._createScrollArea();

        }

        this._contentArea.add(actor, style ? style : {});

        this.updated();

    },

    // addBody:

    // @text: the text

    // @markup: %true if @text contains pango markup

    // @style: style to use when adding the actor containing the text

    //

    // Adds a multi-line label containing @text to the notification.

    //

    // Return value: the newly-added label

    addBody: function(text, markup, style) {

        let label = new URLHighlighter(text, true, markup);

        this.addActor(label.actor, style);

        return label.actor;

    },

    _addBannerBody: function() {

        if (this._bannerBodyText) {

            let text = this._bannerBodyText;

            this._bannerBodyText = null;

            this.addBody(text, this._bannerBodyMarkup);

        }

    },

    // scrollTo:

    // @side: St.Side.TOP or St.Side.BOTTOM

    //

    // Scrolls the content area (if scrollable) to the indicated edge

    scrollTo: function(side) {

        let adjustment = this._scrollArea.vscroll.adjustment;

        if (side == St.Side.TOP)

            adjustment.value = adjustment.lower;

        else if (side == St.Side.BOTTOM)

            adjustment.value = adjustment.upper;

    },

    // setActionArea:

    // @actor: the actor

    // @props: (option) St.Table child properties

    //

    // Puts @actor into the action area of the notification, replacing

    // the previous contents

    setActionArea: function(actor, props) {

        if (this._actionArea) {

            this._actionArea.destroy();

            this._actionArea = null;

            if (this._buttonBox)

                this._buttonBox = null;

        } else {

            this._addBannerBody();

        }

        this._actionArea = actor;

        if (!props)

            props = {};

        props.row = 2;

        props.col = 2;

        this._table.add_style_class_name('multi-line-notification');

        this._table.add(this._actionArea, props);

        this._updateLastColumnSettings();

        this.updated();

    },

    _updateLastColumnSettings: function() {

        if (this._scrollArea)

            this._table.child_set(this._scrollArea, { col: this._imageBin ? 2 : 1,

                                                      col_span: this._imageBin ? 1 : 2 });

        if (this._actionArea)

            this._table.child_set(this._actionArea, { col: this._imageBin ? 2 : 1,

                                                      col_span: this._imageBin ? 1 : 2 });

    },

    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');

        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');

            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');

        }

    },

    // addButton:

    // @id: the action ID

    // @label: the label for the action's button

    //

    // Adds a button with the given @label to the notification. All

    // action buttons will appear in a single row at the bottom of

    // the notification.

    //

    // If the button is clicked, the notification will emit the

    // %action-invoked signal with @id as a parameter

    addButton: function(id, label) {

        if (!this._buttonBox) {

            let box = new St.BoxLayout({ style_class: 'notification-actions' });

            this.setActionArea(box, { x_expand: false,

                                      y_expand: false,

                                      x_fill: false,

                                      y_fill: false,

                                      x_align: St.Align.END });

            this._buttonBox = box;

        }

        let button = new St.Button({ can_focus: true });

        button._actionId = id;

        if (this._useActionIcons && Gtk.IconTheme.get_default().has_icon(id)) {

            button.add_style_class_name('notification-icon-button');

            button.child = new St.Icon({ icon_name: id });

        } else {

            button.add_style_class_name('notification-button');

            button.label = label;

        }

        if (this._buttonBox.get_n_children() > 0)

            global.focus_manager.remove_group(this._buttonBox);

        this._buttonBox.add(button);

        global.focus_manager.add_group(this._buttonBox);

        button.connect('clicked', Lang.bind(this, this._onActionInvoked, id));

        this.updated();

    },

    // setButtonSensitive:

    // @id: the action ID

    // @sensitive: whether the button should be sensitive

    //

    // If the notification contains a button with action ID @id,

    // its sensitivity will be set to @sensitive. Insensitive

    // buttons cannot be clicked.

    setButtonSensitive: function(id, sensitive) {

        if (!this._buttonBox)

            return;

        let button = this._buttonBox.get_children().filter(function(b) {

            return b._actionId == id;

        })[0];

        if (!button || button.reactive == sensitive)

            return;

        button.reactive = sensitive;

    },

    setUrgency: function(urgency) {

        this.urgency = urgency;

    },

    setResident: function(resident) {

        this.resident = resident;

    },

    setTransient: function(isTransient) {

        this.isTransient = isTransient;

    },

    setUseActionIcons: function(useIcons) {

        this._useActionIcons = useIcons;

    },

    _styleChanged: function() {

        this._spacing = this._table.get_theme_node().get_length('spacing-columns');

    },

    _bannerBoxGetPreferredWidth: function(actor, forHeight, alloc) {

        let [titleMin, titleNat] = this._titleLabel.get_preferred_width(forHeight);