Pass Tabbar DOM events to the Widget

[colin-grant-work]

Feature Description:

It would be nice if widgets could define handlers for events targeting the titles they own. The use case I have top of mind is converting an editor preview widget to a normal editor widget (#5757), but other use cases could no doubt be found.

In our tabbar implementation, we define some handlers to be called on various DOM events:

theia/packages/core/src/browser/shell/tab-bars.ts

Lines 133 to 158 in 38f176a

	renderTab(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
	const title = data.title;
	const id = this.createTabId(data.title);
	const key = this.createTabKey(data);
	const style = this.createTabStyle(data);
	const className = this.createTabClass(data);
	const dataset = this.createTabDataset(data);
	return h.li(
	{
	key, className, id, title: title.caption, style, dataset,
	oncontextmenu: this.handleContextMenuEvent,
	ondblclick: this.handleDblClickEvent,
	onauxclick: (e: MouseEvent) => {
	// If user closes the tab using mouse wheel, nothing should be pasted to an active editor
	e.preventDefault();
	}
	},
	h.div(
	{ className: 'theia-tab-icon-label' },
	this.renderIcon(data, isInSidePanel),
	this.renderLabel(data, isInSidePanel),
	this.renderBadge(data, isInSidePanel)
	),
	this.renderCloseIcon(data)
	);
	}

We could generalize that pattern, and do something like:

if (title.owner instanceof Widget && title.owner.handleTabDblClick) {
    // follow the convention that returning `false` prevents further work on the event
    const terminateHandling = title.owner.handleTabDblClick(e) === false || e.defaultPrevented;
    if (terminateHandling) return !terminateHandling;
}
// ... default code to run