Feature: Added experimental terminal integration

src/Files.App/Extensions/StringExtensions.cs

@@ -54,6 +54,14 @@ public static string WithEnding(this string str, string ending)
 			return result;
 		}
 
+		/// <summary>
+		/// Compares two strings for equality, but assumes that null string is equal to an empty string.
+		/// </summary>
+		public static bool NullableEqualTo(this string original, string other,
+			StringComparison stringComparison = StringComparison.Ordinal) => string.IsNullOrEmpty(original)
+			? string.IsNullOrEmpty(other)
+			: original.Equals(other, stringComparison);
+
 		private static readonly ResourceMap resourcesTree = new ResourceManager().MainResourceMap.TryGetSubtree("Resources");
 
 		private static readonly ConcurrentDictionary<string, string> cachedResources = new();

src/Files.App/Extensions/WebView2Extensions.cs

@@ -0,0 +1,222 @@
+// Copyright (c) Mahmoud Al-Qudsi, NeoSmart Technoogies. All rights reserved.  
+// Licensed under the MIT License.
+
+using CommunityToolkit.WinUI;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.Web.WebView2.Core;
+using Newtonsoft.Json;
+using System.Reflection;
+using System.Text;
+using Windows.Foundation;
+
+namespace Files.App.Extensions
+{
+	/// <summary>
+	/// Code modified from https://gist.github.com/mqudsi/ceb4ecee76eb4c32238a438664783480
+	/// </summary>
+	public static class WebView2Extensions
+	{
+		public static void Navigate(this WebView2 webview, Uri url)
+		{
+			webview.Source = url;
+		}
+
+		private enum PropertyAction
+		{
+			Read = 0,
+			Write = 1,
+		}
+
+		private struct WebMessage
+		{
+			public Guid Guid { get; set; }
+		}
+
+		private struct MethodWebMessage
+		{
+			public string Id { get; set; }
+			public string Method { get; set; }
+			public string Args { get; set; }
+		}
+
+		private struct PropertyWebMessage
+		{
+			public string Id { get; set; }
+			public string Property { get; set; }
+			public PropertyAction Action { get; set; }
+			public string Value { get; set; }
+		}
+
+		public static List<TypedEventHandler<WebView2, CoreWebView2WebMessageReceivedEventArgs>> _handlers = new List<TypedEventHandler<WebView2, CoreWebView2WebMessageReceivedEventArgs>>();
+		public static async Task AddWebAllowedObject<T>(this WebView2 webview, string name, T @object)
+		{
+			var sb = new StringBuilder();
+			sb.AppendLine($"window.{name} = {{ ");
+
+			// Test webview for our sanity
+			await webview.ExecuteScriptAsync($@"console.log(""Sanity check from iMessage"");");
+
+			var methodsGuid = Guid.NewGuid();
+			var methodInfo = typeof(T).GetMethods(BindingFlags.Public | BindingFlags.Instance);
+			var methods = new Dictionary<string, MethodInfo>(methodInfo.Length);
+			foreach (var method in methodInfo)
+			{
+				var functionName = $"{char.ToLower(method.Name[0])}{method.Name.Substring(1)}";
+				sb.AppendLine($@"{functionName}: function() {{ window.chrome.webview.postMessage(JSON.stringify({{ guid: ""{methodsGuid}"", id: this._callbackIndex++, method: ""{functionName}"", args: JSON.stringify([...arguments]) }})); const promise = new Promise((accept, reject) => this._callbacks.set(this._callbackIndex, {{ accept: accept, reject: reject }})); return promise; }},");
+				methods.Add(functionName, method);
+			}
+
+			var propertiesGuid = Guid.NewGuid();
+			var propertyInfo = typeof(T).GetProperties(BindingFlags.Public | BindingFlags.Instance);
+			var properties = new Dictionary<string, PropertyInfo>(propertyInfo.Length);
+			//foreach (var property in propertyInfo)
+			//{
+			//    var propertyName = $"{char.ToLower(property.Name[0])}{property.Name.Substring(1)}";
+			//    if (property.CanRead)
+			//    {
+			//        sb.AppendLine($@"get {propertyName}() {{ window.chrome.webview.postMessage(JSON.stringify({{ guid: ""{propertiesGuid}"", id: this._callbackIndex++, property: ""{propertyName}"", action: ""{(int) PropertyAction.Read}"" }})); const promise = new Promise((accept, reject) => this._callbacks.set(this._callbackIndex, {{ accept: accept, reject: reject }})); return promise; }},");
+			//    }
+			//    if (property.CanWrite)
+			//    {
+			//        sb.AppendLine($@"set {propertyName}(value) {{ window.chrome.webview.postMessage(JSON.stringify({{ guid: ""{propertiesGuid}"", id: this._callbackIndex++, property: ""{propertyName}"", action: ""{(int)PropertyAction.Write}"", value: JSON.stringify(value) }}));  const promise = new Promise((accept, reject) => this._callbacks.set(this._callbackIndex, {{ accept: accept, reject: reject }})); return promise; }},");
+
+			//    }
+			//    properties[propertyName] = property;
+			//}
+
+			// Add a map<int, (promiseAccept, promiseReject)> to the object used to resolve results
+			sb.AppendLine($@"_callbacks: new Map(),");
+			// And a shared counter to index into that map
+			sb.Append($@"_callbackIndex: 0,");
+
+			sb.AppendLine("}");
+
+			try
+			{
+				//await webview.ExecuteScriptAsync($"try {{ {sb} }} catch (ex) {{ console.error(ex); }}").AsTask();
+				await webview.ExecuteScriptAsync($"{sb}").AsTask();
+			}
+			catch (Exception ex)
+			{
+				// So we can see it in the JS debugger
+			}
+
+			var handler = (TypedEventHandler<WebView2, CoreWebView2WebMessageReceivedEventArgs>)(async (_, e) =>
+			{
+				var message = JsonConvert.DeserializeObject<WebMessage>(e.TryGetWebMessageAsString());
+				if (message.Guid == methodsGuid)
+				{
+					var methodMessage = JsonConvert.DeserializeObject<MethodWebMessage>(e.TryGetWebMessageAsString());
+					var method = methods[methodMessage.Method];
+					try
+					{
+						var result = method.Invoke(@object, JsonConvert.DeserializeObject<object[]>(methodMessage.Args));
+						if (result is object)
+						{
+							var resultType = result.GetType();
+							dynamic task = null;
+							if (resultType.Name.StartsWith("TaskToAsyncOperationAdapter")
+								|| resultType.IsInstanceOfType(typeof(IAsyncInfo)))
+							{
+								// IAsyncOperation that needs to be converted to a task first
+								if (resultType.GenericTypeArguments.Length > 0)
+								{
+									var asTask = typeof(WindowsRuntimeSystemExtensions)
+										.GetMethods(BindingFlags.Public | BindingFlags.Static)
+										.Where(method => method.GetParameters().Length == 1
+											&& method.Name == "AsTask"
+											&& method.ToString().Contains("Windows.Foundation.IAsyncOperation`1[TResult]"))
+										.FirstOrDefault();
+
+									//var asTask = typeof(WindowsRuntimeSystemExtensions)
+									//    .GetMethod(nameof(WindowsRuntimeSystemExtensions.AsTask),
+									//            new[] { typeof(IAsyncOperation<>).MakeGenericType(resultType.GenericTypeArguments[0]) }
+									//    );
+
+									asTask = asTask.MakeGenericMethod(resultType.GenericTypeArguments[0]);
+									task = (Task)asTask.Invoke(null, new[] { result });
+								}
+								else
+								{
+									task = WindowsRuntimeSystemExtensions.AsTask((dynamic)result);
+								}
+							}
+							else
+							{
+								var awaiter = resultType.GetMethod(nameof(Task.GetAwaiter));
+								if (awaiter is object)
+								{
+									task = result;
+								}
+							}
+							if (task is object)
+							{
+								result = await task;
+							}
+						}
+						var json = JsonConvert.SerializeObject(result);
+						await webview.ExecuteScriptAsync($@"{name}._callbacks.get({methodMessage.Id}).accept(JSON.parse({json})); {name}._callbacks.delete({methodMessage.Id});");
+					}
+					catch (Exception ex)
+					{
+						var json = JsonConvert.SerializeObject(ex, new JsonSerializerSettings() { Error = (_, e) => e.ErrorContext.Handled = true });
+						await webview.ExecuteScriptAsync($@"{name}._callbacks.get({methodMessage.Id}).reject(JSON.parse({json})); {name}._callbacks.delete({methodMessage.Id});");
+						//throw;
+					}
+				}
+				else if (message.Guid == propertiesGuid)
+				{
+					var propertyMessage = JsonConvert.DeserializeObject<PropertyWebMessage>(e.TryGetWebMessageAsString());
+					var property = properties[propertyMessage.Property];
+					try
+					{
+						object result;
+						if (propertyMessage.Action == PropertyAction.Read)
+						{
+							result = property.GetValue(@object);
+						}
+						else
+						{
+							var value = JsonConvert.DeserializeObject(propertyMessage.Value, property.PropertyType);
+							property.SetValue(@object, value);
+							result = new object();
+						}
+
+						var json = JsonConvert.SerializeObject(result);
+						await webview.ExecuteScriptAsync($@"{name}._callbacks.get({propertyMessage.Id}).accept(JSON.parse({json})); {name}._callbacks.delete({propertyMessage.Id});");
+					}
+					catch (Exception ex)
+					{
+						var json = JsonConvert.SerializeObject(ex, new JsonSerializerSettings() { Error = (_, e) => e.ErrorContext.Handled = true });
+						//await webview.ExecuteScriptAsync($@"{name}._callbacks.get({propertyMessage.Id}).reject(JSON.parse({json})); {name}._callbacks.delete({propertyMessage.Id});");
+						//throw;
+					}
+				}
+			});
+
+			_handlers.Add(handler);
+			webview.WebMessageReceived += handler;
+		}
+
+		public static async Task<string> InvokeScriptAsync(this WebView2 webview, string function, params object[] args)
+		{
+			var array = JsonConvert.SerializeObject(args);
+			string result = null;
+			// Tested and checked: this dispatch is required, even though the web view is in a different process
+			await webview.DispatcherQueue.EnqueueAsync(async () =>
+			{
+				var script = $"{function}(...{array});";
+				try
+				{
+					result = await webview.ExecuteScriptAsync(script).AsTask();
+					result = JsonConvert.DeserializeObject<string>(result);
+				}
+				catch (Exception ex)
+				{
+				}
+			}, Microsoft.UI.Dispatching.DispatcherQueuePriority.Normal);
+
+			return result;
+		}
+	}
+}

