Feature Request - Implement Settings UI

[cinnamon-msft]

Summary of the new feature/enhancement

Implement a Settings UI for Windows Terminal. This UI should read from and update the settings.json file. The user should still be able to edit the JSON directly, if so desired.

Spec & Design: #6720

Implementation Plan

By @carlos-zamora. We're working off of the feature/settings-ui branch. It runs the same CI as master. The idea is that you make PRs targeting feature/settings-ui and when the Settings UI is ready for delivery, we merge it into master.

We're basically starting with #7370.

Back-end

These work items generally won't touch any UI or XAML.

• Replace TerminalSettings runtimeclasses with interfaces only #885 - TerminalSettingsModel
  • This is needed to be able to access the contents of the settings file. The settings objects must be COM objects. They can then be exposed to a Settings UI to read and modify Windows Terminal's settings. (PR Introduce TerminalSettingsModel project #7667, Introduce IconConverter #7830)
  • Spec: Add Spec for winrt TerminalSettings #6904
• Write settings to JSON
  • Part 1: JsonUtils includes ConversionTrait, which is used to convert settings from JSON to our settings objects (FromJson()). We should be able to introduce a ToJson() function to ConversionTrait. This will mainly handle individual settings being converted to their enum value. (PR Update ColorScheme with Json Serializer and color table API #7609)
  • Part 2: Introduce ToJson() as a function on full settings objects (i.e: Profile, GlobalAppSettings, etc...) (PR Add Serializer to CascadiaSettings #8018)
  • Part 3: Layer the output JSON from part 2, onto the user's existing settings. We need to make sure we don't overwrite any comments placed by the user.
• Update openSettings command to open the Settings UI
  • Spec: Add Mini-Spec for openSettings #5915
  • PR: Add functionality to open the Settings UI tab through openSettings #7802

Middle-end

These work items may touch a bit of the XAML. You'll have to touch the TerminalSettingsEditor project, but you won't be too caught up in the polish of icons, margins, etc.

• Embed the Settings UI as a tab in Windows Terminal (TerminalApp)
  • Convert TerminalSettingsEditor into a DLL
  • Throw that TerminalSettingsEditor into a tab for Terminal
  • Bonus Points: we should probably only have one Settings UI open at a time
  • PRs: Convert TerminalSettingsEditor into a DLL #7675, Add functionality to open the Settings UI tab through openSettings #7802
• Replace ObjectModel objects in the prototype with real TerminalSettingsModel object references
• Data Bind the settings to the TerminalSettingsModel
  • Global Settings
  • Profiles:
    • List of profiles --> Navigation bar
    • Profile settings
  • Color Schemes:
    • List of color schemes --> dropdown menu
    • colors
  • Key Bindings

Miscellaneous Follow-Ups from PRs

• Use the same UI for a new profile and existing profile.
• ColorSchemes.xaml button color flyouts should be all in a single control.
• Ensure all strings are attached to UIDs. (PR Add settings UI string localization #7833 )
• Commandline handling needs to be robust and intelligent.
• Push localizable strings into a Resources.resw (PR Add settings UI string localization #7833)
• Dedupe Utils's GetFontIcon function with Command's magic icon handler as per Add functionality to open the Settings UI tab through openSettings #7802
• Hide warning, and change save/reset buttons to apply/discard (PR Change save to apply in SUI #8082 )
  • we don't have a system to detect changes yet, so this'll do in the meantime.

Front-end

These work items include a bit more design work. Make sure you look at the mockups in #6720.

• Update icons (PR Update settings UI navigation icons #8013)
  • Profiles: E756
  • Appearance: E771
  • Color Schemes: E790
  • Startup: E7B5
• Hook up button to open the JSON settings (see Add Mini-Spec for openSettings #5915) (PR Hook up the Settings UI JSON button #8059)
• Add and hook up "Save" button

Bonus Points

• Search for settings
• Home Page
• Image preview for icons and background image
• Embed a Terminal Control in the "Appearance" page for profiles
  • This should live update with changes you make to colors, background image, font, etc.
  • Requires a new Terminal Connection specifically designed for this (or even throw a fully operational terminal in there, sure!)
• Tab title changes depending on what SUI page is currently open.
• Implement the Keyboard page (key bindings)
  • See Add initial settings UI spec #6720 for more details

Bugs

These are bugs that the team is finding as we selfhost the feature branch. This method will be used until the feature branch gets merged into master. At that point, we'll submit bugs normally.

• TSM and TSE localization not appearing
  • More info: Build authoring error: add <Import Project="$(SolutionDir)build\rules\CollectWildcardResources.targets" /> to TSM and TSE vcxproj (PR Make sure TSM pulls in the wildcard resource targets #7966 Make sure TSE pulls in the wildcard resource targets #7967 )
• The "unsaved changes" thing obstructs the settings at the bottom of the page, and they can't be scrolled up
• Unlocalized strings:
  • "Settings" on SettingsTab (PR Add localization to settings tab #8012 )
  • "Global" in UI Nav Menu (under Profiles)
    • This string already has a uuid and is defined in the resw. Need to explore deeper.
• If string for save/reset button is too long, it is cropped (PR Change save to apply in SUI #8082 )
• Spacing is incorrect on the Profiles - Global - Advanced page (PR Fix spacing on profile advanced page #8065)
• Hide keyboard page for 1.5 release (PR Hide incomplete settings UI features #8078)
• Hide home page for 1.5 release (PR Hide incomplete settings UI features #8078 )

Designs

By @cinnamon-msft. Content within these designs is not final and will be modified. They're simply here for demonstration.

[DHowett-MSFT]

Before anyone asks, yes the plan includes having a good live preview of things that could reasonably be expected to be seen in a terminal.

[mdtauk]

How would you move between different profile's settings?

Perhaps you could implement a ComboBox in the left NavigationPane to choose a Profile, to which the settings would apply?

Your Phone does this

---

Even if you decide not to use Acrylic for the Settings' NavigaitonView Pane, could you please Extend the Title Bar so the navigation view touches the top of the window?

[cinnamon-msft]

The plan at the moment is to have a profiles item in the menu on the left and a drop down of all your profiles in the main content area, with fields populated according to the JSON properties and a preview window to show your updated settings.
We don't have mocks of this just yet 😊