feat: Set onbeforeunload to avoid losing the current terminal session with Ctrl+W

[erikmd]

Description

As an Emacs user (and co-maintainer of several packages), I extensively use Gitpod Terminal Browser in multiple occasions. Gitpod Terminal is a very nice tool!
— even if the README states that "it is not ready for production use", I guess it's pretty close 👍

Motivation of this PR: given the Ctrl+W is a very typical Emacs shortcut that must be avoided when using Gitpod (because it amounts to stopping the workspace and losing the ambient session), this small feature appears to be very important for Gitpod+Terminal users.

BTW I followed advice from https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event:

The dialog can be triggered in the following ways:

• Calling the event object's preventDefault() method.
• Setting the event object's returnValue property to a non-empty string value or any other truthy value.
• Returning any truthy value from the event handler function, e.g. return "string". Note that this only works when the function is attached via the onbeforeunload property, not the addEventListener() method. This behavior is consistent across modern versions of Firefox, Safari, and Chrome.

The last two mechanisms are legacy features; best practice is to trigger the dialog by invoking preventDefault() on the event object, while also setting returnValue to support legacy cases.

Then tested the feature successfully on Firefox ESR (under Debian Stable).

Cc @filiptronicek @mustard-mh @loujaybee @axonasif WDYT?

Related Issue(s)

Fixes #gitpod-io/gitpod#18416

How to test

• Open a gitpod workspace from the branch:
  https://gitpod.io/new/?autostart=false&useLatest=true&editor=xterm#https://github.com/gitpod-io/xterm-web-ide/pull/23
• Run ./validate.sh (after applying fix: validate.sh was incomplete for testing #23 #24)
• Open the accompanying https://debug-… gitpod instance (and click Dismiss on the dialog)
• Open the browser's developer console and check that window.onbeforeunload is not null

Documentation

/hold

[axonasif]

Thanks for the efforts @erikmd!

We'll take a look at this 👋

[mustard-mh]

@filiptronicek could you take a look? 🙏

[filiptronicek]

Hey there @erikmd 👋, I took the liberty to push to your PR to make this configurable on the user level with the XTERM_CONFIRM_BROWSER_EXIT environment variable. If it's set (and it can be set on all workspaces you ever start with user-scoped environment variables), it will prompt you to confirm before actually closing the Browser Terminal.

Below is a demo (left is with XTERM_CONFIRM_BROWSER_EXIT=true, right is without):

[erikmd]

OK @filiptronicek, thanks a lot! 👍

Side-question: will xterm-web-ide be reused in Gitpod Flex at some point? or it is strongly related to Gitpod Classic.

[filiptronicek]

@erikmd because of the architectural differences between Classic and Flex, the editor will definitely not be able to be used as-is.

That said, because of just how Flex-ible Flex is designed to be, there definitely will be (and to some degree already are) extension points for a slightly modified Xterm IDE. AFAIK, you can actually use Automations today to run the IDE for every environment you create (see the postEnvironmentStart hook). This will require a bit of tinkering though since we only officially release the IDE for now as a Classic Docker image.

[erikmd]

OK, thanks @filiptronicek for your feedback!