src/Files.App/Files.App.csproj

@@ -58,6 +58,10 @@
         <Content Include="Resources\PropertiesInformation.json">
             <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </Content>
+        <Content Include="Utils\Terminal\UI\bundle.js" />
+        <Content Include="Utils\Terminal\UI\index.html" />
+        <Content Include="Utils\Terminal\UI\style.css" />
+        <Content Include="Utils\Terminal\UI\xterm.css" />
         <Content Update="Assets\FilesOpenDialog\SetFilesAsDefault.reg">
             <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
         </Content>

src/Files.App/UserControls/StatusBar.xaml

@@ -107,6 +107,7 @@
 			<ColumnDefinition />
 			<ColumnDefinition Width="Auto" />
 			<ColumnDefinition Width="Auto" />
+			<ColumnDefinition Width="Auto" />
 		</Grid.ColumnDefinitions>
 
 		<StackPanel
@@ -387,5 +388,72 @@
 			</Button.Flyout>
 		</Button>
 
+		<StackPanel
+			x:Name="TerminalPanel"
+			Grid.Column="3"
+			VerticalAlignment="Center"
+			x:Load="True"
+			Orientation="Horizontal"
+			Spacing="4">
+
+			<Button
+				x:Name="SyncFolderUp"
+				Height="24"
+				Padding="8,0,8,0"
+				VerticalAlignment="Center"
+				x:Load="{x:Bind MainPageViewModel.IsTerminalViewOpen, Mode=OneWay}"
+				Background="Transparent"
+				BorderBrush="Transparent"
+				Command="{x:Bind MainPageViewModel.TerminalSyncUpCommand}">
+				<Button.Content>
+					<FontIcon FontSize="12" Glyph="&#xE110;" />
+				</Button.Content>
+			</Button>
+
+			<Button
+				x:Name="SyncFolderDown"
+				Height="24"
+				Padding="8,0,8,0"
+				VerticalAlignment="Center"
+				x:Load="{x:Bind MainPageViewModel.IsTerminalViewOpen, Mode=OneWay}"
+				Background="Transparent"
+				BorderBrush="Transparent"
+				Command="{x:Bind MainPageViewModel.TerminalSyncDownCommand}">
+				<Button.Content>
+					<FontIcon FontSize="12" Glyph="&#xE74B;" />
+				</Button.Content>
+			</Button>
+
+			<SplitButton
+				x:Name="ToggleTerminal"
+				Height="24"
+				Padding="8,0,8,0"
+				VerticalAlignment="Center"
+				x:Load="True"
+				AutomationProperties.Name="Toggle terminal"
+				Background="Transparent"
+				BorderBrush="Transparent"
+				Command="{x:Bind MainPageViewModel.TerminalToggleCommand}">
+				<SplitButton.Content>
+					<StackPanel Orientation="Horizontal" Spacing="8">
+						<FontIcon FontSize="12" Glyph="&#xE756;" />
+						<TextBlock Text="{x:Bind MainPageViewModel.TerminalSelectedProfile.Name, Mode=OneWay}" />
+					</StackPanel>
+				</SplitButton.Content>
+				<SplitButton.Flyout>
+					<Flyout Placement="Top">
+						<ListView
+							x:Name="ShellProfileList"
+							Margin="-16"
+							Padding="4"
+							DisplayMemberPath="Name"
+							ItemsSource="{x:Bind MainPageViewModel.TerminalProfiles, Mode=OneWay}"
+							SelectedItem="{x:Bind MainPageViewModel.TerminalSelectedProfile, Mode=TwoWay}"
+							SelectionMode="Single" />
+					</Flyout>
+				</SplitButton.Flyout>
+			</SplitButton>
+		</StackPanel>
+
 	</Grid>
 </UserControl>

