Support dragging files in browser

[msujew]

What it does

Adds a feature that wasn't originally included in #12065. We currently support dragging files from the OS explorer to the main area of Theia, which results in opening the exact file (via its original URI) that was dropped into the application.

This won't work in browser based Theia apps for obvious reasons. Instead, this PRs adjusts the behavior for non-Electron apps. We now simply read the file name and text data of the dropped file into an untitled resource that we then attempt to open. Reusing untitled resources has a few benefits, mainly that it automatically handles disposal in case the editor is closed and also that it has special behavior when it comes to saving the file (it will automatically open the "Save As..." dialog).

How to test

1. Open the browser example app
2. Drag & drop a text (!) file into the main area. Dropping a non-text file (like an image) into the editor will usually result in unexpected behavior. However, it seems like vscode.dev also struggles with that, so it's at least as good as VS Code.
3. The file should open, contain the expected file name and otherwise behave as any other untitled resource.

Follow-ups

We could potentially also support non-text files later on.

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[tsmaeder]

@msujew I have a strange behavior: when I drag a file into the editor area, it opens in a dirty text editor, as expected. But when I click on the close box, I only get two options: "Save" and "Cancel". I should have "Don't save", as well.

[msujew]

@tsmaeder Cannot reproduce :/

Screen.Recording.2025-01-29.181928.mp4

[msujew]

The Don't save button isn't even conditional; it should always appear on the dialog. Perhaps something in your build broke for some reason?

theia/packages/core/src/browser/saveable.ts

Lines 360 to 374 in c8ae828

	constructor(widget: Widget) {
	super({
	title: nls.localizeByDefault('Do you want to save the changes you made to {0}?', widget.title.label || widget.title.caption)
	}, {
	node: widget.node.ownerDocument.createElement('div')
	});
	const messageNode = this.node.ownerDocument.createElement('div');
	messageNode.textContent = nls.localizeByDefault("Your changes will be lost if you don't save them.");
	messageNode.setAttribute('style', 'flex: 1 100%; padding-bottom: calc(var(--theia-ui-padding)*3);');
	this.contentNode.appendChild(messageNode);
	this.appendCloseButton();
	this.dontSaveButton = this.appendDontSaveButton();
	this.appendAcceptButton(nls.localizeByDefault('Save'));
	}

[tsmaeder]

Here's what I do...looks like the untitled resource causes a "save as..." dialog. This is firefox on windows.

2025-01-29.20-38-23.mp4

[tsmaeder]

I had "autosave" on for some reason 🤷