gistfile1.txt

const GObject = imports.gi.GObject;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;

Gtk.init(null);


const SlidingPanelOverlay = new Lang.Class({
    Name: 'SlidingPanelOverlay',
    GTypeName: 'EknSlidingPanelOverlay',
    Extends: Gtk.Overlay,


    _init: function(params) {
        this.parent(params);
    },

    vfunc_get_child_position: function (panel, child_allocation) {
        let [min, nat] = panel.get_preferred_size();
        print(nat.width)
        child_allocation.width = nat.width + 60;
        child_allocation.height = nat.height + 60;
        child_allocation.x = -30;
        child_allocation.y = -30;
    },
});


let frame = new Gtk.Frame({
    // expand: false,
    margin: 30
});
frame.set_size_request(400, 100)

frame.get_style_context().add_class('shadow')

frame.connect_after('size-allocate', function (widget, clip) {
    clip.x -= 30; clip.y -= 30;
    clip.width += 60; clip.height += 60;
    frame.set_clip(clip)
})

let css = ".shadow {background-color:red; border: 2px solid blue; box-shadow: 0px 10px 20px 10px red;}"

let provider = new Gtk.CssProvider();
provider.load_from_data(css);
let context = frame.get_style_context();
context.add_provider(provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);

let overlay = new SlidingPanelOverlay();
let grid = new Gtk.Grid({
    expand: true,
    halign: Gtk.Align.FILL,
    valign: Gtk.Align.FILL,
});
grid.set_size_request(200, 100)
overlay.add(grid);

let mwindow = new Gtk.Window({
    default_width: 800,
    default_height: 600
});
overlay.add_overlay(frame)
mwindow.add(overlay);
mwindow.show_all();
mwindow.connect('destroy', function() { Gtk.main_quit() });

Gtk.main();