Allow creating and editing unfocused appearances in the SUI (#10317)

## Summary of the Pull Request
Adds unfocused appearance creation/configuration in the SUI

There is now an 'Unfocused Appearance' section at the bottom of the 'Appearance' tab in a profile. There is a '+' button to create an unfocused appearance if one does not exist, or a delete button to delete the unfocused appearance if one exists (only one of these buttons is visible at a time). 

## PR Checklist
* [ ] Closes #xxx
* [x] CLA signed. If not, go over [here](https://cla.opensource.microsoft.com/microsoft/Terminal) and sign the CLA
* [ ] Tests added/passed
* [ ] Documentation updated. If checked, please file a pull request on [our docs repo](https://github.com/MicrosoftDocs/terminal) and link it here: #xxx
* [ ] Schema updated.
* [x] I work here

## Validation Steps Performed
![unfocusedSUI](https://user-images.githubusercontent.com/26824113/125523613-48aefe28-b4cf-46a2-91c9-2ba3ea89e071.gif)

src/cascadia/TerminalSettingsEditor/Appearances.cpp

@@ -257,6 +257,20 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                     _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"UsingMonospaceFont" });
                 }
             });
+
+            // make sure to send all the property changed events once here
+            // we do this in the case an old appearance was deleted and then a new one is created,
+            // the old settings need to be updated in xaml
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentCursorShape" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"IsVintageCursor" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentColorScheme" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentBackgroundImageStretchMode" });
+            _UpdateBIAlignmentControl(static_cast<int32_t>(Appearance().BackgroundImageAlignment()));
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentFontWeight" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"IsCustomFontWeight" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"CurrentFontFace" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"ShowAllFonts" });
+            _PropertyChangedHandlers(*this, PropertyChangedEventArgs{ L"UsingMonospaceFont" });
         }
     }
 

src/cascadia/TerminalSettingsEditor/Appearances.h

@@ -59,6 +59,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> Schemes() { return _Schemes; }
         void Schemes(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& val) { _Schemes = val; }
 
+        WINRT_PROPERTY(bool, IsDefault, false);
         WINRT_PROPERTY(IHostedInWindow, WindowRoot, nullptr);
 
         // These settings are not defined in AppearanceConfig, so we grab them

src/cascadia/TerminalSettingsEditor/Appearances.idl

@@ -21,6 +21,8 @@ namespace Microsoft.Terminal.Settings.Editor
 
     runtimeclass AppearanceViewModel : Windows.UI.Xaml.Data.INotifyPropertyChanged
     {
+        Boolean IsDefault;
+
         Boolean UseDesktopBGImage;
         Boolean BackgroundImageSettingsVisible { get; };
 

src/cascadia/TerminalSettingsEditor/Appearances.xaml

@@ -74,7 +74,8 @@
             <local:SettingContainer x:Uid="Profile_FontFace"
                                     ClearSettingValue="{x:Bind Appearance.ClearFontFace}"
                                     HasSettingValue="{x:Bind Appearance.HasFontFace, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.FontFaceOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.FontFaceOverrideSource, Mode=OneWay}"
+                                    Visibility="{x:Bind Appearance.IsDefault, Mode=OneWay}">
                 <StackPanel>
                     <!--
                         Binding the ItemsSource to a separate variable that switches between the
@@ -104,7 +105,8 @@
             <local:SettingContainer x:Uid="Profile_FontSize"
                                     ClearSettingValue="{x:Bind Appearance.ClearFontSize}"
                                     HasSettingValue="{x:Bind Appearance.HasFontSize, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.FontSizeOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.FontSizeOverrideSource, Mode=OneWay}"
+                                    Visibility="{x:Bind Appearance.IsDefault, Mode=OneWay}">
                 <muxc:NumberBox AcceptsExpression="False"
                                 LargeChange="10"
                                 Maximum="128"
@@ -119,7 +121,8 @@
                                     x:Uid="Profile_FontWeight"
                                     ClearSettingValue="{x:Bind Appearance.ClearFontWeight}"
                                     HasSettingValue="{x:Bind Appearance.HasFontWeight, Mode=OneWay}"
-                                    SettingOverrideSource="{x:Bind Appearance.FontWeightOverrideSource, Mode=OneWay}">
+                                    SettingOverrideSource="{x:Bind Appearance.FontWeightOverrideSource, Mode=OneWay}"
+                                    Visibility="{x:Bind Appearance.IsDefault, Mode=OneWay}">
                 <StackPanel>
                     <ComboBox x:Name="FontWeightComboBox"
                               ItemTemplate="{StaticResource EnumComboBoxItemTemplate}"

src/cascadia/TerminalSettingsEditor/Profiles.cpp

@@ -32,7 +32,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _profile{ profile },
         _defaultAppearanceViewModel{ winrt::make<implementation::AppearanceViewModel>(profile.DefaultAppearance().try_as<AppearanceConfig>()) },
         _originalProfileGuid{ profile.Guid() },
-        _appSettings{ appSettings }
+        _appSettings{ appSettings },
+        _unfocusedAppearanceViewModel{ nullptr }
     {
         // Add a property changed handler to our own property changed event.
         // This propagates changes from the settings model to anybody listening to our
@@ -63,6 +64,13 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         {
             UpdateFontList();
         }
+
+        if (profile.HasUnfocusedAppearance())
+        {
+            _unfocusedAppearanceViewModel = winrt::make<implementation::AppearanceViewModel>(profile.UnfocusedAppearance().try_as<AppearanceConfig>());
+        }
+
+        _defaultAppearanceViewModel.IsDefault(true);
     }
 
     Model::TerminalSettings ProfileViewModel::TermSettings() const
@@ -239,6 +247,51 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         return _defaultAppearanceViewModel;
     }
 
