[frontend] add tooltips and fix auxclick bug

Author: velzie

frontend/src/components/IconButton.tsx

@@ -6,13 +6,15 @@ export const IconButton: Component<{
 	icon: IconifyIcon;
 	click?: (e: MouseEvent) => void;
 	active?: boolean;
+	tooltip?: string;
 }> = function (cx) {
 	this.active ??= true;
 	return (
 		<button
 			disabled={use(this.active).map((x) => (x ? undefined : true))}
 			class:active={use(this.active)}
 			on:click={(e) => this.click?.(e)}
+			title={this.tooltip}
 		>
 			<Icon icon={this.icon} />
 		</button>

frontend/src/components/Omnibox.tsx

@@ -37,16 +37,19 @@ export const Omnibox: Component<{
 	return (
 		<div>
 			<IconButton
+				tooltip="Go back one page (Alt+Left Arrow)"
 				active={use(this.tab.canGoBack)}
 				click={() => this.tab.back()}
 				icon={iconBack}
 			></IconButton>
 			<IconButton
+				tooltip="Go forward one page (Alt+Right Arrow)"
 				active={use(this.tab.canGoForward)}
 				click={() => this.tab.forward()}
 				icon={iconForwards}
 			></IconButton>
 			<IconButton
+				tooltip="Refresh current page (Ctrl+R)"
 				click={() => this.tab.reload()}
 				icon={iconRefresh}
 			></IconButton>
@@ -58,6 +61,7 @@ export const Omnibox: Component<{
 			<Spacer></Spacer>
 			<IconButton active={false} icon={iconExtension}></IconButton>
 			<IconButton
+				tooltip="More Options"
 				icon={iconMore}
 				click={(e: MouseEvent) => {
 					createMenu(e.x, cx.root.clientTop + cx.root.clientHeight * 2, [

frontend/src/components/UrlInput.tsx

@@ -139,6 +139,11 @@ export const UrlInput: Component<
 			browser.unfocusframes = false;
 			e.stopPropagation();
 		});
+		document.body.addEventListener("auxclick", (e) => {
+			this.active = false;
+			browser.unfocusframes = false;
+			e.stopPropagation();
+		});
 		if (this.tabUrl.href == "puter://newtab") {
 			this.value = "";
 		} else {