Adding upstream version 3.38.6.upstream/3.38.6upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 1741 insertions, 0 deletions

diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
new file mode 100644
index 0000000..e41d4f6
--- /dev/null
+++ b/js/ui/iconGrid.js
@@ -0,0 +1,1741 @@
+// -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
+/* exported BaseIcon, IconGrid, IconGridLayout */
+
+const { Clutter, GLib, GObject, Meta, St } = imports.gi;
+
+const Params = imports.misc.params;
+const Main = imports.ui.main;
+
+var ICON_SIZE = 96;
+
+var ANIMATION_TIME_IN = 350;
+var ANIMATION_TIME_OUT = 1 / 2 * ANIMATION_TIME_IN;
+var ANIMATION_MAX_DELAY_FOR_ITEM = 2 / 3 * ANIMATION_TIME_IN;
+var ANIMATION_MAX_DELAY_OUT_FOR_ITEM = 2 / 3 * ANIMATION_TIME_OUT;
+var ANIMATION_FADE_IN_TIME_FOR_ITEM = 1 / 4 * ANIMATION_TIME_IN;
+
+var PAGE_SWITCH_TIME = 300;
+
+var AnimationDirection = {
+    IN: 0,
+    OUT: 1,
+};
+
+var IconSize = {
+    LARGE: 96,
+    MEDIUM: 64,
+    SMALL: 32,
+    TINY: 16,
+};
+
+var APPICON_ANIMATION_OUT_SCALE = 3;
+var APPICON_ANIMATION_OUT_TIME = 250;
+
+const ICON_POSITION_DELAY = 10;
+
+const defaultGridModes = [
+    {
+        rows: 8,
+        columns: 3,
+    },
+    {
+        rows: 6,
+        columns: 4,
+    },
+    {
+        rows: 4,
+        columns: 6,
+    },
+    {
+        rows: 3,
+        columns: 8,
+    },
+];
+
+var LEFT_DIVIDER_LEEWAY = 20;
+var RIGHT_DIVIDER_LEEWAY = 20;
+
+var DragLocation = {
+    INVALID: 0,
+    START_EDGE: 1,
+    ON_ICON: 2,
+    END_EDGE: 3,
+    EMPTY_SPACE: 4,
+};
+
+var BaseIcon = GObject.registerClass(
+class BaseIcon extends St.Bin {
+    _init(label, params) {
+        params = Params.parse(params, { createIcon: null,
+                                        setSizeManually: false,
+                                        showLabel: true });
+
+        let styleClass = 'overview-icon';
+        if (params.showLabel)
+            styleClass += ' overview-icon-with-label';
+
+        super._init({ style_class: styleClass });
+
+        this.connect('destroy', this._onDestroy.bind(this));
+
+        this._box = new St.BoxLayout({
+            vertical: true,
+            x_expand: true,
+            y_expand: true,
+        });
+        this.set_child(this._box);
+
+        this.iconSize = ICON_SIZE;
+        this._iconBin = new St.Bin({ x_align: Clutter.ActorAlign.CENTER });
+
+        this._box.add_actor(this._iconBin);
+
+        if (params.showLabel) {
+            this.label = new St.Label({ text: label });
+            this.label.clutter_text.set({
+                x_align: Clutter.ActorAlign.CENTER,
+                y_align: Clutter.ActorAlign.CENTER,
+            });
+            this._box.add_actor(this.label);
+        } else {
+            this.label = null;
+        }
+
+        if (params.createIcon)
+            this.createIcon = params.createIcon;
+        this._setSizeManually = params.setSizeManually;
+
+        this.icon = null;
+
+        let cache = St.TextureCache.get_default();
+        this._iconThemeChangedId = cache.connect('icon-theme-changed', this._onIconThemeChanged.bind(this));
+    }
+
+    vfunc_get_preferred_width(_forHeight) {
+        // Return the actual height to keep the squared aspect
+        return this.get_preferred_height(-1);
+    }
+
+    // This can be overridden by a subclass, or by the createIcon
+    // parameter to _init()
+    createIcon(_size) {
+        throw new GObject.NotImplementedError(`createIcon in ${this.constructor.name}`);
+    }
+
+    setIconSize(size) {
+        if (!this._setSizeManually)
+            throw new Error('setSizeManually has to be set to use setIconsize');
+
+        if (size == this.iconSize)
+            return;
+
+        this._createIconTexture(size);
+    }
+
+    _createIconTexture(size) {
+        if (this.icon)
+            this.icon.destroy();
+        this.iconSize = size;
+        this.icon = this.createIcon(this.iconSize);
+
+        this._iconBin.child = this.icon;
+    }
+
+    vfunc_style_changed() {
+        super.vfunc_style_changed();
+        let node = this.get_theme_node();
+
+        let size;
+        if (this._setSizeManually) {
+            size = this.iconSize;
+        } else {
+            const { scaleFactor } =
+                St.ThemeContext.get_for_stage(global.stage);
+
+            let [found, len] = node.lookup_length('icon-size', false);
+            size = found ? len / scaleFactor : ICON_SIZE;
+        }
+
+        if (this.iconSize == size && this._iconBin.child)
+            return;
+
+        this._createIconTexture(size);
+    }
+
+    _onDestroy() {
+        if (this._iconThemeChangedId > 0) {
+            let cache = St.TextureCache.get_default();
+            cache.disconnect(this._iconThemeChangedId);
+            this._iconThemeChangedId = 0;
+        }
+    }
+
+    _onIconThemeChanged() {
+        this._createIconTexture(this.iconSize);
+    }
+
+    animateZoomOut() {
+        // Animate only the child instead of the entire actor, so the
+        // styles like hover and running are not applied while
+        // animating.
+        zoomOutActor(this.child);
+    }
+
+    animateZoomOutAtPos(x, y) {
+        zoomOutActorAtPos(this.child, x, y);
+    }
+
+    update() {
+        this._createIconTexture(this.iconSize);
+    }
+});
+
+function zoomOutActor(actor) {
+    let [x, y] = actor.get_transformed_position();
+    zoomOutActorAtPos(actor, x, y);
+}
+
+function zoomOutActorAtPos(actor, x, y) {
+    let actorClone = new Clutter.Clone({ source: actor,
+                                         reactive: false });
+    let [width, height] = actor.get_transformed_size();
+
+    actorClone.set_size(width, height);
+    actorClone.set_position(x, y);
+    actorClone.opacity = 255;
+    actorClone.set_pivot_point(0.5, 0.5);
+
+    Main.uiGroup.add_actor(actorClone);
+
+    // Avoid monitor edges to not zoom outside the current monitor
+    let monitor = Main.layoutManager.findMonitorForActor(actor);
+    let scaledWidth = width * APPICON_ANIMATION_OUT_SCALE;
+    let scaledHeight = height * APPICON_ANIMATION_OUT_SCALE;
+    let scaledX = x - (scaledWidth - width) / 2;
+    let scaledY = y - (scaledHeight - height) / 2;
+    let containedX = Math.clamp(scaledX, monitor.x, monitor.x + monitor.width - scaledWidth);
+    let containedY = Math.clamp(scaledY, monitor.y, monitor.y + monitor.height - scaledHeight);
+
+    actorClone.ease({
+        scale_x: APPICON_ANIMATION_OUT_SCALE,
+        scale_y: APPICON_ANIMATION_OUT_SCALE,
+        translation_x: containedX - scaledX,
+        translation_y: containedY - scaledY,
+        opacity: 0,
+        duration: APPICON_ANIMATION_OUT_TIME,
+        mode: Clutter.AnimationMode.EASE_OUT_QUAD,
+        onComplete: () => actorClone.destroy(),
+    });
+}
+
+function animateIconPosition(icon, box, nChangedIcons) {
+    if (!icon.has_allocation() || icon.allocation.equal(box) || icon.opacity === 0) {
+        icon.allocate(box);
+        return false;
+    }
+
+    icon.save_easing_state();
+    icon.set_easing_mode(Clutter.AnimationMode.EASE_OUT_QUAD);
+    icon.set_easing_delay(nChangedIcons * ICON_POSITION_DELAY);
+
+    icon.allocate(box);
+
+    icon.restore_easing_state();
+
+    return true;
+}
+
+function swap(value, length) {
+    return length - value - 1;
+}
+
+var IconGridLayout = GObject.registerClass({
+    Properties: {
+        'allow-incomplete-pages': GObject.ParamSpec.boolean('allow-incomplete-pages',
+            'Allow incomplete pages', 'Allow incomplete pages',
+            GObject.ParamFlags.READWRITE,
+            true),
+        'column-spacing': GObject.ParamSpec.int('column-spacing',
+            'Column spacing', 'Column spacing',
+            GObject.ParamFlags.READWRITE,
+            0, GLib.MAXINT32, 0),
+        'columns-per-page': GObject.ParamSpec.int('columns-per-page',
+            'Columns per page', 'Columns per page',
+            GObject.ParamFlags.READWRITE,
+            1, GLib.MAXINT32, 1),
+        'fixed-icon-size': GObject.ParamSpec.int('fixed-icon-size',
+            'Fixed icon size', 'Fixed icon size',
+            GObject.ParamFlags.READWRITE,
+            -1, GLib.MAXINT32, -1),
+        'icon-size': GObject.ParamSpec.int('icon-size',
+            'Icon size', 'Icon size',
+            GObject.ParamFlags.READABLE,
+            0, GLib.MAXINT32, 0),
+        'last-row-align': GObject.ParamSpec.enum('last-row-align',
+            'Last row align', 'Last row align',
+            GObject.ParamFlags.READWRITE,
+            Clutter.ActorAlign.$gtype,
+            Clutter.ActorAlign.FILL),
+        'max-column-spacing': GObject.ParamSpec.int('max-column-spacing',
+            'Maximum column spacing', 'Maximum column spacing',
+            GObject.ParamFlags.READWRITE,
+            -1, GLib.MAXINT32, -1),
+        'max-row-spacing': GObject.ParamSpec.int('max-row-spacing',
+            'Maximum row spacing', 'Maximum row spacing',
+            GObject.ParamFlags.READWRITE,
+            -1, GLib.MAXINT32, -1),
+        'orientation': GObject.ParamSpec.enum('orientation',
+            'Orientation', 'Orientation',
+            GObject.ParamFlags.READWRITE,
+            Clutter.Orientation.$gtype,
+            Clutter.Orientation.VERTICAL),
+        'page-halign': GObject.ParamSpec.enum('page-halign',
+            'Horizontal page align',
+            'Horizontal page align',
+            GObject.ParamFlags.READWRITE,
+            Clutter.ActorAlign.$gtype,
+            Clutter.ActorAlign.FILL),
+        'page-valign': GObject.ParamSpec.enum('page-valign',
+            'Vertical page align',
+            'Vertical page align',
+            GObject.ParamFlags.READWRITE,
+            Clutter.ActorAlign.$gtype,
+            Clutter.ActorAlign.FILL),
+        'row-spacing': GObject.ParamSpec.int('row-spacing',
+            'Row spacing', 'Row spacing',
+            GObject.ParamFlags.READWRITE,
+            0, GLib.MAXINT32, 0),
+        'rows-per-page': GObject.ParamSpec.int('rows-per-page',
+            'Rows per page', 'Rows per page',
+            GObject.ParamFlags.READWRITE,
+            1, GLib.MAXINT32, 1),
+    },
+    Signals: {
+        'pages-changed': {},
+    },
+}, class IconGridLayout extends Clutter.LayoutManager {
+    _init(params = {}) {
+        params = Params.parse(params, {
+            allow_incomplete_pages: true,
+            column_spacing: 0,
+            columns_per_page: 6,
+            fixed_icon_size: -1,
+            last_row_align: Clutter.ActorAlign.FILL,
+            max_column_spacing: -1,
+            max_row_spacing: -1,
+            orientation: Clutter.Orientation.VERTICAL,
+            page_halign: Clutter.ActorAlign.FILL,
+            page_valign: Clutter.ActorAlign.FILL,
+            row_spacing: 0,
+            rows_per_page: 4,
+        });
+
+        this._allowIncompletePages = params.allow_incomplete_pages;
+        this._columnSpacing = params.column_spacing;
+        this._columnsPerPage = params.columns_per_page;
+        this._fixedIconSize = params.fixed_icon_size;
+        this._lastRowAlign = params.last_row_align;
+        this._maxColumnSpacing = params.max_column_spacing;
+        this._maxRowSpacing = params.max_row_spacing;
+        this._orientation = params.orientation;
+        this._pageHAlign = params.page_halign;
+        this._pageVAlign = params.page_valign;
+        this._rowSpacing = params.row_spacing;
+        this._rowsPerPage = params.rows_per_page;
+
+        super._init(params);
+
+        this._iconSize = this._fixedIconSize !== -1
+            ? this._fixedIconSize
+            : IconSize.LARGE;
+
+        this._pageSizeChanged = false;
+        this._pageHeight = 0;
+        this._pageWidth = 0;
+        this._nPages = -1;
+
+        // [
+        //     {
+        //         children: [ itemData, itemData, itemData, ... ],
+        //     },
+        //     {
+        //         children: [ itemData, itemData, itemData, ... ],
+        //     },
+        //     {
+        //         children: [ itemData, itemData, itemData, ... ],
+        //     },
+        // ]
+        this._pages = [];
+
+        // {
+        //     item: {
+        //         actor: Clutter.Actor,
+        //         pageIndex: <index>,
+        //     },
+        //     item: {
+        //         actor: Clutter.Actor,
+        //         pageIndex: <index>,
+        //     },
+        // }
+        this._items = new Map();
+
+        this._containerDestroyedId = 0;
+        this._updateIconSizesLaterId = 0;
+
+        this._resolveOnIdleId = 0;
+        this._iconSizeUpdateResolveCbs = [];
+    }
+
+    _findBestIconSize() {
+        const nColumns = this._columnsPerPage;
+        const nRows = this._rowsPerPage;
+        const columnSpacingPerPage = this._columnSpacing * (nColumns - 1);
+        const rowSpacingPerPage = this._rowSpacing * (nRows - 1);
+        const [firstItem] = this._container;
+
+        if (this._fixedIconSize !== -1)
+            return this._fixedIconSize;
+
+        const iconSizes = Object.values(IconSize).sort((a, b) => b - a);
+        for (const size of iconSizes) {
+            let usedWidth, usedHeight;
+
+            if (firstItem) {
+                firstItem.icon.setIconSize(size);
+                const [firstItemWidth, firstItemHeight] =
+                    firstItem.get_preferred_size();
+
+                const itemSize = Math.max(firstItemWidth, firstItemHeight);
+
+                usedWidth = itemSize * nColumns;
+                usedHeight = itemSize * nRows;
+            } else {
+                usedWidth = size * nColumns;
+                usedHeight = size * nRows;
+            }
+
+            const emptyHSpace =
+                this._pageWidth - usedWidth - columnSpacingPerPage;
+            const emptyVSpace =
+                this._pageHeight - usedHeight -  rowSpacingPerPage;
+
+            if (emptyHSpace >= 0 && emptyVSpace > 0)
+                return size;
+        }
+
+        return IconSize.TINY;
+    }
+
+    _getChildrenMaxSize() {
+        let minWidth = 0;
+        let minHeight = 0;
+
+        for (const child of this._container) {
+            if (!child.visible)
+                continue;
+
+            const [childMinHeight] = child.get_preferred_height(-1);
+            const [childMinWidth] = child.get_preferred_width(-1);
+
+            minWidth = Math.max(minWidth, childMinWidth);
+            minHeight = Math.max(minHeight, childMinHeight);
+        }
+
+        return Math.max(minWidth, minHeight);
+    }
+
+    _getVisibleChildrenForPage(pageIndex) {
+        return this._pages[pageIndex].children.filter(actor => actor.visible);
+    }
+
+    _updatePages() {
+        for (let i = 0; i < this._pages.length; i++)
+            this._relocateSurplusItems(i);
+    }
+
+    _unlinkItem(item) {
+        const itemData = this._items.get(item);
+
+        item.disconnect(itemData.destroyId);
+        item.disconnect(itemData.visibleId);
+
+        this._items.delete(item);
+    }
+
+    _removePage(pageIndex) {
+        // Make sure to not leave any icon left here
+        this._pages[pageIndex].children.forEach(item => {
+            this._unlinkItem(item);
+        });
+
+        // Adjust the page indexes of items after this page
+        for (const itemData of this._items.values()) {
+            if (itemData.pageIndex > pageIndex)
+                itemData.pageIndex--;
+        }
+
+        this._pages.splice(pageIndex, 1);
+        this.emit('pages-changed');
+    }
+
+    _fillItemVacancies(pageIndex) {
+        if (pageIndex >= this._pages.length - 1)
+            return;
+
+        const visiblePageItems = this._getVisibleChildrenForPage(pageIndex);
+        const itemsPerPage = this._columnsPerPage * this._rowsPerPage;
+
+        // No reduce needed
+        if (visiblePageItems.length === itemsPerPage)
+            return;
+
+        const visibleNextPageItems = this._getVisibleChildrenForPage(pageIndex + 1);
+        const nMissingItems = Math.min(itemsPerPage - visiblePageItems.length, visibleNextPageItems.length);
+
+        // Append to the current page the first items of the next page
+        for (let i = 0; i < nMissingItems; i++) {
+            const reducedItem = visibleNextPageItems[i];
+
+            this._removeItemData(reducedItem);
+            this._addItemToPage(reducedItem, pageIndex, -1);
+        }
+    }
+
+    _removeItemData(item) {
+        const itemData = this._items.get(item);
+        const pageIndex = itemData.pageIndex;
+        const page = this._pages[pageIndex];
+        const itemIndex = page.children.indexOf(item);
+
+        this._unlinkItem(item);
+
+        page.children.splice(itemIndex, 1);
+
+        // Delete the page if this is the last icon in it
+        const visibleItems = this._getVisibleChildrenForPage(pageIndex);
+        if (visibleItems.length === 0)
+            this._removePage(pageIndex);
+
+        if (!this._allowIncompletePages)
+            this._fillItemVacancies(pageIndex);
+    }
+
+    _relocateSurplusItems(pageIndex) {
+        const visiblePageItems = this._getVisibleChildrenForPage(pageIndex);
+        const itemsPerPage = this._columnsPerPage * this._rowsPerPage;
+
+        // No overflow needed
+        if (visiblePageItems.length <= itemsPerPage)
+            return;
+
+        const nExtraItems = visiblePageItems.length - itemsPerPage;
+        for (let i = 0; i < nExtraItems; i++) {
+            const overflowIndex = visiblePageItems.length - i - 1;
+            const overflowItem = visiblePageItems[overflowIndex];
+
+            this._removeItemData(overflowItem);
+            this._addItemToPage(overflowItem, pageIndex + 1, 0);
+        }
+    }
+
+    _appendPage() {
+        this._pages.push({ children: [] });
+        this.emit('pages-changed');
+    }
+
+    _addItemToPage(item, pageIndex, index) {
+        // Ensure we have at least one page
+        if (this._pages.length === 0)
+            this._appendPage();
+
+        // Append a new page if necessary
+        if (pageIndex === this._pages.length)
+            this._appendPage();
+
+        if (pageIndex === -1)
+            pageIndex = this._pages.length - 1;
+
+        if (index === -1)
+            index = this._pages[pageIndex].children.length;
+
+        this._items.set(item, {
+            actor: item,
+            pageIndex,
+            destroyId: item.connect('destroy', () => this._removeItemData(item)),
+            visibleId: item.connect('notify::visible', () => {
+                const itemData = this._items.get(item);
+
+                if (item.visible)
+                    this._relocateSurplusItems(itemData.pageIndex);
+                else if (!this._allowIncompletePages)
+                    this._fillItemVacancies(itemData.pageIndex);
+            }),
+        });
+
+        item.icon.setIconSize(this._iconSize);
+
+        this._pages[pageIndex].children.splice(index, 0, item);
+        this._relocateSurplusItems(pageIndex);
+    }
+
+    _calculateSpacing(childSize) {
+        const nColumns = this._columnsPerPage;
+        const nRows = this._rowsPerPage;
+        const usedWidth = childSize * nColumns;
+        const usedHeight = childSize * nRows;
+        const columnSpacingPerPage = this._columnSpacing * (nColumns - 1);
+        const rowSpacingPerPage = this._rowSpacing * (nRows - 1);
+
+        let emptyHSpace = this._pageWidth - usedWidth - columnSpacingPerPage;
+        let emptyVSpace = this._pageHeight - usedHeight -  rowSpacingPerPage;
+        let leftEmptySpace;
+        let topEmptySpace;
+        let hSpacing;
+        let vSpacing;
+
+        switch (this._pageHAlign) {
+        case Clutter.ActorAlign.START:
+            leftEmptySpace = 0;
+            hSpacing = this._columnSpacing;
+            break;
+        case Clutter.ActorAlign.CENTER:
+            leftEmptySpace = Math.floor(emptyHSpace / 2);
+            hSpacing = this._columnSpacing;
+            break;
+        case Clutter.ActorAlign.END:
+            leftEmptySpace = emptyHSpace;
+            hSpacing = this._columnSpacing;
+            break;
+        case Clutter.ActorAlign.FILL:
+            leftEmptySpace = 0;
+            hSpacing = this._columnSpacing + emptyHSpace / (nColumns - 1);
+
+            // Maybe constraint horizontal spacing
+            if (this._maxColumnSpacing !== -1 && hSpacing > this._maxColumnSpacing) {
+                const extraHSpacing =
+                    (this._maxColumnSpacing - this._columnSpacing) * (nColumns - 1);
+
+                hSpacing = this._maxColumnSpacing;
+                leftEmptySpace =
+                    Math.max((emptyHSpace - extraHSpacing) / 2, 0);
+            }
+            break;
+        }
+
+        switch (this._pageVAlign) {
+        case Clutter.ActorAlign.START:
+            topEmptySpace = 0;
+            vSpacing = this._rowSpacing;
+            break;
+        case Clutter.ActorAlign.CENTER:
+            topEmptySpace = Math.floor(emptyVSpace / 2);
+            vSpacing = this._rowSpacing;
+            break;
+        case Clutter.ActorAlign.END:
+            topEmptySpace = emptyVSpace;
+            vSpacing = this._rowSpacing;
+            break;
+        case Clutter.ActorAlign.FILL:
+            topEmptySpace = 0;
+            vSpacing = this._rowSpacing + emptyVSpace / (nRows - 1);
+
+            // Maybe constraint vertical spacing
+            if (this._maxRowSpacing !== -1 && vSpacing > this._maxRowSpacing) {
+                const extraVSpacing =
+                    (this._maxRowSpacing - this._rowSpacing) * (nRows - 1);
+
+                vSpacing = this._maxRowSpacing;
+                topEmptySpace =
+                    Math.max((emptyVSpace - extraVSpacing) / 2, 0);
+            }
+
+            break;
+        }
+
+        return [leftEmptySpace, topEmptySpace, hSpacing, vSpacing];
+    }
+
+    _getRowPadding(items, itemIndex, childSize, spacing) {
+        const nRows = Math.ceil(items.length / this._columnsPerPage);
+
+        let rowAlign = 0;
+        const row = Math.floor(itemIndex / this._columnsPerPage);
+
+        // Only apply to the last row
+        if (row < nRows - 1)
+            return 0;
+
+        const rowStart = row * this._columnsPerPage;
+        const rowEnd = Math.min((row + 1) * this._columnsPerPage - 1, items.length - 1);
+        const itemsInThisRow = rowEnd - rowStart + 1;
+        const nEmpty = this._columnsPerPage - itemsInThisRow;
+        const availableWidth = nEmpty * (spacing + childSize);
+
+        const isRtl =
+            Clutter.get_default_text_direction() === Clutter.TextDirection.RTL;
+
+        switch (this._lastRowAlign) {
+        case Clutter.ActorAlign.START:
+            rowAlign = 0;
+            break;
+        case Clutter.ActorAlign.CENTER:
+            rowAlign = availableWidth / 2;
+            break;
+        case Clutter.ActorAlign.END:
+            rowAlign = availableWidth;
+            break;
+        case Clutter.ActorAlign.FILL:
+            rowAlign = 0;
+            break;
+        }
+
+        return isRtl ? rowAlign * -1 : rowAlign;
+    }
+
+    _runPostAllocation() {
+        if (this._iconSizeUpdateResolveCbs.length > 0 &&
+            this._resolveOnIdleId === 0) {
+            this._resolveOnIdleId = GLib.idle_add(GLib.PRIORITY_DEFAULT, () => {
+                this._iconSizeUpdateResolveCbs.forEach(cb => cb());
+                this._iconSizeUpdateResolveCbs = [];
+                this._resolveOnIdleId = 0;
+                return GLib.SOURCE_REMOVE;
+            });
+        }
+    }
+
+    _onDestroy() {
+        if (this._updateIconSizesLaterId >= 0) {
+            Meta.later_remove(this._updateIconSizesLaterId);
+            this._updateIconSizesLaterId = 0;
+        }
+
+        if (this._resolveOnIdleId > 0) {
+            GLib.source_remove(this._resolveOnIdleId);
+            delete this._resolveOnIdleId;
+        }
+    }
+
+    vfunc_set_container(container) {
+        if (this._container)
+            this._container.disconnect(this._containerDestroyedId);
+
+        this._container = container;
+
+        if (this._container)
+            this._containerDestroyedId = this._container.connect('destroy', this._onDestroy.bind(this));
+    }
+
+    vfunc_get_preferred_width(_container, _forHeight) {
+        let minWidth = -1;
+        let natWidth = -1;
+
+        switch (this._orientation) {
+        case Clutter.Orientation.VERTICAL:
+            minWidth = IconSize.TINY;
+            natWidth = this._pageWidth;
+            break;
+
+        case Clutter.Orientation.HORIZONTAL:
+            minWidth = this._pageWidth * this._pages.length;
+            natWidth = minWidth;
+            break;
+        }
+
+        return [minWidth, natWidth];
+    }
+
+    vfunc_get_preferred_height(_container, _forWidth) {
+        let minHeight = -1;
+        let natHeight = -1;
+
+        switch (this._orientation) {
+        case Clutter.Orientation.VERTICAL:
+            minHeight = this._pageHeight * this._pages.length;
+            natHeight = minHeight;
+            break;
+
+        case Clutter.Orientation.HORIZONTAL:
+            minHeight = IconSize.TINY;
+            natHeight = this._pageHeight;
+            break;
+        }
+
+        return [minHeight, natHeight];
+    }
+
+    vfunc_allocate() {
+        if (this._pageWidth === 0 || this._pageHeight === 0)
+            throw new Error('IconGridLayout.adaptToSize wasn\'t called before allocation');
+
+        this._updatePages();
+
+        const isRtl =
+            Clutter.get_default_text_direction() === Clutter.TextDirection.RTL;
+        const childSize = this._getChildrenMaxSize();
+
+        const [leftEmptySpace, topEmptySpace, hSpacing, vSpacing] =
+            this._calculateSpacing(childSize);
+
+        const childBox = new Clutter.ActorBox();
+        childBox.set_size(childSize, childSize);
+
+        let nChangedIcons = 0;
+
+        this._pages.forEach((page, pageIndex) => {
+            const visibleItems =
+                page.children.filter(actor => actor.visible);
+
+            if (isRtl && this._orientation === Clutter.Orientation.HORIZONTAL)
+                pageIndex = swap(pageIndex, this._pages.length);
+
+            visibleItems.forEach((item, itemIndex) => {
+                const row = Math.floor(itemIndex / this._columnsPerPage);
+                let column = itemIndex % this._columnsPerPage;
+
+                if (isRtl)
+                    column = swap(column, this._columnsPerPage);
+
+                const rowPadding = this._getRowPadding(visibleItems, itemIndex,
+                    childSize, hSpacing);
+
+                // Icon position
+                let x = leftEmptySpace + rowPadding + column * (childSize + hSpacing);
+                let y = topEmptySpace + row * (childSize + vSpacing);
+
+                // Page start
+                switch (this._orientation) {
+                case Clutter.Orientation.HORIZONTAL:
+                    x += pageIndex * this._pageWidth;
+                    break;
+                case Clutter.Orientation.VERTICAL:
+                    y += pageIndex * this._pageHeight;
+                    break;
+                }
+
+                childBox.set_origin(Math.floor(x), Math.floor(y));
+
+                // Only ease icons when the page size didn't change
+                if (this._pageSizeChanged)
+                    item.allocate(childBox);
+                else if (animateIconPosition(item, childBox, nChangedIcons))
+                    nChangedIcons++;
+            });
+        });
+
+        this._pageSizeChanged = false;
+
+        this._runPostAllocation();
+    }
+
+    /**
+     * addItem:
+     * @param {Clutter.Actor} item: item to append to the grid
+     * @param {int} page: page number
+     * @param {int} index: position in the page
+     *
+     * Adds @item to the grid. @item must not be part of the grid.
+     *
+     * If @index exceeds the number of items per page, @item will
+     * be added to the next page.
+     *
+     * @page must be a number between 0 and the number of pages.
+     * Adding to the page after next will create a new page.
+     */
+    addItem(item, page = -1, index = -1) {
+        if (this._items.has(item))
+            throw new Error(`Item ${item} already added to IconGridLayout`);
+
+        if (page > this._pages.length)
+            throw new Error(`Cannot add ${item} to page ${page}`);
+
+        if (!this._container)
+            return;
+
+        this._container.add_child(item);
+        this._addItemToPage(item, page, index);
+    }
+
+    /**
+     * appendItem:
+     * @param {Clutter.Actor} item: item to append to the grid
+     *
+     * Appends @item to the grid. @item must not be part of the grid.
+     */
+    appendItem(item) {
+        this.addItem(item);
+    }
+
+    /**
+     * moveItem:
+     * @param {Clutter.Actor} item: item to move
+     * @param {int} newPage: new page of the item
+     * @param {int} newPosition: new page of the item
+     *
+     * Moves @item to the grid. @item must be part of the grid.
+     */
+    moveItem(item, newPage, newPosition) {
+        if (!this._items.has(item))
+            throw new Error(`Item ${item} is not part of the IconGridLayout`);
+
+        this._removeItemData(item);
+        this._addItemToPage(item, newPage, newPosition);
+    }
+
+    /**
+     * removeItem:
+     * @param {Clutter.Actor} item: item to remove from the grid
+     *
+     * Removes @item to the grid. @item must be part of the grid.
+     */
+    removeItem(item) {
+        if (!this._items.has(item))
+            throw new Error(`Item ${item} is not part of the IconGridLayout`);
+
+        if (!this._container)
+            return;
+
+        this._container.remove_child(item);
+        this._removeItemData(item);
+    }
+
+    /**
+     * getItemsAtPage:
+     * @param {int} pageIndex: page index
+     *
+     * Retrieves the children at page @pageIndex. Children may be invisible.
+     *
+     * @returns {Array} an array of {Clutter.Actor}s
+     */
+    getItemsAtPage(pageIndex) {
+        if (pageIndex >= this._pages.length)
+            throw new Error(`IconGridLayout does not have page ${pageIndex}`);
+
+        return [...this._pages[pageIndex].children];
+    }
+
+    /**
+     * getItemPosition:
+     * @param {BaseIcon} item: the item
+     *
+     * Retrieves the position of @item is its page, or -1 if @item is not
+     * part of the grid.
+     *
+     * @returns {[int, int]} the page and position of @item
+     */
+    getItemPosition(item) {
+        if (!this._items.has(item))
+            return [-1, -1];
+
+        const itemData = this._items.get(item);
+        const visibleItems = this._getVisibleChildrenForPage(itemData.pageIndex);
+
+        return [itemData.pageIndex, visibleItems.indexOf(item)];
+    }
+
+    /**
+     * getItemAt:
+     * @param {int} page: the page
+     * @param {int} position: the position in page
+     *
+     * Retrieves the item at @page and @position.
+     *
+     * @returns {BaseItem} the item at @page and @position, or null
+     */
+    getItemAt(page, position) {
+        if (page < 0 || page >= this._pages.length)
+            return null;
+
+        const visibleItems = this._getVisibleChildrenForPage(page);
+
+        if (position < 0 || position >= visibleItems.length)
+            return null;
+
+        return visibleItems[position];
+    }
+
+    /**
+     * getItemPage:
+     * @param {BaseIcon} item: the item
+     *
+     * Retrieves the page @item is in, or -1 if @item is not part of the grid.
+     *
+     * @returns {int} the page where @item is in
+     */
+    getItemPage(item) {
+        if (!this._items.has(item))
+            return -1;
+
+        const itemData = this._items.get(item);
+        return itemData.pageIndex;
+    }
+
+    ensureIconSizeUpdated() {
+        if (this._updateIconSizesLaterId === 0)
+            return Promise.resolve();
+
+        return new Promise(
+            resolve => this._iconSizeUpdateResolveCbs.push(resolve));
+    }
+
+    adaptToSize(pageWidth, pageHeight) {
+        if (this._pageWidth === pageWidth && this._pageHeight === pageHeight)
+            return;
+
+        this._pageWidth = pageWidth;
+        this._pageHeight = pageHeight;
+        this._pageSizeChanged = true;
+
+        if (this._updateIconSizesLaterId === 0) {
+            this._updateIconSizesLaterId =
+                Meta.later_add(Meta.LaterType.BEFORE_REDRAW, () => {
+                    const iconSize = this._findBestIconSize();
+
+                    if (this._iconSize !== iconSize) {
+                        this._iconSize = iconSize;
+
+                        for (const child of this._container)
+                            child.icon.setIconSize(iconSize);
+
+                        this.notify('icon-size');
+                    }
+
+                    this._updateIconSizesLaterId = 0;
+                    return GLib.SOURCE_REMOVE;
+                });
+        }
+    }
+
+    /**
+     * getDropTarget:
+     * @param {int} x: position of the horizontal axis
+     * @param {int} y: position of the vertical axis
+     *
+     * Retrieves the item located at (@x, @y), as well as the drag location.
+     * Both @x and @y are relative to the grid.
+     *
+     * @returns {[Clutter.Actor, DragLocation]} the item and drag location
+     * under (@x, @y)
+     */
+    getDropTarget(x, y) {
+        const childSize = this._getChildrenMaxSize();
+        const [leftEmptySpace, topEmptySpace, hSpacing, vSpacing] =
+            this._calculateSpacing(childSize);
+
+        const isRtl =
+            Clutter.get_default_text_direction() === Clutter.TextDirection.RTL;
+
+        let page = this._orientation === Clutter.Orientation.VERTICAL
+            ? Math.floor(y / this._pageHeight)
+            : Math.floor(x / this._pageWidth);
+
+        // Out of bounds
+        if (page >= this._pages.length)
+            return [null, DragLocation.INVALID];
+
+        if (isRtl && this._orientation === Clutter.Orientation.HORIZONTAL)
+            page = swap(page, this._pages.length);
+
+        // Page-relative coordinates from now on
+        x %= this._pageWidth;
+        y %= this._pageHeight;
+
+        if (x < leftEmptySpace || y < topEmptySpace)
+            return [null, DragLocation.INVALID];
+
+        const gridWidth =
+            childSize * this._columnsPerPage +
+            hSpacing * (this._columnsPerPage - 1);
+        const gridHeight =
+            childSize * this._rowsPerPage +
+            vSpacing * (this._rowsPerPage - 1);
+
+        if (x > leftEmptySpace + gridWidth || y > topEmptySpace + gridHeight)
+            return [null, DragLocation.INVALID];
+
+        const halfHSpacing = hSpacing / 2;
+        const halfVSpacing = vSpacing / 2;
+        const visibleItems = this._getVisibleChildrenForPage(page);
+
+        for (const item of visibleItems) {
+            const childBox = item.allocation.copy();
+
+            // Page offset
+            switch (this._orientation) {
+            case Clutter.Orientation.HORIZONTAL:
+                childBox.set_origin(childBox.x1 % this._pageWidth, childBox.y1);
+                break;
+            case Clutter.Orientation.VERTICAL:
+                childBox.set_origin(childBox.x1, childBox.y1 % this._pageHeight);
+                break;
+            }
+
+            // Outside the icon boundaries
+            if (x < childBox.x1 - halfHSpacing ||
+                x > childBox.x2 + halfHSpacing ||
+                y < childBox.y1 - halfVSpacing ||
+                y > childBox.y2 + halfVSpacing)
+                continue;
+
+            let dragLocation;
+
+            if (x < childBox.x1 + LEFT_DIVIDER_LEEWAY)
+                dragLocation = DragLocation.START_EDGE;
+            else if (x > childBox.x2 - RIGHT_DIVIDER_LEEWAY)
+                dragLocation = DragLocation.END_EDGE;
+            else
+                dragLocation = DragLocation.ON_ICON;
+
+            if (isRtl) {
+                if (dragLocation === DragLocation.START_EDGE)
+                    dragLocation = DragLocation.END_EDGE;
+                else if (dragLocation === DragLocation.END_EDGE)
+                    dragLocation = DragLocation.START_EDGE;
+            }
+
+            return [item, dragLocation];
+        }
+
+        return [null, DragLocation.EMPTY_SPACE];
+    }
+
+    // eslint-disable-next-line camelcase
+    get allow_incomplete_pages() {
+        return this._allowIncompletePages;
+    }
+
+    // eslint-disable-next-line camelcase
+    set allow_incomplete_pages(v) {
+        if (this._allowIncompletePages === v)
+            return;
+
+        this._allowIncompletePages = v;
+        this.notify('allow-incomplete-pages');
+    }
+
+    // eslint-disable-next-line camelcase
+    get column_spacing() {
+        return this._columnSpacing;
+    }
+
+    // eslint-disable-next-line camelcase
+    set column_spacing(v) {
+        if (this._columnSpacing === v)
+            return;
+
+        this._columnSpacing = v;
+        this.notify('column-spacing');
+    }
+
+    // eslint-disable-next-line camelcase
+    get columns_per_page() {
+        return this._columnsPerPage;
+    }
+
+    // eslint-disable-next-line camelcase
+    set columns_per_page(v) {
+        if (this._columnsPerPage === v)
+            return;
+
+        this._columnsPerPage = v;
+        this.notify('columns-per-page');
+    }
+
+    // eslint-disable-next-line camelcase
+    get fixed_icon_size() {
+        return this._fixedIconSize;
+    }
+
+    // eslint-disable-next-line camelcase
+    set fixed_icon_size(v) {
+        if (this._fixedIconSize === v)
+            return;
+
+        this._fixedIconSize = v;
+        this.notify('fixed-icon-size');
+    }
+
+    // eslint-disable-next-line camelcase
+    get icon_size() {
+        return this._iconSize;
+    }
+
+    // eslint-disable-next-line camelcase
+    get last_row_align() {
+        return this._lastRowAlign;
+    }
+
+    // eslint-disable-next-line camelcase
+    get max_column_spacing() {
+        return this._maxColumnSpacing;
+    }
+
+    // eslint-disable-next-line camelcase
+    set max_column_spacing(v) {
+        if (this._maxColumnSpacing === v)
+            return;
+
+        this._maxColumnSpacing = v;
+        this.notify('max-column-spacing');
+    }
+
+    // eslint-disable-next-line camelcase
+    get max_row_spacing() {
+        return this._maxRowSpacing;
+    }
+
+    // eslint-disable-next-line camelcase
+    set max_row_spacing(v) {
+        if (this._maxRowSpacing === v)
+            return;
+
+        this._maxRowSpacing = v;
+        this.notify('max-row-spacing');
+    }
+
+    // eslint-disable-next-line camelcase
+    set last_row_align(v) {
+        if (this._lastRowAlign === v)
+            return;
+
+        this._lastRowAlign = v;
+        this.notify('last-row-align');
+    }
+
+    get nPages() {
+        return this._pages.length;
+    }
+
+    // eslint-disable-next-line camelcase
+    get page_halign() {
+        return this._pageHAlign;
+    }
+
+    // eslint-disable-next-line camelcase
+    set page_halign(v) {
+        if (this._pageHAlign === v)
+            return;
+
+        this._pageHAlign = v;
+        this.notify('page-halign');
+    }
+
+    // eslint-disable-next-line camelcase
+    get page_valign() {
+        return this._pageVAlign;
+    }
+
+    // eslint-disable-next-line camelcase
+    set page_valign(v) {
+        if (this._pageVAlign === v)
+            return;
+
+        this._pageVAlign = v;
+        this.notify('page-valign');
+    }
+
+    // eslint-disable-next-line camelcase
+    get row_spacing() {
+        return this._rowSpacing;
+    }
+
+    // eslint-disable-next-line camelcase
+    set row_spacing(v) {
+        if (this._rowSpacing === v)
+            return;
+
+        this._rowSpacing = v;
+        this.notify('row-spacing');
+    }
+
+    // eslint-disable-next-line camelcase
+    get rows_per_page() {
+        return this._rowsPerPage;
+    }
+
+    // eslint-disable-next-line camelcase
+    set rows_per_page(v) {
+        if (this._rowsPerPage === v)
+            return;
+
+        this._rowsPerPage = v;
+        this.notify('rows-per-page');
+    }
+
+    get orientation() {
+        return this._orientation;
+    }
+
+    set orientation(v) {
+        if (this._orientation === v)
+            return;
+
+        switch (v) {
+        case Clutter.Orientation.VERTICAL:
+            this.request_mode = Clutter.RequestMode.HEIGHT_FOR_WIDTH;
+            break;
+        case Clutter.Orientation.HORIZONTAL:
+            this.request_mode = Clutter.RequestMode.WIDTH_FOR_HEIGHT;
+            break;
+        }
+
+        this._orientation = v;
+        this.notify('orientation');
+    }
+
+    get pageHeight() {
+        return this._pageHeight;
+    }
+
+    get pageWidth() {
+        return this._pageWidth;
+    }
+});
+
+var IconGrid = GObject.registerClass({
+    Signals: {
+        'pages-changed': {},
+        'animation-done': {},
+    },
+}, class IconGrid extends St.Viewport {
+    _init(layoutParams = {}) {
+        layoutParams = Params.parse(layoutParams, {
+            allow_incomplete_pages: false,
+            orientation: Clutter.Orientation.VERTICAL,
+            columns_per_page: 6,
+            rows_per_page: 4,
+            page_halign: Clutter.ActorAlign.CENTER,
+            page_valign: Clutter.ActorAlign.CENTER,
+            last_row_align: Clutter.ActorAlign.START,
+            column_spacing: 0,
+            row_spacing: 0,
+        });
+        const layoutManager = new IconGridLayout(layoutParams);
+        const pagesChangedId = layoutManager.connect('pages-changed',
+            () => this.emit('pages-changed'));
+
+        super._init({
+            style_class: 'icon-grid',
+            layoutManager,
+            x_expand: true,
+            y_expand: true,
+        });
+
+        this._gridModes = defaultGridModes;
+        this._currentPage = 0;
+        this._currentMode = -1;
+        this._clonesAnimating = [];
+
+        this.connect('actor-added', this._childAdded.bind(this));
+        this.connect('actor-removed', this._childRemoved.bind(this));
+        this.connect('destroy', () => layoutManager.disconnect(pagesChangedId));
+    }
+
+    _getChildrenToAnimate() {
+        const layoutManager = this.layout_manager;
+        const children = layoutManager.getItemsAtPage(this._currentPage);
+
+        return children.filter(c => c.visible);
+    }
+
+    _resetAnimationActors() {
+        this._clonesAnimating.forEach(clone => {
+            clone.source.reactive = true;
+            clone.source.opacity = 255;
+            clone.destroy();
+        });
+        this._clonesAnimating = [];
+    }
+
+    _animationDone() {
+        this._resetAnimationActors();
+        this.emit('animation-done');
+    }
+
+    _childAdded(grid, child) {
+        child._iconGridKeyFocusInId = child.connect('key-focus-in', () => {
+            this._ensureItemIsVisible(child);
+        });
+
+        child._paintVisible = child.opacity > 0;
+        child._opacityChangedId = child.connect('notify::opacity', () => {
+            let paintVisible = child._paintVisible;
+            child._paintVisible = child.opacity > 0;
+            if (paintVisible !== child._paintVisible)
+                this.queue_relayout();
+        });
+    }
+
+    _ensureItemIsVisible(item) {
+        if (!this.contains(item))
+            throw new Error(`${item} is not a child of IconGrid`);
+
+        const itemPage = this.layout_manager.getItemPage(item);
+        this.goToPage(itemPage);
+    }
+
+    _setGridMode(modeIndex) {
+        if (this._currentMode === modeIndex)
+            return;
+
+        this._currentMode = modeIndex;
+
+        if (modeIndex !== -1) {
+            const newMode = this._gridModes[modeIndex];
+
+            this.layout_manager.rows_per_page = newMode.rows;
+            this.layout_manager.columns_per_page = newMode.columns;
+        }
+    }
+
+    _findBestModeForSize(width, height) {
+        const sizeRatio = width / height;
+        let closestRatio = Infinity;
+        let bestMode = -1;
+
+        for (let modeIndex in this._gridModes) {
+            const mode = this._gridModes[modeIndex];
+            const modeRatio = mode.columns / mode.rows;
+
+            if (Math.abs(sizeRatio - modeRatio) < Math.abs(sizeRatio - closestRatio)) {
+                closestRatio = modeRatio;
+                bestMode = modeIndex;
+            }
+        }
+
+        this._setGridMode(bestMode);
+    }
+
+    _childRemoved(grid, child) {
+        child.disconnect(child._iconGridKeyFocusInId);
+        delete child._iconGridKeyFocusInId;
+
+        child.disconnect(child._opacityChangedId);
+        delete child._opacityChangedId;
+        delete child._paintVisible;
+    }
+
+    vfunc_unmap() {
+        // Cancel animations when hiding the overview, to avoid icons
+        // swarming into the void ...
+        this._resetAnimationActors();
+        super.vfunc_unmap();
+    }
+
+    vfunc_style_changed() {
+        super.vfunc_style_changed();
+
+        const node = this.get_theme_node();
+        this.layout_manager.column_spacing = node.get_length('column-spacing');
+        this.layout_manager.row_spacing = node.get_length('row-spacing');
+
+        let [found, value] = node.lookup_length('max-column-spacing', false);
+        this.layout_manager.max_column_spacing = found ? value : -1;
+
+        [found, value] = node.lookup_length('max-row-spacing', false);
+        this.layout_manager.max_row_spacing = found ? value : -1;
+    }
+
+    /**
+     * addItem:
+     * @param {Clutter.Actor} item: item to append to the grid
+     * @param {int} page: page number
+     * @param {int} index: position in the page
+     *
+     * Adds @item to the grid. @item must not be part of the grid.
+     *
+     * If @index exceeds the number of items per page, @item will
+     * be added to the next page.
+     *
+     * @page must be a number between 0 and the number of pages.
+     * Adding to the page after next will create a new page.
+     */
+    addItem(item, page = -1, index = -1) {
+        if (!(item.icon instanceof BaseIcon))
+            throw new Error('Only items with a BaseIcon icon property can be added to IconGrid');
+
+        this.layout_manager.addItem(item, page, index);
+    }
+
+    /**
+     * appendItem:
+     * @param {Clutter.Actor} item: item to append to the grid
+     *
+     * Appends @item to the grid. @item must not be part of the grid.
+     */
+    appendItem(item) {
+        this.layout_manager.appendItem(item);
+    }
+
+    /**
+     * moveItem:
+     * @param {Clutter.Actor} item: item to move
+     * @param {int} newPage: new page of the item
+     * @param {int} newPosition: new page of the item
+     *
+     * Moves @item to the grid. @item must be part of the grid.
+     */
+    moveItem(item, newPage, newPosition) {
+        this.layout_manager.moveItem(item, newPage, newPosition);
+        this.queue_relayout();
+    }
+
+    /**
+     * removeItem:
+     * @param {Clutter.Actor} item: item to remove from the grid
+     *
+     * Removes @item to the grid. @item must be part of the grid.
+     */
+    removeItem(item) {
+        if (!this.contains(item))
+            throw new Error(`Item ${item} is not part of the IconGrid`);
+
+        this.layout_manager.removeItem(item);
+    }
+
+    /**
+     * goToPage:
+     * @param {int} pageIndex: page index
+     * @param {boolean} animate: animate the page transition
+     *
+     * Moves the current page to @pageIndex. @pageIndex must be a valid page
+     * number.
+     */
+    goToPage(pageIndex, animate = true) {
+        if (pageIndex >= this.nPages)
+            throw new Error(`IconGrid does not have page ${pageIndex}`);
+
+        let newValue;
+        let adjustment;
+        switch (this.layout_manager.orientation) {
+        case Clutter.Orientation.VERTICAL:
+            adjustment = this.vadjustment;
+            newValue = pageIndex * this.layout_manager.pageHeight;
+            break;
+        case Clutter.Orientation.HORIZONTAL:
+            adjustment = this.hadjustment;
+            newValue = pageIndex * this.layout_manager.pageWidth;
+            break;
+        }
+
+        this._currentPage = pageIndex;
+
+        if (!this.mapped)
+            animate = false;
+
+        adjustment.ease(newValue, {
+            mode: Clutter.AnimationMode.EASE_OUT_CUBIC,
+            duration: animate ? PAGE_SWITCH_TIME : 0,
+        });
+    }
+
+    /**
+     * getItemPage:
+     * @param {BaseIcon} item: the item
+     *
+     * Retrieves the page @item is in, or -1 if @item is not part of the grid.
+     *
+     * @returns {int} the page where @item is in
+     */
+    getItemPage(item) {
+        return this.layout_manager.getItemPage(item);
+    }
+
+    /**
+     * getItemPosition:
+     * @param {BaseIcon} item: the item
+     *
+     * Retrieves the position of @item is its page, or -1 if @item is not
+     * part of the grid.
+     *
+     * @returns {[int, int]} the page and position of @item
+     */
+    getItemPosition(item) {
+        if (!this.contains(item))
+            return [-1, -1];
+
+        const layoutManager = this.layout_manager;
+        return layoutManager.getItemPosition(item);
+    }
+
+    /**
+     * getItemAt:
+     * @param {int} page: the page
+     * @param {int} position: the position in page
+     *
+     * Retrieves the item at @page and @position.
+     *
+     * @returns {BaseItem} the item at @page and @position, or null
+     */
+    getItemAt(page, position) {
+        const layoutManager = this.layout_manager;
+        return layoutManager.getItemAt(page, position);
+    }
+
+    /**
+     * getItemsAtPage:
+     * @param {int} page: the page index
+     *
+     * Retrieves the children at page @page, including invisible children.
+     *
+     * @returns {Array} an array of {Clutter.Actor}s
+     */
+    getItemsAtPage(page) {
+        if (page < 0 || page > this.nPages)
+            throw new Error(`Page ${page} does not exist at IconGrid`);
+
+        const layoutManager = this.layout_manager;
+        return layoutManager.getItemsAtPage(page);
+    }
+
+    get currentPage() {
+        return this._currentPage;
+    }
+
+    set currentPage(v) {
+        this.goToPage(v);
+    }
+
+    get nPages() {
+        return this.layout_manager.nPages;
+    }
+
+    adaptToSize(width, height) {
+        this._findBestModeForSize(width, height);
+        this.layout_manager.adaptToSize(width, height);
+    }
+
+    async animateSpring(animationDirection, sourceActor) {
+        this._resetAnimationActors();
+
+        let actors = this._getChildrenToAnimate();
+        if (actors.length == 0) {
+            this._animationDone();
+            return;
+        }
+
+        await this.layout_manager.ensureIconSizeUpdated();
+
+        let [sourceX, sourceY] = sourceActor.get_transformed_position();
+        let [sourceWidth, sourceHeight] = sourceActor.get_size();
+        // Get the center
+        let [sourceCenterX, sourceCenterY] = [sourceX + sourceWidth / 2, sourceY + sourceHeight / 2];
+        // Design decision, 1/2 of the source actor size.
+        let [sourceScaledWidth, sourceScaledHeight] = [sourceWidth / 2, sourceHeight / 2];
+
+        actors.forEach(actor => {
+            let [actorX, actorY] = actor._transformedPosition = actor.get_transformed_position();
+            let [x, y] = [actorX - sourceX, actorY - sourceY];
+            actor._distance = Math.sqrt(x * x + y * y);
+        });
+        let maxDist = actors.reduce((prev, cur) => {
+            return Math.max(prev, cur._distance);
+        }, 0);
+        let minDist = actors.reduce((prev, cur) => {
+            return Math.min(prev, cur._distance);
+        }, Infinity);
+        let normalization = maxDist - minDist;
+
+        actors.forEach(actor => {
+            let clone = new Clutter.Clone({ source: actor });
+            this._clonesAnimating.push(clone);
+            Main.uiGroup.add_actor(clone);
+        });
+
+        /*
+         * ^
+         * | These need to be separate loops because Main.uiGroup.add_actor
+         * | is excessively slow if done inside the below loop and we want the
+         * | below loop to complete within one frame interval (#2065, !1002).
+         * v
+         */
+
+        this._clonesAnimating.forEach(actorClone => {
+            const actor = actorClone.source;
+            actor.opacity = 0;
+            actor.reactive = false;
+
+            let [width, height] = actor.get_size();
+            actorClone.set_size(width, height);
+            let scaleX = sourceScaledWidth / width;
+            let scaleY = sourceScaledHeight / height;
+            let [adjustedSourcePositionX, adjustedSourcePositionY] = [sourceCenterX - sourceScaledWidth / 2, sourceCenterY - sourceScaledHeight / 2];
+
+            let movementParams, fadeParams;
+            if (animationDirection == AnimationDirection.IN) {
+                let isLastItem = actor._distance == minDist;
+
+                actorClone.opacity = 0;
+                actorClone.set_scale(scaleX, scaleY);
+                actorClone.set_translation(
+                    adjustedSourcePositionX, adjustedSourcePositionY, 0);
+
+                let delay = (1 - (actor._distance - minDist) / normalization) * ANIMATION_MAX_DELAY_FOR_ITEM;
+                let [finalX, finalY]  = actor._transformedPosition;
+                movementParams = {
+                    translation_x: finalX,
+                    translation_y: finalY,
+                    scale_x: 1,
+                    scale_y: 1,
+                    duration: ANIMATION_TIME_IN,
+                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                    delay,
+                };
+
+                if (isLastItem)
+                    movementParams.onComplete = this._animationDone.bind(this);
+
+                fadeParams = {
+                    opacity: 255,
+                    duration: ANIMATION_FADE_IN_TIME_FOR_ITEM,
+                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                    delay,
+                };
+            } else {
+                let isLastItem = actor._distance == maxDist;
+
+                let [startX, startY]  = actor._transformedPosition;
+                actorClone.set_translation(startX, startY, 0);
+
+                let delay = (actor._distance - minDist) / normalization * ANIMATION_MAX_DELAY_OUT_FOR_ITEM;
+                movementParams = {
+                    translation_x: adjustedSourcePositionX,
+                    translation_y: adjustedSourcePositionY,
+                    scale_x: scaleX,
+                    scale_y: scaleY,
+                    duration: ANIMATION_TIME_OUT,
+                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                    delay,
+                };
+
+                if (isLastItem)
+                    movementParams.onComplete = this._animationDone.bind(this);
+
+                fadeParams = {
+                    opacity: 0,
+                    duration: ANIMATION_FADE_IN_TIME_FOR_ITEM,
+                    mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+                    delay: ANIMATION_TIME_OUT + delay - ANIMATION_FADE_IN_TIME_FOR_ITEM,
+                };
+            }
+
+            actorClone.ease(movementParams);
+            actorClone.ease(fadeParams);
+        });
+    }
+
+    setGridModes(modes) {
+        this._gridModes = modes ? modes : defaultGridModes;
+        this.queue_relayout();
+    }
+
+    getDropTarget(x, y) {
+        const layoutManager = this.layout_manager;
+        return layoutManager.getDropTarget(x, y, this._currentPage);
+    }
+
+    get itemsPerPage() {
+        const layoutManager = this.layout_manager;
+        return layoutManager.rows_per_page * layoutManager.columns_per_page;
+    }
+});