Firefox: Files in menu items (such as explorer) are opened on mouseup, not onclick

[nicofrand]

Hi!

When I select a line in the editor I often start my selection from the end of the line, pressing the mouse left button and go to the beginning of the line and release the mouse button. However I go further than the beginning of the line to be quick and my cursor is on the left panel (ex: Explorer).

When I release the mouse button this triggers a mouseup event in the panel, for example an extension, which causes it to open in the editor (thus switching the active file being edited).

Example with this code:

/**
 * @class mynamespace.Component class
 */
mynamespace.Component = function () {

};

/**
 * Fires a <i>onComponentTitleChanged</i> event on all registered listeners.
 * @private
 */
mynamespace.Component.prototype._fireTitleChanged = function () {
    this._listeners.forEach(l => {
        if (l.onComponentTitleChanged) {
            l.onComponentTitleChanged(this, this._title);
        }
    });
};

/**
 * Fires a <i>onComponentIconChanged</i> event on all registered listeners.
 * @private
 */
mynamespace.Component.prototype._fireIconChanged = function () {
    this._listeners.forEach(l => {
        if (l.onComponentIconChanged) {
            l.onComponentIconChanged(this, this._icon);
        }
    });
};

/**
 * Fires a <i>onComponentResized</i> event on all registered listeners.
 * @private
 */
mynamespace.Component.prototype._fireResized = function () {
    this._listeners.forEach(l => {
        if (l.onComponentResized) {
            l.onComponentResized(this);
        }
    });
};

/**
 * Fires a <i>onComponentMinimized</i> event on all registered listeners.
 * @private
 */
mynamespace.Component.prototype._fireMinimized = function () {
    this._listeners.forEach(l => {
        if (l.onComponentMinimized) {
            l.onComponentMinimized(this, this._isMinimized);
        }
    });
};

/**
 * Fires a <i>onComponentMaximized</i> event on all registered listeners.
 * @private
 */
mynamespace.Component.prototype._fireMaximized = function () {
    this._listeners.forEach(l => {
        if (l.onComponentMaximized) {
            l.onComponentMaximized(this, this._isMaximized);
        }
    });
};

/**
 * Fires a <i>onComponentClosed</i> event on all registered listeners.
 * @private
 */
mynamespace.Component.prototype._fireClosed = function () {
    for (var i = this._listeners.length - 1; i >= 0; --i) {
        var l = this._listeners[i];
        if (l.onComponentClosed) {
            l.onComponentClosed(this);
        }
    }
};

See this gif: I select some code then release the mouse button over the "Jupyter" item in the extensions panel, which opens it on the right side.

This only happens in vscode.dev (or other web versions of it), not the desktop vscode app.

(Initially opened in https://github.com/gitpod-io/gitpod/issues/10559)

Version: 1.77.3 Commit: 704ed70d4fd1c6bd6342c436f1ede30d1cff4710 User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0 Embedder: vscode.dev

[joaomoreno]

I can't repro this on macOS/Safari. On what browsers can you repro this?

[nicofrand]

Hi,

in Firefox (the user-agent was provided (User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0) but that happens in several versions of it.

[joaomoreno]

Can you repro on a Chromium based browser?

[nicofrand]

No I do not.

[antonioprudenzano]

It actually triggers a click event when releasing mouse click. Happens even if you do the same steps while using the editor scrollbar.

[pnhalim]

Hi, I am looking into this issue with @JoelSon1014

It looks like this happens when the following steps are done

1. open in Firefox
2. start at any draggable object (text selection, scrollbar, minimap to the right)
3. release the mouse while on top of most sidebar buttons, status bar buttons (bottom), action view items (top right), and also the command center input

I am currently working on a solution that tracks whether the button's mouseOver event was activated (only in Firefox). It seems that the mouseOver event does not occur while a draggable object is selected, so we can use this to ensure that buttons are only clicked when not dragging (when the mouseOver event did occur).

I will submit a pull request soon. I've gotten the correct functionality working for almost all of the buttons, with a few exceptions