Gnome-shell extension puzzle: setting variables not working?

Question

This must be some basic misunderstanding (on my side) on how gnome-shell extensions work. I struggled to find some documentation but, alas, it seems a bit sparse.

I want to write a simple extension to toggle focus mode from FFM to click-to-focus clicking on an icon in a panel, due to the fact that I normally use FFM, but some program is broken with it. So I started with the basic gnome-shell-extension-tool --create-extension and modified it in the following way:

const St = imports.gi.St;
const Main = imports.ui.main;
const Tweener = imports.ui.tweener;

let text, button, icon;

var toggle;

function _hideHello() {
    Main.uiGroup.remove_actor(text);
    text = null;
}

function _showHello(what) {
    if (!text) {
        text = new St.Label({ style_class: 'helloworld-label', text: what });
        Main.uiGroup.add_actor(text);
    }

    text.opacity = 255;
    let monitor = Main.layoutManager.primaryMonitor;
    text.set_position(Math.floor(monitor.width / 2 - text.width / 2),
                      Math.floor(monitor.height / 2 - text.height / 2));
    Tweener.addTween(text,
                     { opacity: 0,
                       time: 2,
                       transition: 'easeOutQuad',
                       onComplete: _hideHello });
}

function _switch() {
    if (toggle == 0) {
        toggle = 1;
        _showHello("Setting toggle to " + toggle);
    }
    if (toggle == 1) {
        toggle = 0;
        _showHello("Setting toggle to " + toggle);
    }
}

function init() {
    button = new St.Bin({ style_class: 'panel-button',
                          reactive: true,
                          can_focus: true,
                          x_fill: true,
                          y_fill: false,
                          track_hover: true });
    icon = new St.Icon({ icon_name: 'system-run-symbolic',
                             style_class: 'system-status-icon' });
    button.set_child(icon);
    toggle = 0;
    button.connect('button-press-event', _switch);
}

function enable() {
    Main.panel._rightBox.insert_child_at_index(button, 0);
}

function disable() {
    Main.panel._rightBox.remove_child(button);
}

with the (probably naïve) idea that each time I pressed the button I could switch toggle from 0 to 1 and vice-versa.

Instead, what happens is that every time I click on the button, the same "Setting toggle to 1" message is shown.

Can anyone explain what is happening? Thanks.

Answer 1

I think there's something wrong in _switch. There should be an else before the second if statement. Without it the second if statement will always run and toggle will always be 0.

current code:

if (toggle == 0) { 
    toggle = 1;
    _showHello("Setting toggle to " + toggle);
}
if (toggle == 1) { //at this stage, toggle will always be 1
    toggle = 0;
    _showHello("Setting toggle to " + toggle);
}

proposed code:

if (toggle == 0) {
    toggle = 1;
    _showHello("Setting toggle to " + toggle);
} else if (toggle == 1) {
    toggle = 0;
    _showHello("Setting toggle to " + toggle);
}

As an alternative, you could also consider using these for toggling the value instead of using if statements

toggle=!toggle; //value becomes true/false instead of 1/0 if that matters

toggle= toggle ? 0 : 1; //ternary operator

Example Fiddle