src/Files.App/UserControls/StatusBar.xaml.cs

@@ -11,6 +11,8 @@ public sealed partial class StatusBar : UserControl
 	{
 		public ICommandManager Commands { get; } = Ioc.Default.GetRequiredService<ICommandManager>();
 
+		public MainPageViewModel MainPageViewModel { get; } = Ioc.Default.GetRequiredService<MainPageViewModel>();
+
 		public DirectoryPropertiesViewModel? DirectoryPropertiesViewModel
 		{
 			get => (DirectoryPropertiesViewModel)GetValue(DirectoryPropertiesViewModelProperty);

src/Files.App/UserControls/TerminalView.xaml

@@ -0,0 +1,25 @@
+<!--  Copyright (c) 2023 Files Community. Licensed under the MIT License. See the LICENSE.  -->
+<UserControl
+	x:Class="Files.App.UserControls.TerminalView"
+	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	xmlns:local="using:Files.App.Terminal"
+	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	d:DesignHeight="300"
+	d:DesignWidth="400"
+	ActualThemeChanged="TerminalView_ActualThemeChanged"
+	Unloaded="TerminalView_Unloaded"
+	mc:Ignorable="d">
+
+	<Border x:Name="RootGrid">
+
+		<WebView2
+			x:Name="WebViewControl"
+			HorizontalAlignment="Stretch"
+			VerticalAlignment="Stretch"
+			DefaultBackgroundColor="Transparent"
+			Loaded="WebViewControl_Loaded" />
+
+	</Border>
+</UserControl>