UWP: Preference panel

support/hololens/ServoApp/App.xaml

@@ -4,4 +4,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:ServoApp">
 
+    <Application.Resources>
+        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+    </Application.Resources>
+
 </Application>

support/hololens/ServoApp/BrowserPage.cpp

@@ -8,6 +8,11 @@
 #include "BrowserPage.g.cpp"
 #include "DefaultUrl.h"
 
+#include "winrt/Microsoft.UI.Xaml.Controls.h"
+#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
+#include "winrt/Windows.UI.Text.h"
+#include "winrt/Windows.UI.Xaml.Documents.h" // For Run.Text()
+
 using namespace std::placeholders;
 using namespace winrt::Windows::Foundation;
 using namespace winrt::Windows::UI::Xaml;
@@ -18,6 +23,7 @@ using namespace winrt::Windows::UI::Notifications;
 using namespace winrt::Windows::Data::Xml::Dom;
 
 namespace winrt::ServoApp::implementation {
+
 BrowserPage::BrowserPage() {
   InitializeComponent();
   BindServoEvents();
@@ -84,13 +90,12 @@ void BrowserPage::BindServoEvents() {
       });
 }
 
-void BrowserPage::OnURLFocused(Windows::Foundation::IInspectable const &) {
+void BrowserPage::OnURLFocused(IInspectable const &) {
   urlTextbox().SelectAll();
 }
 
 void BrowserPage::OnURLKeyboardAccelerator(
-    Windows::Foundation::IInspectable const &,
-    Windows::UI::Xaml::Input::KeyboardAcceleratorInvokedEventArgs const &) {
+    IInspectable const &, Input::KeyboardAcceleratorInvokedEventArgs const &) {
   urlTextbox().Focus(FocusState::Programmatic);
 }
 
@@ -116,10 +121,7 @@ void BrowserPage::SetTransientMode(bool transient) {
 
 void BrowserPage::SetArgs(hstring args) { servoControl().SetArgs(args); }
 
-void BrowserPage::Shutdown() {
-  ToastNotificationManager::History().Clear();
-  servoControl().Shutdown();
-}
+void BrowserPage::Shutdown() { servoControl().Shutdown(); }
 
 /**** USER INTERACTIONS WITH UI ****/
 
@@ -148,23 +150,153 @@ void BrowserPage::OnHomeButtonClicked(IInspectable const &,
   servoControl().LoadURIOrSearch(DEFAULT_URL);
 }
 
+// Given a pref, update its associated UI control.
+void BrowserPage::UpdatePref(ServoApp::Pref pref, Controls::Control ctrl) {
+  auto value = pref.Value();
+  auto type = value.as<IPropertyValue>().Type();
+  if (type == PropertyType::Boolean) {
+    ctrl.as<Controls::CheckBox>().IsChecked(unbox_value<bool>(value));
+  } else if (type == PropertyType::Double) {
+    ctrl.as<Microsoft::UI::Xaml::Controls::NumberBox>().Value(
+        unbox_value<double>(value));
+  } else if (type == PropertyType::Int64) {
+    ctrl.as<Microsoft::UI::Xaml::Controls::NumberBox>().Value(
+        (double)unbox_value<int64_t>(value));
+  } else if (type == PropertyType::String) {
+    ctrl.as<Controls::TextBox>().Text(unbox_value<hstring>(value));
+  }
+  auto stack = ctrl.Parent().as<Controls::StackPanel>();
+  auto font = winrt::Windows::UI::Text::FontWeights::Normal();
+  if (!pref.IsDefault()) {
+    font = winrt::Windows::UI::Text::FontWeights::Bold();
+  }
+  stack.Children().GetAt(0).as<Controls::TextBlock>().FontWeight(font);
+  stack.Children().GetAt(2).as<Controls::Button>().IsEnabled(!pref.IsDefault());
+}
+
+// Retrieve the preference list from Servo and build the preference table.
+void BrowserPage::BuildPrefList() {
+  // It would be better to use a template and bindings, but the
+  // <ListView> takes too long to generate all the items, and
+  // it's pretty difficiult to have different controls depending
+  // on the pref type.
+  prefList().Children().Clear();
+  for (auto pref : ServoControl().Preferences()) {
+    auto value = pref.Value();
+    auto type = value.as<IPropertyValue>().Type();
+    std::optional<Controls::Control> ctrl;
+    if (type == PropertyType::Boolean) {
+      auto checkbox = Controls::CheckBox();
+      checkbox.IsChecked(unbox_value<bool>(value));
+      checkbox.Click([=](const auto &, auto const &) {
+        auto upref = ServoControl().SetBoolPref(
+            pref.Key(), checkbox.IsChecked().GetBoolean());
+        UpdatePref(upref, checkbox);
+      });
+      ctrl = checkbox;
+    } else if (type == PropertyType::String) {
+      auto textbox = Controls::TextBox();
+      textbox.Text(unbox_value<hstring>(value));
+      textbox.KeyUp([=](const auto &, Input::KeyRoutedEventArgs const &e) {
+        if (e.Key() == Windows::System::VirtualKey::Enter) {
+          auto upref = ServoControl().SetStringPref(pref.Key(), textbox.Text());
+          UpdatePref(upref, textbox);
+        }
+      });
+      ctrl = textbox;
+    } else if (type == PropertyType::Int64) {
+      // Note: These are *not* under Windows::UI:Xaml namespace.
+      auto nbox = Microsoft::UI::Xaml::Controls::NumberBox();
+      nbox.Value((double)unbox_value<int64_t>(value));
+      nbox.SpinButtonPlacementMode(
+          Microsoft::UI::Xaml::Controls::NumberBoxSpinButtonPlacementMode::
+              Inline);
+      nbox.ValueChanged([=](const auto &, const auto &) {
+        int val = (int)nbox.Value();
+        auto upref = ServoControl().SetIntPref(pref.Key(), val);
+        UpdatePref(upref, nbox);
+      });
+      ctrl = nbox;
+    } else if (type == PropertyType::Double) {
+      auto nbox = Microsoft::UI::Xaml::Controls::NumberBox();
+      nbox.Value(unbox_value<double>(value));
+      nbox.ValueChanged([=](const auto &, const auto &) {
+        auto upref =
+            ServoControl().SetIntPref(pref.Key(), (int64_t)nbox.Value());
+        UpdatePref(upref, (Controls::Control &)nbox);
+      });
+      ctrl = nbox;
+    }
+    if (ctrl.has_value()) {
+      auto stack = Controls::StackPanel();
+      stack.Tag(winrt::box_value(pref.Key()));
+      stack.Padding({4, 4, 4, 4});
+      stack.Orientation(Controls::Orientation::Horizontal);
+      auto key = Controls::TextBlock();
+      key.Text(pref.Key());
+      key.Width(350);
+      if (!pref.IsDefault()) {
+        auto font = winrt::Windows::UI::Text::FontWeights::Bold();
+        key.FontWeight(font);
+      }
+      stack.Children().Append(key);
+      ctrl->Width(300);
+      ctrl->Margin({4, 0, 40, 0});
+      stack.Children().Append(*ctrl);
+      auto reset = Controls::Button();
+      reset.Content(winrt::box_value(L"reset"));
+      reset.IsEnabled(!pref.IsDefault());
+      reset.Click([=](const auto &, auto const &) {
+        auto upref = ServoControl().ResetPref(pref.Key());
+        UpdatePref(upref, *ctrl);
+      });
+      stack.Children().Append(reset);
+      prefList().Children().Append(stack);
+    }
+  }
+}
+
+void BrowserPage::OnPrefererenceSearchboxEdited(
+    IInspectable const &, Input::KeyRoutedEventArgs const &) {
+  auto input = preferenceSearchbox().Text();
+  for (auto element : prefList().Children()) {
+    auto ctrl = (Controls::Control &)element;
+    if (input.size() == 0) {
+      ctrl.Visibility(Visibility::Visible);
+    } else {
+      auto tag = ctrl.Tag();
+      std::wstring key = static_cast<std::wstring>(unbox_value<hstring>(tag));
+      bool not_found = key.find(input) == std::wstring::npos;
+      ctrl.Visibility(not_found ? Visibility::Collapsed : Visibility::Visible);
+    }
+  }
+}
+
 void BrowserPage::OnDevtoolsButtonClicked(IInspectable const &,
                                           RoutedEventArgs const &) {
-  auto toastTemplate = ToastTemplateType::ToastText01;
-  auto toastXml = ToastNotificationManager::GetTemplateContent(toastTemplate);
-  auto toastTextElements = toastXml.GetElementsByTagName(L"text");
-  std::wstring message;
-  if (mDevtoolsStatus == DevtoolsStatus::Stopped) {
-    message = L"Devtools server hasn't started";
-  } else if (mDevtoolsStatus == DevtoolsStatus::Running) {
-    message = L"DevTools server has started on port " +
-              std::to_wstring(mDevtoolsPort);
-  } else if (mDevtoolsStatus == DevtoolsStatus::Failed) {
-    message = L"Error: could not start DevTools";
+  if (toolbox().Visibility() == Visibility::Visible) {
+    prefList().Children().Clear();
+    toolbox().Visibility(Visibility::Collapsed);
+    return;
+  }
+
+  toolbox().Visibility(Visibility::Visible);
+
+  BuildPrefList();
+
+  // FIXME: we could use template + binding for this.
+  auto ok = mDevtoolsStatus == DevtoolsStatus::Running ? Visibility::Visible
+                                                       : Visibility::Collapsed;
+  auto ko = mDevtoolsStatus == DevtoolsStatus::Failed ? Visibility::Visible
+                                                      : Visibility::Collapsed;
+  auto wip = mDevtoolsStatus == DevtoolsStatus::Stopped ? Visibility::Visible
+                                                        : Visibility::Collapsed;
+  DevtoolsStatusOK().Visibility(ok);
+  DevtoolsStatusKO().Visibility(ko);
+  DevtoolsStatusWIP().Visibility(wip);
+  if (mDevtoolsStatus == DevtoolsStatus::Running) {
+    DevtoolsPort().Text(std::to_wstring(mDevtoolsPort));
   }
-  toastTextElements.Item(0).InnerText(message);
-  auto toast = ToastNotification(toastXml);
-  ToastNotificationManager::CreateToastNotifier().Show(toast);
 }
 
 void BrowserPage::OnURLEdited(IInspectable const &,
@@ -177,15 +309,13 @@ void BrowserPage::OnURLEdited(IInspectable const &,
   }
 }
 
-void BrowserPage::OnMediaControlsPlayClicked(
-    Windows::Foundation::IInspectable const &,
-    Windows::UI::Xaml::RoutedEventArgs const &) {
+void BrowserPage::OnMediaControlsPlayClicked(IInspectable const &,
+                                             RoutedEventArgs const &) {
   servoControl().SendMediaSessionAction(
       static_cast<int32_t>(servo::Servo::MediaSessionActionType::Play));
 }
-void BrowserPage::OnMediaControlsPauseClicked(
-    Windows::Foundation::IInspectable const &,
-    Windows::UI::Xaml::RoutedEventArgs const &) {
+void BrowserPage::OnMediaControlsPauseClicked(IInspectable const &,
+                                              RoutedEventArgs const &) {
   servoControl().SendMediaSessionAction(
       static_cast<int32_t>(servo::Servo::MediaSessionActionType::Pause));
 }

support/hololens/ServoApp/BrowserPage.h

@@ -9,6 +9,8 @@
 
 namespace winrt::ServoApp::implementation {
 
+using namespace winrt::Windows::Foundation;
+
 static const hstring SERVO_SCHEME = L"fxr";
 static const hstring SERVO_SCHEME_SLASH_SLASH = L"fxr://";
 
@@ -42,9 +44,14 @@ struct BrowserPage : BrowserPageT<BrowserPage> {
                                   Windows::UI::Xaml::RoutedEventArgs const &);
   void OnMediaControlsPauseClicked(Windows::Foundation::IInspectable const &,
                                    Windows::UI::Xaml::RoutedEventArgs const &);
+  void OnPrefererenceSearchboxEdited(
+      Windows::Foundation::IInspectable const &,
+      Windows::UI::Xaml::Input::KeyRoutedEventArgs const &);
 
 private:
+  void UpdatePref(ServoApp::Pref, Windows::UI::Xaml::Controls::Control);
   void BindServoEvents();
+  void BuildPrefList();
   DevtoolsStatus mDevtoolsStatus = DevtoolsStatus::Stopped;
   unsigned int mDevtoolsPort = 0;
 };

support/hololens/ServoApp/BrowserPage.xaml

@@ -6,7 +6,11 @@
     xmlns:local="using:ServoApp"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     mc:Ignorable="d">
+
+
+
     <Page.Resources>
         <Style x:Key="NavigationBarButton" TargetType="Button">
             <Setter Property="Background" Value="Transparent"/>
@@ -82,7 +86,9 @@
     <Grid VerticalAlignment="Stretch">
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
-            <RowDefinition Height="*"/>
+            <RowDefinition Height="*" MinHeight="200"/>
+            <RowDefinition Height="auto"/>
+            <RowDefinition Height="auto"/>
             <RowDefinition Height="auto"/>
         </Grid.RowDefinitions>
         <Grid Grid.Row="0" x:Name="navigationBar" Background="{ThemeResource InkToolbarButtonBackgroundThemeBrush}">
@@ -111,7 +117,7 @@
                     </Button.KeyboardAccelerators>
                 </Button>
                 <Button Style="{StaticResource NavigationBarButton}" x:Name="stopButton" IsTabStop="true" IsEnabled="false" Visibility="Collapsed" Click="OnStopButtonClicked" AutomationProperties.Name="Stop" ToolTipService.ToolTip="Stop">
-                    <Image Source="Assets/UI/stop.png" Height="18"></Image>
+                    <Image Source="Assets/UI/cross.png" Height="18"></Image>
                     <Button.KeyboardAccelerators>
                         <KeyboardAccelerator Key="Escape" Modifiers="None" />
                     </Button.KeyboardAccelerators>
@@ -132,9 +138,49 @@
                 <ProgressRing x:Name="urlbarLoadingIndicator" Margin="10,0"/>
             </StackPanel>
         </Grid>
-        <local:ServoControl TabIndex="0" x:Name="servoControl" Grid.Row="1"/>
-        <ProgressBar x:Name="transientLoadingIndicator" Visibility="Collapsed" Grid.Row="2"/>
-        <CommandBar Grid.Row="2" x:Name="mediaControls" Visibility="Collapsed">
+        <local:ServoControl Grid.Row="1" TabIndex="0" x:Name="servoControl"/>
+        <muxc:TabView x:Name="toolbox" IsAddTabButtonVisible="False" Grid.Row="2" Visibility="Collapsed" Height="300">
+            <muxc:TabView.TabStripFooter>
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+                    <Button Grid.Column="1" Style="{StaticResource NavigationBarButton}" x:Name="toolboxCloseButton" IsTabStop="true" Click="OnDevtoolsButtonClicked">
+                        <Image Source="Assets/UI/cross.png" Height="18"></Image>
+                    </Button>
+                </Grid>
+            </muxc:TabView.TabStripFooter>
+            <muxc:TabViewItem Header="Devtools Server" IsClosable="False">
+                <StackPanel>
+                    <TextBlock x:Name="DevtoolsStatusOK" Visibility="Collapsed" Margin="10">
+                        <Run>Devtools server is listening on port </Run>
+                        <Run FontWeight="Bold" x:Name="DevtoolsPort"></Run>
+                        <Run>.</Run>
+                    </TextBlock>
+                    <TextBlock x:Name="DevtoolsStatusKO" Visibility="Collapsed">
+                        <Run>Devtools server failed to start.</Run>
+                    </TextBlock>
+                    <TextBlock x:Name="DevtoolsStatusWIP" Visibility="Collapsed">
+                        <Run>Devtools server is starting..</Run>
+                    </TextBlock>
+                </StackPanel>
+            </muxc:TabViewItem>
+            <muxc:TabViewItem Header="Preferences" IsClosable="False">
+                <Grid VerticalAlignment="Stretch">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="auto"/>
+                        <RowDefinition Height="*"/>
+                    </Grid.RowDefinitions>
+                    <TextBox Grid.Row="0" Text="" IsTabStop="true" PlaceholderText="Search preferences" x:Name="preferenceSearchbox" VerticalAlignment="Center" KeyUp="OnPrefererenceSearchboxEdited" IsSpellCheckEnabled="False" Margin="3"/>
+                    <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
+                        <StackPanel x:Name="prefList"/>
+                    </ScrollViewer>
+                </Grid>
+            </muxc:TabViewItem>
+        </muxc:TabView>
+        <ProgressBar x:Name="transientLoadingIndicator" Visibility="Collapsed" Grid.Row="3"/>
+        <CommandBar Grid.Row="4" x:Name="mediaControls" Visibility="Collapsed">
             <AppBarButton Icon="Play" Label="Play" x:Name="playButton" Visibility="Collapsed" Click="OnMediaControlsPlayClicked"/>
             <AppBarButton Icon="Pause" Label="Pause" x:Name="pauseButton" Click="OnMediaControlsPauseClicked"/>
         </CommandBar>

support/hololens/ServoApp/ServoApp.vcxproj

@@ -907,7 +907,7 @@
     <Image Include="Assets\UI\forward.png" />
     <Image Include="Assets\UI\home.png" />
     <Image Include="Assets\UI\reload.png" />
-    <Image Include="Assets\UI\stop.png" />
+    <Image Include="Assets\UI\cross.png" />
     <Image Include="Assets\Wide310x150Logo.scale-100.png" />
     <Image Include="Assets\Wide310x150Logo.scale-200.png" />
     <Image Include="Assets\Wide310x150Logo.scale-400.png" />
@@ -948,6 +948,7 @@
     <Import Project="..\packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.targets" Condition="Exists('..\packages\Microsoft.Windows.CppWinRT.2.0.200316.3\build\native\Microsoft.Windows.CppWinRT.targets')" />
     <Import Project="..\packages\OpenXR.Loader.1.0.6.2\build\native\OpenXR.Loader.targets" Condition="Exists('..\packages\OpenXR.Loader.1.0.6.2\build\native\OpenXR.Loader.targets')" />
     <Import Project="..\packages\ANGLE.WindowsStore.Servo.2.1.19\build\native\ANGLE.WindowsStore.Servo.targets" Condition="Exists('..\packages\ANGLE.WindowsStore.Servo.2.1.19\build\native\ANGLE.WindowsStore.Servo.targets')" />
+    <Import Project="..\packages\Microsoft.UI.Xaml.2.4.2\build\native\Microsoft.UI.Xaml.targets" Condition="Exists('..\packages\Microsoft.UI.Xaml.2.4.2\build\native\Microsoft.UI.Xaml.targets')" />
   </ImportGroup>
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
     <PropertyGroup>
@@ -958,5 +959,6 @@
     <Error Condition="!Exists('..\packages\OpenXR.Loader.1.0.6.2\build\native\OpenXR.Loader.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\OpenXR.Loader.1.0.6.2\build\native\OpenXR.Loader.props'))" />
     <Error Condition="!Exists('..\packages\OpenXR.Loader.1.0.6.2\build\native\OpenXR.Loader.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\OpenXR.Loader.1.0.6.2\build\native\OpenXR.Loader.targets'))" />
     <Error Condition="!Exists('..\packages\ANGLE.WindowsStore.Servo.2.1.19\build\native\ANGLE.WindowsStore.Servo.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\ANGLE.WindowsStore.Servo.2.1.19\build\native\ANGLE.WindowsStore.Servo.targets'))" />
+    <Error Condition="!Exists('..\packages\Microsoft.UI.Xaml.2.4.2\build\native\Microsoft.UI.Xaml.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Microsoft.UI.Xaml.2.4.2\build\native\Microsoft.UI.Xaml.targets'))" />
   </Target>
-</Project>
+</Project>

support/hololens/ServoApp/ServoApp.vcxproj.filters

@@ -148,7 +148,7 @@
     <Image Include="Assets\UI\reload.png">
       <Filter>Assets\UI</Filter>
     </Image>
-    <Image Include="Assets\UI\stop.png">
+    <Image Include="Assets\UI\cross.png">
       <Filter>Assets\UI</Filter>
     </Image>
     <Image Include="Assets\UI\home.png">
@@ -901,4 +901,4 @@
   <ItemGroup>
     <ApplicationDefinition Include="App.xaml" />
   </ItemGroup>
-</Project>
+</Project>