+    bool ProfileViewModel::HasUnfocusedAppearance()
+    {
+        return _profile.HasUnfocusedAppearance();
+    }
+
+    bool ProfileViewModel::EditableUnfocusedAppearance()
+    {
+        if constexpr (Feature_EditableUnfocusedAppearance::IsEnabled())
+        {
+            return true;
+        }
+        return false;
+    }
+
+    bool ProfileViewModel::ShowUnfocusedAppearance()
+    {
+        return EditableUnfocusedAppearance() && HasUnfocusedAppearance();
+    }
+
+    void ProfileViewModel::CreateUnfocusedAppearance(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& schemes,
+                                                     const IHostedInWindow& windowRoot)
+    {
+        _profile.CreateUnfocusedAppearance();
+
+        _unfocusedAppearanceViewModel = winrt::make<implementation::AppearanceViewModel>(_profile.UnfocusedAppearance().try_as<AppearanceConfig>());
+        _unfocusedAppearanceViewModel.Schemes(schemes);
+        _unfocusedAppearanceViewModel.WindowRoot(windowRoot);
+
+        _NotifyChanges(L"UnfocusedAppearance", L"HasUnfocusedAppearance");
+    }
+
+    void ProfileViewModel::DeleteUnfocusedAppearance()
+    {
+        _profile.DeleteUnfocusedAppearance();
+
+        _unfocusedAppearanceViewModel = nullptr;
+
+        _NotifyChanges(L"HasUnfocusedAppearance");
+    }
+
+    Editor::AppearanceViewModel ProfileViewModel::UnfocusedAppearance()
+    {
+        return _unfocusedAppearanceViewModel;
+    }
+
     bool ProfileViewModel::UseParentProcessDirectory()
     {
         return StartingDirectory().empty();
@@ -291,6 +344,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         _DeleteProfileHandlers(*this, *deleteProfileArgs);
     }
 
+    void ProfilePageNavigationState::CreateUnfocusedAppearance()
+    {
+        _Profile.CreateUnfocusedAppearance(_Schemes, _WindowRoot);
+    }
+
+    void ProfilePageNavigationState::DeleteUnfocusedAppearance()
+    {
+        _Profile.DeleteUnfocusedAppearance();
+    }
+
     Profiles::Profiles() :
         _previewControl{ Control::TermControl(Model::TerminalSettings{}, make<PreviewConnection>()) }
     {
@@ -423,6 +486,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         state->DeleteProfile();
     }
 
