Auto merge of #27107 - paulrouget:darktheme, r=jdm

UWP: Dark theme support

Removed hard coded colors and replaced icons with builtin icon font.
Fix #27058

12 files changed, 31 insertions, 59 deletions

diff --git a/support/hololens/ServoApp/Assets/UI/back.png b/support/hololens/ServoApp/Assets/UI/back.png
deleted file mode 100644
index f22e1abfd2d..00000000000
--- a/support/hololens/ServoApp/Assets/UI/back.png
+++ /dev/null
diff --git a/support/hololens/ServoApp/Assets/UI/cross.png b/support/hololens/ServoApp/Assets/UI/cross.png
deleted file mode 100644
index 181ede7b298..00000000000
--- a/support/hololens/ServoApp/Assets/UI/cross.png
+++ /dev/null
diff --git a/support/hololens/ServoApp/Assets/UI/devtools.png b/support/hololens/ServoApp/Assets/UI/devtools.png
deleted file mode 100644
index e26f69b7887..00000000000
--- a/support/hololens/ServoApp/Assets/UI/devtools.png
+++ /dev/null
diff --git a/support/hololens/ServoApp/Assets/UI/forward.png b/support/hololens/ServoApp/Assets/UI/forward.png
deleted file mode 100644
index de953a75f22..00000000000
--- a/support/hololens/ServoApp/Assets/UI/forward.png
+++ /dev/null
diff --git a/support/hololens/ServoApp/Assets/UI/home.png b/support/hololens/ServoApp/Assets/UI/home.png
deleted file mode 100644
index 9d7ce16571b..00000000000
--- a/support/hololens/ServoApp/Assets/UI/home.png
+++ /dev/null
diff --git a/support/hololens/ServoApp/Assets/UI/reload.png b/support/hololens/ServoApp/Assets/UI/reload.png
deleted file mode 100644
index 374a66a57a7..00000000000
--- a/support/hololens/ServoApp/Assets/UI/reload.png
+++ /dev/null
diff --git a/support/hololens/ServoApp/BrowserPage.cpp b/support/hololens/ServoApp/BrowserPage.cpp
index 5c129a2bf76..6f6bb5a98b5 100644
--- a/support/hololens/ServoApp/BrowserPage.cpp
+++ b/support/hololens/ServoApp/BrowserPage.cpp
@@ -282,16 +282,16 @@ void BrowserPage::ClearConsole() {
 void BrowserPage::OnDevtoolsMessage(DevtoolsMessageLevel level, hstring source,
                                     hstring body) {
   Dispatcher().RunAsync(CoreDispatcherPriority::High, [=] {
-    auto dotColor = UI::Colors::Transparent();
-    auto bgColor = UI::Colors::Transparent();
+    auto glyphColor = UI::Colors::Transparent();
+    auto glyph = L"";
     if (level == servo::DevtoolsMessageLevel::Error) {
-      dotColor = UI::Colors::Red();
-      bgColor = UI::Colors::LightPink();
+      glyphColor = UI::Colors::Red();
+      glyph = L"\xEA39"; // ErrorBadge
     } else if (level == servo::DevtoolsMessageLevel::Warn) {
-      dotColor = UI::Colors::Orange();
-      bgColor = UI::Colors::LightYellow();
+      glyphColor = UI::Colors::Orange();
+      glyph = L"\xE7BA"; // Warning
     }
-    mLogs.Append(make<ConsoleLog>(dotColor, bgColor, body, source));
+    mLogs.Append(make<ConsoleLog>(glyphColor, glyph, body, source));
   });
 }
 
diff --git a/support/hololens/ServoApp/BrowserPage.h b/support/hololens/ServoApp/BrowserPage.h
index 05091ef6604..bd575e55739 100644
--- a/support/hololens/ServoApp/BrowserPage.h
+++ b/support/hololens/ServoApp/BrowserPage.h
@@ -64,20 +64,18 @@ private:
 
 struct ConsoleLog : ConsoleLogT<ConsoleLog> {
 public:
-  ConsoleLog(Windows::UI::Color dot, Windows::UI::Color bg, hstring b,
-             hstring s)
-      : mSource(s), mBody(b) {
-    mDotColor = UI::Xaml::Media::SolidColorBrush(dot);
-    mBgColor = UI::Xaml::Media::SolidColorBrush(bg);
+  ConsoleLog(Windows::UI::Color glyph, hstring g, hstring b, hstring s)
+      : mGlyph(g), mSource(s), mBody(b) {
+    mGlyphColor = UI::Xaml::Media::SolidColorBrush(glyph);
   };
-  SolidColorBrush DotColor() { return mDotColor; };
-  SolidColorBrush BgColor() { return mBgColor; };
+  SolidColorBrush GlyphColor() { return mGlyphColor; };
+  hstring Glyph() { return mGlyph; };
   hstring Source() { return mSource; };
   hstring Body() { return mBody; };
 
 private:
-  SolidColorBrush mDotColor;
-  SolidColorBrush mBgColor;
+  SolidColorBrush mGlyphColor;
+  hstring mGlyph;
   hstring mSource;
   hstring mBody;
 };
diff --git a/support/hololens/ServoApp/BrowserPage.idl b/support/hololens/ServoApp/BrowserPage.idl
index 64d646b36e9..107724b1616 100644
--- a/support/hololens/ServoApp/BrowserPage.idl
+++ b/support/hololens/ServoApp/BrowserPage.idl
@@ -9,9 +9,9 @@ namespace ServoApp
 
     runtimeclass ConsoleLog
     {
-        ConsoleLog(Windows.UI.Color dotColor, Windows.UI.Color bgColor, String body, String source);
-        Windows.UI.Xaml.Media.SolidColorBrush DotColor { get; };
-        Windows.UI.Xaml.Media.SolidColorBrush BgColor { get; };
+        ConsoleLog(Windows.UI.Color glyphColor, String glyph, String body, String source);
+        Windows.UI.Xaml.Media.SolidColorBrush GlyphColor{ get; };
+        String Glyph{ get; };
         String Body{ get; };
         String Source{ get; };
     }
diff --git a/support/hololens/ServoApp/BrowserPage.xaml b/support/hololens/ServoApp/BrowserPage.xaml
index 0f5a6bc06c4..45f26080c04 100644
--- a/support/hololens/ServoApp/BrowserPage.xaml
+++ b/support/hololens/ServoApp/BrowserPage.xaml
@@ -97,31 +97,31 @@
             </Grid.ColumnDefinitions>
             <StackPanel Orientation="Horizontal" Grid.Column="0">
                 <Button Style="{StaticResource NavigationBarButton}" x:Uid="backButton" x:Name="backButton" IsTabStop="true" IsEnabled="false" Click="OnBackButtonClicked">
-                    <Image Source="Assets/UI/back.png" Height="18"></Image>
+                    <SymbolIcon Symbol="Back"/>
                     <Button.KeyboardAccelerators>
                         <KeyboardAccelerator Key="Left" Modifiers="Menu" />
                     </Button.KeyboardAccelerators>
                 </Button>
                 <Button Style="{StaticResource NavigationBarButton}" x:Uid="forwardButton" x:Name="forwardButton" IsTabStop="true" IsEnabled="false" Click="OnForwardButtonClicked">
-                    <Image Source="Assets/UI/forward.png" Height="18"></Image>
+                    <SymbolIcon Symbol="Forward"/>
                     <Button.KeyboardAccelerators>
                         <KeyboardAccelerator Key="Right" Modifiers="Menu" />
                     </Button.KeyboardAccelerators>
                 </Button>
                 <Button Style="{StaticResource NavigationBarButton}" x:Name="reloadButton" x:Uid="reloadButton" IsTabStop="true" IsEnabled="false" Visibility="Visible" Click="OnReloadButtonClicked">
-                    <Image Source="Assets/UI/reload.png" Height="18"></Image>
+                    <SymbolIcon Symbol="Refresh"/>
                     <Button.KeyboardAccelerators>
                         <KeyboardAccelerator Key="R" Modifiers="Control" />
                     </Button.KeyboardAccelerators>
                 </Button>
                 <Button Style="{StaticResource NavigationBarButton}" x:Name="stopButton" x:Uid="stopButton" IsTabStop="true" IsEnabled="false" Visibility="Collapsed" Click="OnStopButtonClicked">
-                    <Image Source="Assets/UI/cross.png" Height="18"></Image>
+                    <SymbolIcon Symbol="Cancel"/>
                     <Button.KeyboardAccelerators>
                         <KeyboardAccelerator Key="Escape" Modifiers="None" />
                     </Button.KeyboardAccelerators>
                 </Button>
                 <Button Style="{StaticResource NavigationBarButton}" x:Name="homeButton" x:Uid="homeButton" IsTabStop="true" Click="OnHomeButtonClicked">
-                    <Image Source="Assets/UI/home.png" Height="18"></Image>
+                    <SymbolIcon Symbol="Home"/>
                 </Button>
             </StackPanel>
             <TextBox x:Uid="urlTextbox" Text="" IsTabStop="true" InputScope="Url" x:Name="urlTextbox" VerticalAlignment="Center" Grid.Column="1" KeyUp="OnURLEdited" IsSpellCheckEnabled="False" Margin="3,0" KeyboardAcceleratorPlacementMode="Hidden">
@@ -131,7 +131,8 @@
             </TextBox>
             <StackPanel Orientation="Horizontal" Grid.Column="2">
                 <Button Style="{StaticResource NavigationBarButton}" x:Name="devtoolsButton" IsEnabled="false" x:Uid="devtoolsButton" IsTabStop="true" Click="OnDevtoolsButtonClicked">
-                    <Image Source="Assets/UI/devtools.png" Height="18"></Image>
+                    <!-- EC7A is the "DeveloperTools" symbol, not exported in the symbol list for some reason -->
+                    <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xEC7A;"/>
                 </Button>
                 <ProgressRing x:Name="urlbarLoadingIndicator" Margin="10,0"/>
             </StackPanel>
@@ -145,7 +146,7 @@
                         <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>
+                        <SymbolIcon Symbol="Cancel"/>
                     </Button>
                 </Grid>
             </muxc:TabView.TabStripFooter>
@@ -155,7 +156,7 @@
                         <RowDefinition Height="*"/>
                         <RowDefinition Height="Auto"/>
                     </Grid.RowDefinitions>
-                    <ListView ItemsSource="{x:Bind ConsoleLogs}" Background="White">
+                    <ListView ItemsSource="{x:Bind ConsoleLogs}">
                         <ListView.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <ItemsStackPanel Orientation="Vertical" ItemsUpdatingScrollMode="KeepLastItemInView"/>
@@ -163,15 +164,15 @@
                         </ListView.ItemsPanel>
                         <ListView.ItemTemplate>
                             <DataTemplate x:DataType="local:ConsoleLog">
-                                <Grid Background="{x:Bind BgColor}" Padding="2">
+                                <Grid Padding="2">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="Auto"/>
                                         <ColumnDefinition Width="*"/>
                                         <ColumnDefinition Width="Auto"/>
                                     </Grid.ColumnDefinitions>
-                                    <Ellipse Width="8" Height="8" Fill="{x:Bind DotColor}" Grid.Column="0" Margin="10,0"/>
-                                    <TextBlock FontFamily="Consolas" FontSize="12" Text="{x:Bind Body}" Foreground="Black" Grid.Column="1"/>
-                                    <TextBlock FontFamily="Consolas" FontSize="12" Text="{x:Bind Source}" Foreground="Gray" Grid.Column="2" Margin="10,0"/>
+                                    <FontIcon FontSize="12" FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="{x:Bind Glyph}" Foreground="{x:Bind GlyphColor}" Grid.Column="0" MinWidth="22"/>
+                                    <TextBlock FontFamily="Consolas" FontSize="12" Text="{x:Bind Body}" Grid.Column="1"/>
+                                    <TextBlock FontFamily="Consolas" FontSize="12" Text="{x:Bind Source}" Grid.Column="2" Margin="10,0"  Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource SystemBaseMediumColor}"/>
                                 </Grid>
                             </DataTemplate>
                         </ListView.ItemTemplate>
diff --git a/support/hololens/ServoApp/ServoApp.vcxproj b/support/hololens/ServoApp/ServoApp.vcxproj
index 0d819c3fffc..3943c35dcc2 100644
--- a/support/hololens/ServoApp/ServoApp.vcxproj
+++ b/support/hololens/ServoApp/ServoApp.vcxproj
@@ -903,12 +903,6 @@
     <Image Include="Assets\StoreLogo.scale-100.png" />
     <Image Include="Assets\StoreLogo.scale-200.png" />
     <Image Include="Assets\StoreLogo.scale-400.png" />
-    <Image Include="Assets\UI\back.png" />
-    <Image Include="Assets\UI\devtools.png" />
-    <Image Include="Assets\UI\forward.png" />
-    <Image Include="Assets\UI\home.png" />
-    <Image Include="Assets\UI\reload.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" />
@@ -966,4 +960,4 @@
     <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>
\ No newline at end of file
+</Project>
diff --git a/support/hololens/ServoApp/ServoApp.vcxproj.filters b/support/hololens/ServoApp/ServoApp.vcxproj.filters
index 4bb5ad598a7..d5a81928a8d 100644
--- a/support/hololens/ServoApp/ServoApp.vcxproj.filters
+++ b/support/hololens/ServoApp/ServoApp.vcxproj.filters
@@ -144,24 +144,6 @@
     <Image Include="Assets\Square44x44Logo.altform-unplated_targetsize-256.png">
       <Filter>Assets</Filter>
     </Image>
-    <Image Include="Assets\UI\back.png">
-      <Filter>Assets\UI</Filter>
-    </Image>
-    <Image Include="Assets\UI\forward.png">
-      <Filter>Assets\UI</Filter>
-    </Image>
-    <Image Include="Assets\UI\reload.png">
-      <Filter>Assets\UI</Filter>
-    </Image>
-    <Image Include="Assets\UI\cross.png">
-      <Filter>Assets\UI</Filter>
-    </Image>
-    <Image Include="Assets\UI\home.png">
-      <Filter>Assets\UI</Filter>
-    </Image>
-    <Image Include="Assets\UI\devtools.png">
-      <Filter>Assets\UI</Filter>
-    </Image>
   </ItemGroup>
   <ItemGroup>
     <AppxManifest Include="Package.appxmanifest" />
@@ -890,9 +872,6 @@
     <Filter Include="ServoControl">
       <UniqueIdentifier>{d21a959c-19d1-4a54-b942-692c27e5b3a6}</UniqueIdentifier>
     </Filter>
-    <Filter Include="Assets\UI">
-      <UniqueIdentifier>{d49fe329-5e22-4470-8310-5b925419e6f8}</UniqueIdentifier>
-    </Filter>
     <Filter Include="Strings">
       <UniqueIdentifier>{49e23631-d899-4caf-bf7b-30776fee4d09}</UniqueIdentifier>
     </Filter>