Add fullscreen buttons to file viewer and filesystem

svelte/src/filesystem/Filesystem.svelte

@@ -14,6 +14,7 @@ import { branding_from_path } from './edit_window/Branding.js'
 import Menu from './Menu.svelte';
 
 let loading = true
+let file_viewer
 let toolbar
 let upload_widget
 let download_frame
@@ -119,7 +120,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 	on:loading={loading_evt}
 />
 
-<div class="file_viewer">
+<div bind:this={file_viewer} class="file_viewer">
 	<div class="headerbar">
 		<Menu/>
 		<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
@@ -130,6 +131,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 			bind:this={toolbar}
 			fs_navigator={fs_navigator}
 			state={state}
+			file_viewer={file_viewer}
 			bind:details_visible={details_visible}
 			edit_window={edit_window}
 			bind:edit_visible={edit_visible}

svelte/src/filesystem/Toolbar.svelte

@@ -20,6 +20,7 @@ export let view = "file"
 export let details_visible = false
 export let edit_window
 export let edit_visible = false
+export let file_viewer
 
 $: share_url = generate_share_url(state.path)
 let link_copied = false
@@ -50,6 +51,21 @@ let share = async () => {
 	}
 }
 
+let fullscreen = false
+const toggle_fullscreen = () => {
+	if (fullscreen || document.fullscreenElement) {
+		try {
+			document.exitFullscreen()
+		} catch (err) {
+			console.debug("Failed to exit fullscreen", err)
+		}
+		fullscreen = false
+	} else {
+		file_viewer.requestFullscreen()
+		fullscreen = true
+	}
+}
+
 let expanded = false
 let expand = e => {
 	e.preventDefault()
@@ -113,6 +129,19 @@ let expand = e => {
 			</button>
 		{/if}
 
+		<button
+			class="toolbar_button"
+			on:click={toggle_fullscreen}
+			class:button_highlight={fullscreen}
+			title="Open page in full screen mode">
+			{#if fullscreen}
+				<i class="icon">fullscreen_exit</i>
+			{:else}
+				<i class="icon">fullscreen</i>
+			{/if}
+			<span>Fullscreen</span>
+		</button>
+
 		<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
 			<i class="icon">help</i>
 			<span>Deta<u>i</u>ls</span>