+    void Profiles::CreateUnfocusedAppearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
+    {
+        _State.CreateUnfocusedAppearance();
+    }
+
+    void Profiles::DeleteUnfocusedAppearance_Click(IInspectable const& /*sender*/, RoutedEventArgs const& /*e*/)
+    {
+        _State.DeleteUnfocusedAppearance();
+    }
+
     fire_and_forget Profiles::Icon_Click(IInspectable const&, RoutedEventArgs const&)
     {
         auto lifetime = get_strong();

src/cascadia/TerminalSettingsEditor/Profiles.h

@@ -34,6 +34,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         winrt::guid OriginalProfileGuid() const noexcept;
         bool CanDeleteProfile() const;
         Editor::AppearanceViewModel DefaultAppearance();
+        Editor::AppearanceViewModel UnfocusedAppearance();
+        bool HasUnfocusedAppearance();
+        bool EditableUnfocusedAppearance();
+        bool ShowUnfocusedAppearance();
+
+        void CreateUnfocusedAppearance(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& schemes,
+                                       const IHostedInWindow& windowRoot);
+        void DeleteUnfocusedAppearance();
+
         WINRT_PROPERTY(bool, IsBaseLayer, false);
 
         PERMANENT_OBSERVABLE_PROJECTED_SETTING(_profile, Guid);
@@ -77,6 +86,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         static Editor::Font _GetFont(com_ptr<IDWriteLocalizedStrings> localizedFamilyNames);
 
         Model::CascadiaSettings _appSettings;
+        Editor::AppearanceViewModel _unfocusedAppearanceViewModel;
     };
 
     struct DeleteProfileEventArgs :
@@ -100,6 +110,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                                    const Editor::ProfilePageNavigationState& lastState,
                                    const IHostedInWindow& windowRoot) :
             _Profile{ viewModel },
+            _Schemes{ schemes },
             _WindowRoot{ windowRoot }
         {
             // If there was a previous nav state copy the selected pivot from it.
@@ -109,14 +120,27 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             }
             viewModel.DefaultAppearance().Schemes(schemes);
             viewModel.DefaultAppearance().WindowRoot(windowRoot);
+
+            if (viewModel.UnfocusedAppearance())
+            {
+                viewModel.UnfocusedAppearance().Schemes(schemes);
+                viewModel.UnfocusedAppearance().WindowRoot(windowRoot);
+            }
         }
 
         void DeleteProfile();
+        void CreateUnfocusedAppearance();
+        void DeleteUnfocusedAppearance();
 
+        Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> Schemes() { return _Schemes; }
+        void Schemes(const Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme>& val) { _Schemes = val; }
         TYPED_EVENT(DeleteProfile, Editor::ProfilePageNavigationState, Editor::DeleteProfileEventArgs);
         WINRT_PROPERTY(IHostedInWindow, WindowRoot, nullptr);
         WINRT_PROPERTY(Editor::ProfilesPivots, LastActivePivot, Editor::ProfilesPivots::General);
         WINRT_PROPERTY(Editor::ProfileViewModel, Profile, nullptr);
+
+    private:
+        Windows::Foundation::Collections::IMapView<hstring, Model::ColorScheme> _Schemes;
     };
 
     struct Profiles : ProfilesT<Profiles>
@@ -138,6 +162,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         fire_and_forget Icon_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
         void DeleteConfirmation_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
         void Pivot_SelectionChanged(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        void CreateUnfocusedAppearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
+        void DeleteUnfocusedAppearance_Click(Windows::Foundation::IInspectable const& sender, Windows::UI::Xaml::RoutedEventArgs const& e);
 
         WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
 

src/cascadia/TerminalSettingsEditor/Profiles.idl

@@ -25,6 +25,13 @@ namespace Microsoft.Terminal.Settings.Editor
         Boolean UseCustomStartingDirectory { get; };
         AppearanceViewModel DefaultAppearance { get; };
         Guid OriginalProfileGuid { get; };
+        Boolean HasUnfocusedAppearance { get; };
+        Boolean EditableUnfocusedAppearance { get; };
+        Boolean ShowUnfocusedAppearance { get; };
+        AppearanceViewModel UnfocusedAppearance { get; };
+
+        void CreateUnfocusedAppearance(Windows.Foundation.Collections.IMapView<String, Microsoft.Terminal.Settings.Model.ColorScheme> Schemes, IHostedInWindow WindowRoot);
+        void DeleteUnfocusedAppearance();
 
         OBSERVABLE_PROJECTED_PROFILE_SETTING(String, Name);
         PERMANENT_OBSERVABLE_PROJECTED_SETTING(Guid, Guid);
@@ -74,6 +81,9 @@ namespace Microsoft.Terminal.Settings.Editor
         ProfileViewModel Profile;
         ProfilesPivots LastActivePivot;
 
+        void CreateUnfocusedAppearance();
+        void DeleteUnfocusedAppearance();
+
         event Windows.Foundation.TypedEventHandler<ProfilePageNavigationState, DeleteProfileEventArgs> DeleteProfile;
     };