UWP: use a listview to build the console

support/hololens/ServoApp/BrowserPage.cpp

@@ -6,6 +6,7 @@
 #include "strutils.h"
 #include "BrowserPage.h"
 #include "BrowserPage.g.cpp"
+#include "ConsoleLog.g.cpp"
 #include "DefaultUrl.h"
 #include "Devtools/Client.h"
 
@@ -26,6 +27,7 @@ namespace winrt::ServoApp::implementation {
 BrowserPage::BrowserPage() {
   InitializeComponent();
   BindServoEvents();
+  mLogs = winrt::single_threaded_observable_vector<IInspectable>();
 }
 
 void BrowserPage::BindServoEvents() {
@@ -274,39 +276,22 @@ void BrowserPage::OnPrefererenceSearchboxEdited(
 }
 
 void BrowserPage::ClearConsole() {
-  Dispatcher().RunAsync(CoreDispatcherPriority::Low,
-                        [=] { DevtoolsConsoleOutput().Blocks().Clear(); });
+  Dispatcher().RunAsync(CoreDispatcherPriority::High, [=] { mLogs.Clear(); });
 }
 
 void BrowserPage::OnDevtoolsMessage(DevtoolsMessageLevel level, hstring source,
                                     hstring body) {
-  Dispatcher().RunAsync(CoreDispatcherPriority::Low, [=] {
-    // Temporary text-based logs. Should use gridview.
-    auto paragraph = Documents::Paragraph();
-
-    auto run1 = Documents::Run();
-    if (level == DevtoolsMessageLevel::Warn) {
-      run1.Text(L"warn: ");
-    } else if (level == DevtoolsMessageLevel::Error) {
-      run1.Text(L"error: ");
-    } else if (level == DevtoolsMessageLevel::None) {
-      run1.Text(L"");
+  Dispatcher().RunAsync(CoreDispatcherPriority::High, [=] {
+    auto fgColor = UI::Colors::White();
+    auto bgColor = UI::Colors::White();
+    if (level == servo::DevtoolsMessageLevel::Error) {
+      fgColor = UI::Colors::Red();
+      bgColor = UI::Colors::LightPink();
+    } else if (level == servo::DevtoolsMessageLevel::Warn) {
+      fgColor = UI::Colors::Orange();
+      bgColor = UI::Colors::LightYellow();
     }
-    paragraph.Inlines().Append(run1);
-
-    auto run2 = Documents::Run();
-    run2.Text(body);
-    paragraph.Inlines().Append(run2);
-
-    auto run3 = Documents::Run();
-    run3.Text(L" " + source);
-    paragraph.Inlines().Append(run3);
-
-    DevtoolsConsoleOutput().Blocks().Append(paragraph);
-
-    // Scroll to last message
-    auto offset = DevtoolsConsoleScrollViewer().ExtentHeight();
-    DevtoolsConsoleScrollViewer().ChangeView(nullptr, offset, nullptr);
+    mLogs.Append(make<ConsoleLog>(fgColor, bgColor, body, source));
   });
 }
 
@@ -317,7 +302,7 @@ void BrowserPage::OnDevtoolsButtonClicked(IInspectable const &,
   if (toolbox().Visibility() == Visibility::Visible) {
     prefList().Children().Clear();
     toolbox().Visibility(Visibility::Collapsed);
-    DevtoolsConsoleOutput().Blocks().Clear();
+    ClearConsole();
     if (mDevtoolsClient != nullptr) {
       mDevtoolsClient->Stop();
     }

support/hololens/ServoApp/BrowserPage.h

@@ -5,6 +5,7 @@
 #pragma once
 
 #include "BrowserPage.g.h"
+#include "ConsoleLog.g.h"
 #include "ServoControl/ServoControl.h"
 #include "Devtools/Client.h"
 
@@ -14,6 +15,7 @@ using namespace winrt::Windows;
 using namespace winrt::Windows::Data::Json;
 using namespace winrt::Windows::Foundation;
 using namespace winrt::Windows::UI::Xaml;
+using namespace winrt::Windows::UI::Xaml::Media;
 
 static const hstring SERVO_SCHEME = L"fxr";
 static const hstring SERVO_SCHEME_SLASH_SLASH = L"fxr://";
@@ -46,6 +48,7 @@ public:
   void OnDevtoolsMessage(servo::DevtoolsMessageLevel, hstring, hstring);
   void ClearConsole();
   void OnDevtoolsDetached();
+  Collections::IObservableVector<IInspectable> ConsoleLogs() { return mLogs; };
 
 private:
   void UpdatePref(ServoApp::Pref, Controls::Control);
@@ -54,9 +57,31 @@ private:
   DevtoolsStatus mDevtoolsStatus = DevtoolsStatus::Stopped;
   unsigned int mDevtoolsPort = 0;
   std::unique_ptr<servo::DevtoolsClient> mDevtoolsClient;
+  Collections::IObservableVector<IInspectable> mLogs;
 };
+
+struct ConsoleLog : ConsoleLogT<ConsoleLog> {
+public:
+  ConsoleLog(Windows::UI::Color fg, Windows::UI::Color bg, hstring b, hstring s)
+      : mSource(s), mBody(b) {
+    mFgColor = UI::Xaml::Media::SolidColorBrush(fg);
+    mBgColor = UI::Xaml::Media::SolidColorBrush(bg);
+  };
+  SolidColorBrush FgColor() { return mFgColor; };
+  SolidColorBrush BgColor() { return mBgColor; };
+  hstring Source() { return mSource; };
+  hstring Body() { return mBody; };
+
+private:
+  SolidColorBrush mFgColor;
+  SolidColorBrush mBgColor;
+  hstring mSource;
+  hstring mBody;
+};
+
 } // namespace winrt::ServoApp::implementation
 
 namespace winrt::ServoApp::factory_implementation {
 struct BrowserPage : BrowserPageT<BrowserPage, implementation::BrowserPage> {};
+struct ConsoleLog : ConsoleLogT<ConsoleLog, implementation::ConsoleLog> {};
 } // namespace winrt::ServoApp::factory_implementation

support/hololens/ServoApp/BrowserPage.idl

@@ -4,5 +4,15 @@ namespace ServoApp
     runtimeclass BrowserPage : Windows.UI.Xaml.Controls.Page
     {
         BrowserPage();
+        Windows.Foundation.Collections.IObservableVector<IInspectable> ConsoleLogs{ get; };
+    }
+
+    runtimeclass ConsoleLog
+    {
+        ConsoleLog(Windows.UI.Color fgColor, Windows.UI.Color bgColor, String body, String source);
+        Windows.UI.Xaml.Media.SolidColorBrush FgColor { get; };
+        Windows.UI.Xaml.Media.SolidColorBrush BgColor { get; };
+        String Body{ get; };
+        String Source{ get; };
     }
 }

support/hololens/ServoApp/BrowserPage.xaml

@@ -150,10 +150,34 @@
                 </Grid>
             </muxc:TabView.TabStripFooter>
             <muxc:TabViewItem x:Uid="devtoolsTabConsole" IsClosable="False">
-                <ScrollViewer x:Name="DevtoolsConsoleScrollViewer" VerticalScrollMode="Enabled" HorizontalScrollMode="Enabled">
-                    <RichTextBlock x:Name="DevtoolsConsoleOutput" FontSize="10" FontFamily="Consolas" LineHeight="14">
-                    </RichTextBlock>
-                </ScrollViewer>
+                <ListView ItemsSource="{x:Bind ConsoleLogs}">
+                    <ListView.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <ItemsStackPanel Orientation="Vertical" ItemsUpdatingScrollMode="KeepLastItemInView"/>
+                        </ItemsPanelTemplate>
+                    </ListView.ItemsPanel>
+                    <ListView.ItemTemplate>
+                        <DataTemplate x:DataType="local:ConsoleLog">
+                            <Grid Background="{x:Bind BgColor}" Padding="2">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+                                <Ellipse Width="8" Height="8" Fill="{x:Bind FgColor}" Grid.Column="0" Margin="10,0"/>
+                                <TextBlock FontSize="12" Text="{x:Bind Body}"  Grid.Column="1"/>
+                                <TextBlock FontSize="12" Text="{x:Bind Source}" Foreground="Gray" Grid.Column="2" Margin="10,0"/>
+                            </Grid>
+                        </DataTemplate>
+                    </ListView.ItemTemplate>
+                    <ListView.ItemContainerStyle>
+                        <Style TargetType="ListViewItem">
+                            <Setter Property="Padding" Value="0"/>
+                            <Setter Property="MinHeight" Value="0"/>
+                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+                        </Style>
+                    </ListView.ItemContainerStyle>
+                </ListView>
             </muxc:TabViewItem>
             <muxc:TabViewItem x:Uid="devtoolsTabServer" IsClosable="False">
                 <TextBlock x:Name="DevtoolsStatusMessage" Margin="10"></TextBlock>

support/hololens/ServoApp/pch.h

@@ -54,8 +54,10 @@
 #include <winrt/Windows.UI.Xaml.Documents.h>
 #include <winrt/Windows.UI.Xaml.Input.h>
 #include <winrt/Windows.UI.Xaml.Interop.h>
+#include <winrt/Windows.UI.Xaml.Media.h>
 #include <winrt/Windows.UI.Xaml.Markup.h>
 #include <winrt/Windows.UI.Xaml.Navigation.h>
+#include <winrt/Windows.UI.Xaml.Shapes.h>
 #include <winrt/Windows.UI.Notifications.h>
 #include <winrt/Windows.UI.Text.h>
 #include <winrt/Windows.Data.Xml.Dom.h>