How to change border color of focused window

[blueray453]

The current code looks like:

AddOrangeBorderToFocusedWindow() {
    let win = Display.get_focus_window();
    if (!win) {
        return;
    }

    // Get the window actor
    let windowActor = win.get_compositor_private();
    if (!windowActor) {
        return;
    }

    // Add a CSS class to style the border
    windowActor.add_style_class_name('focused-orange-border');
}

stylesheet.css looks like:

.focused-orange-border {
    border: 2px solid orange !important;
    border-radius: 4px;
}

I am getting error Error org.gnome.gjs.JSError.TypeError: windowActor.add_style_class_name is not a function

What i want to do is, one function will add the css to the window. Another function will remove the css class, restoring the previous state.

To give some context, I want to mark few windows (will mark one focused window at a time). Then run an operation on marked windows.

I am doing it using:

_get_marked_windows = function () {
    let markedWindows = [];

    try {
        let markedWindowsVariant = global.get_persistent_state('ai', 'marked_windows');

        if (markedWindowsVariant) {
            markedWindows = markedWindowsVariant.deep_unpack();
        }
    } catch (error) {
        log(`Error : ${error}`);
        // Set default value for persistent state if needed
        // global.set_persistent_state('marked_windows', GLib.Variant.new('ai', markedWindows));
    }

    return markedWindows;
}

MarkWindows() {

    let win = Display.get_focus_window();
    let winID = win.get_id();

    let markedWindows = this._get_marked_windows();

    // log(`Marked Windows : ${markedWindows}`);

    let mySet = new Set(markedWindows);

    if (mySet.has(winID)) {
        mySet.delete(winID);
    } else {
        mySet.add(winID);
    }

    markedWindows = Array.from(mySet);

    let variantArray = GLib.Variant.new('ai', markedWindows);

    // Save the variant array to persistent state
    global.set_persistent_state('marked_windows', variantArray);

    let jsonResult = JSON.stringify(markedWindows);

    return jsonResult;
} 

Now i need a visual indicator so that I know which window is marked. As you can see, MarkWindows toggle the mark. So, when it is marked, it will have orange border, when mark removed it will be on previous state.

How can I do that?

[blueray453]

This is as far I have come by followoing Adding color to borders gnome windows.

_add_orange_border_to_window = function (win) {
        if (!win) return;

        let actor = win.get_compositor_private().get_parent();
        if (!actor) return;

        if (!borders[win]) {
            borders[win] = new St.Bin({
                style_class: 'border'
            });
            actor.add_child(borders[win]);
            global.window_group.set_child_above_sibling(borders[win], actor);
        }

        const BORDERSIZE = 3;

        function redrawBorder() {
            let rect = win.get_frame_rect();
            borders[win].set_position(rect.x - BORDERSIZE, rect.y - BORDERSIZE);
            borders[win].set_size(rect.width + 2 * BORDERSIZE, rect.height + 2 * BORDERSIZE);
        }

        redrawBorder();

        // Connect to the size-changed and position-changed signals
        signalHandlers[win] = {
            sizeChangedId: win.connect('size-changed', redrawBorder),
            positionChangedId: win.connect('position-changed', redrawBorder),
            restackHandlerID: global.display.connect('restacked', restack),
            unmanagedId: win.connect('unmanaged', () => {
                actor.remove_child(borders[win]);
                win.disconnect(signalHandlers[win].sizeChangedId);
                win.disconnect(signalHandlers[win].positionChangedId);
                win.disconnect(signalHandlers[win].restackHandlerID);
                win.disconnect(signalHandlers[win].unmanagedId);
                delete borders[win];
                delete signalHandlers[win];
            })
        };

        function checkMetaWindow(child){
            let metaWindow = null
            try {
                metaWindow = child.get_meta_window()
            } catch (error) {
                log(error)
            }

            if (!metaWindow) return false;

            let type = metaWindow.get_window_type()

            if (
                type != Meta.WindowType.NORMAL &&
                type != Meta.WindowType.DIALOG &&
                type != Meta.WindowType.MODAL_DIALOG
            ) return false;

            return metaWindow
        }

        function restack(display){
            global.window_group.get_children().forEach(
                (child) => {
                    let metaWindow = this.checkMetaWindow(child);

                    if (!metaWindow) return;

                    let window = metaWindow.get_description();

                    global.window_group.set_child_above_sibling(borders[window], child);
                }
            )
        }
    }

The issue is the same as linked post. when drawing multiple borders all the borders seems to be on top of all the windows. The borders doesn’t be have as normal windows.

Please Help.