Extend welcome screen button click area to labels

Closes #738

frontend/src/components/widgets/buttons/TextButton.ts

@@ -7,6 +7,7 @@ export interface TextButtonWidget {
 	props: {
 		kind: "TextButton";
 		label: string;
+		icon?: string;
 		emphasized?: boolean;
 		minWidth?: number;
 		disabled?: boolean;

frontend/src/components/widgets/buttons/TextButton.vue

@@ -8,12 +8,14 @@
 		:style="minWidth > 0 ? `min-width: ${minWidth}px` : ''"
 		@click="(e: MouseEvent) => action(e)"
 	>
+		<IconLabel v-if="icon" :icon="icon" />
 		<TextLabel>{{ label }}</TextLabel>
 	</button>
 </template>
 
 <style lang="scss">
 .text-button {
+	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex: 0 0 auto;
@@ -52,17 +54,26 @@
 	& + .text-button {
 		margin-left: 8px;
 	}
+
+	.icon-label {
+		position: relative;
+		left: -4px;
+	}
 }
 </style>
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
+import { IconName } from "@/utility-functions/icons";
+
+import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({
 	props: {
 		label: { type: String as PropType<string>, required: true },
+		icon: { type: String as PropType<IconName | undefined>, required: false },
 		emphasized: { type: Boolean as PropType<boolean>, default: false },
 		minWidth: { type: Number as PropType<number>, default: 0 },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
@@ -70,6 +81,9 @@ export default defineComponent({
 		// Callbacks
 		action: { type: Function as PropType<(e: MouseEvent) => void>, required: true },
 	},
-	components: { TextLabel },
+	components: {
+		IconLabel,
+		TextLabel,
+	},
 });
 </script>

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -72,15 +72,18 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import { operatingSystemIsMac } from "@/utility-functions/platform";
 import { MenuEntry, UpdateMenuBarLayout, MenuListEntry } from "@/wasm-communication/messages";
 
 import MenuList from "@/components/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
+// TODO: Apparently, Safari does not support the Keyboard.lock() API but does relax its authority over certain keyboard shortcuts in fullscreen mode, which we should handle correctly
+const controlOrCommand = operatingSystemIsMac() ? "KeyCommand" : "KeyControl";
 const LOCK_REQUIRING_SHORTCUTS = [
-	["KeyControl", "KeyN"],
-	["KeyControl", "KeyShift", "KeyT"],
-	["KeyControl", "KeyW"],
+	[controlOrCommand, "KeyN"],
+	[controlOrCommand, "KeyShift", "KeyT"],
+	[controlOrCommand, "KeyW"],
 ];
 
 type FrontendMenuColumn = {

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -23,7 +23,6 @@
 .user-input-label {
 	flex: 0 0 auto;
 	height: 100%;
-	margin: 0 8px;
 	align-items: center;
 	white-space: nowrap;
 
@@ -188,10 +187,15 @@ export default defineComponent({
 			return Boolean(this.$slots.default);
 		},
 		keyboardLockInfoMessage(): string {
-			const USE_FULLSCREEN = "This hotkey is reserved by the browser, but becomes available in fullscreen mode";
-			const SWITCH_BROWSER = "This hotkey is reserved by the browser, but becomes available in Chrome, Edge, and Opera which support the Keyboard.lock() API";
+			const RESERVED = "This hotkey is reserved by the browser. ";
+			const USE_FULLSCREEN = "It is made available in fullscreen mode.";
+			const USE_SECURE_CTX = "It is made available in fullscreen mode when this website is served from a secure context (https or localhost).";
+			const SWITCH_BROWSER = "Use a Chromium-based browser (like Chrome or Edge) in fullscreen mode to directly use the shortcut.";
 
-			return this.fullscreen.keyboardLockApiSupported ? USE_FULLSCREEN : SWITCH_BROWSER;
+			if (this.fullscreen.keyboardLockApiSupported) return `${RESERVED} ${USE_FULLSCREEN}`;
+			if (!("chrome" in window)) return `${RESERVED} ${SWITCH_BROWSER}`;
+			if (!window.isSecureContext) return `${RESERVED} ${USE_SECURE_CTX}`;
+			return RESERVED;
 		},
 		displayKeyboardLockNotice(): boolean {
 			return this.requiresLock && !this.fullscreen.state.keyboardLocked;