Terminal: 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.

• [X] #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 #7667, #7830)
  
  
  • Spec: #6904
  
  
• [ ] Write settings to JSON
  
  
  
  • [x] 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 #7609)
  
  
  • [ ] Part 2: Introduce ToJson() as a function on full settings objects (i.e: Profile, GlobalAppSettings, etc...) (PR #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.
  
  
• [x] Update openSettings command to open the Settings UI
  
  
  
  • Spec: #5915
  
  
  • PR: #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.

• [x] 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: #7675, #7802
  
  
• [x] 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.
• [x] Ensure all strings are attached to UIDs. (PR #7833 )
• [ ] Commandline handling needs to be robust and intelligent.
• [x] Push localizable strings into a Resources.resw (PR #7833)
• [x] Dedupe Utils's GetFontIcon function with Command's magic icon handler as per #7802
• [X] Hide warning, and change save/reset buttons to apply/discard (PR #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.

• [X] Update icons (PR #8013)
  
  
  
  • Profiles: E756
  
  
  • Appearance: E771
  
  
  • Color Schemes: E790
  
  
  • Startup: E7B5
  
  
• [X] Hook up button to open the JSON settings (see #5915) (PR #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 #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.

• [x] 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 #7966 #7967 )
  
  
• [x] The "unsaved changes" thing obstructs the settings at the bottom of the page, and they can't be scrolled up
• [ ] Unlocalized strings:
  
  
  
  • [X] "Settings" on SettingsTab (PR #8012 )
  
  
  • [ ] "Global" in UI Nav Menu (under Profiles)
  
  
  • This string already has a uuid and is defined in the resw. Need to explore deeper.
  
  
• [X] If string for save/reset button is too long, it is cropped (PR #8082 )
• [X] Spacing is incorrect on the Profiles - Global - Advanced page (PR #8065)
• [x] Hide keyboard page for 1.5 release (PR #8078)
• [x] Hide home page for 1.5 release (PR #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 😊

[mikemaccana]

Regarding color schemes: per #1750, all iTerm2 color schemes have been ported to Windows Terminal.

[DavidLiedle]

To be clear, there is currently (Sunday, July 7, 2019) no Settings functionality at all, correct? Clicking the "Settings" menu item from the triangle drop-down has no effect on my system.

[mdtauk]

To be clear, there is currently (Sunday, July 7, 2019) no Settings functionality at all, correct? Clicking the "Settings" menu item from the triangle drop-down has no effect on my system.

It _should_ open the profiles.json file, which allows you to change the settings - but eventually there will be a GUI for this file.

[aguywithcode]

To be clear, there is currently (Sunday, July 7, 2019) no Settings functionality at all, correct? Clicking the "Settings" menu item from the triangle drop-down has no effect on my system.

It _should_ open the profiles.json file, which allows you to change the settings - but eventually there will be a GUI for this file.

When I click the settings menu option, it has no effect. I'm using the preview from the windows store. Should I download and build instead?

[cinnamon-msft]

When I click the settings menu option, it has no effect. I'm using the preview from the windows store. Should I download and build instead?

It should open the profiles.json file inside your default editor for json files. Perhaps you don't have a default set within Windows?

[mikemaccana]

A new preview build is due on the thirtieth so hold on a little while if you want to test something stable

[nullptr-leo]

To be clear, there is currently (Sunday, July 7, 2019) no Settings functionality at all, correct? Clicking the "Settings" menu item from the triangle drop-down has no effect on my system.

It _should_ open the profiles.json file, which allows you to change the settings - but eventually there will be a GUI for this file.

When I click the settings menu option, it has no effect. I'm using the preview from the windows store. Should I download and build instead?

Maybe you should check your default JSON file editor first.

[Fisico]

My idea for a settings UI.
The settings page should be an overlay.
First Page: A full screen splash screen overlay, like windows settings.
Tab “Profiles”: Each profile has its own submenu tab where you can set name, commandline, starting dir, startup parameter, font face, font size, acrylic, opacity, background color or image, font color and icon. The selections should update the preview in real-time.
Tab “General”: This is the settings page with general settings like cursor size, overall font face and font size. Some other settings that are also global should be selected here.
The second submenu of “General” is layout, where you can tweak the buffer size, windows size and position.

With the X next to settings, you close the settings overlay.
With the arrow next to General or Profiles you go back to the Settings “Splash screen”

[egmontkob]

https://youtu.be/veqs2WVou9M?t=525 (5 seconds) – Dustin, come on... :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue:

[tamimmirza]

My idea for a settings UI.
The settings page should be an overlay.
First Page: A full screen splash screen overlay, like windows settings.
Tab “Profiles”: Each profile has its own submenu tab where you can set name, commandline, starting dir, startup parameter, font face, font size, acrylic, opacity, background color or image, font color and icon. The selections should update the preview in real-time.
Tab “General”: This is the settings page with general settings like cursor size, overall font face and font size. Some other settings that are also global should be selected here.
The second submenu of “General” is layout, where you can tweak the buffer size, windows size and position.

With the X next to settings, you close the settings overlay.
With the arrow next to General or Profiles you go back to the Settings “Splash screen”

The idea of a setting UI would save a lot of time and effort to customize the terminal, I tried adding a new profile along with personalized settings and it took out quite a chunk of time that included checking on Google on how to do it and to save it (profile.json) and re-launch the terminal to see if it works. If not, then repeat. (Yes I am a noob at manually doing it this way and prefer to have a UI. It's a personal preference shared not by me only but others as well).

The mock UI referenced here, though not polished and missing a few things (including adding background image), is far better than manually editing the json file. This feature is extremely crucial and should be available by the next major preview release or final release as this will enable users to focus on how well the terminal reacts to multiple customizations with changes being previewed.

[DHowett-MSFT]

At the same time, this is a developer tool. Some amount of manual configuration file editing is to be expected, possibly even as late as 1.0. And you don’t need to relaunch terminal to see the effects of your editing.

[Fisico]

My idea for a settings UI.
The settings page should be an overlay.
First Page: A full screen splash screen overlay, like windows settings.
Tab “Profiles”: Each profile has its own submenu tab where you can set name, commandline, starting dir, startup parameter, font face, font size, acrylic, opacity, background color or image, font color and icon. The selections should update the preview in real-time.
Tab “General”: This is the settings page with general settings like cursor size, overall font face and font size. Some other settings that are also global should be selected here.
The second submenu of “General” is layout, where you can tweak the buffer size, windows size and position.
With the X next to settings, you close the settings overlay.
With the arrow next to General or Profiles you go back to the Settings “Splash screen”

The idea of a setting UI would save a lot of time and effort to customize the terminal, I tried adding a new profile along with personalized settings and it took out quite a chunk of time that included checking on Google on how to do it and to save it (profile.json) and re-launch the terminal to see if it works. If not, then repeat. (Yes I am a noob at manually doing it this way and prefer to have a UI. It's a personal preference shared not by me only but others as well).

The mock UI referenced here, though not polished and missing a few things (including adding background image), is far better than manually editing the json file. This feature is extremely crucial and should be available by the next major preview release or final release as this will enable users to focus on how well the terminal reacts to multiple customizations with changes being previewed.

Glad you like it. Yea a background image selection button is missing. But there is room for that..

[mdtauk]

The Settings UI wouldn't need to cover EVERY setting you can set. Anything that affects the visuals of the app, should be there. A link to open the JSON file should be there. A link to a complete list of settings you can add should be there.

Previews for things like Cursor Shape, Acrylic, Background Images, Colours - would make a lot of sense, so someone can try out color schemes, before committing.

Also as some settings are per profile, and others are app wide - some kind of drop down to choose the profile to be edited, would probably be a good idea.

[Fisico]

The Settings UI wouldn't need to cover EVERY setting you can set. Anything that affects the visuals of the app, should be there. A link to open the JSON file should be there. A link to a complete list of settings you can add should be there.

Previews for things like Cursor Shape, Acrylic, Background Images, Colours - would make a lot of sense, so someone can try out color schemes, before committing.

Also as some settings are per profile, and others are app wide - some kind of drop down to choose the profile to be edited, would probably be a good idea.

2nd image in my concept shows profiles(on the left side) and the settings for it on the main page.

[mdtauk]

2nd image in my concept shows profiles(on the left side) and the settings for it on the main page.

I did a similar mock up a while back :)

[yellow-starburst]

I think this would be a major improvement. Could this please be pushed out as soon as possible?

[DHowett-MSFT]

@yellow-starburst you can generally use our Milestones and Projects view (or the active milestone for any specific issue) to figure that out. A settings UI is not in-plan for version 1.0.

[pranavgoyanka]

I tried to make a small UI for the profiles.json file using Python and Tkinter. While the UI is not very good and doesn't really follow the Windows 10 design scheme (because I am only familiar with those technologies), it does the job of editing the profiles.json file.

If someone wishes, they can check it out here

[SamuelEnglard]

@DHowett-MSFT while this is not within scope for 1.0, would it not be accepted from external developers for 1.0?

[ShubhamBelwal]

@SamuelEnglard external PRs are always welcomes no matter what issue/feature request they're targetting.

[zadjii-msft]

Pretty much yea. If you could put something together in the 1.0 timeframe we'd happily accept it, but that might be a tall ask 😝

[DHowett-MSFT]

So, this one requires a little caution. Kayla has a vision about what she wants to accomplish, but I think that that's something we can communicate with the public. We're not going to land something for v1.0 at any rate, but I absolutely don't want to discourage community work on this one :smile:

[SamuelEnglard]

My thinking was more that you might not want to spend the time reviewing it to focus on 1.0 things.

[RUSshy]

@mdtauk i like your mockup a lot

one suggestion: remove the [+] Add new Profile, and instead put a + right next to the profile name (i suppose it is a dropdown menu?)

EDIT:
after taking a longer look at the proposed mockups, i came to the conclusion that there is too much empty space, the controls are huge, almost like if the settings menu is aimed at mobile/tablet users.. something designed for scrolling/touch devices

[sharpninja]

I think it needs to be four sections:

• Global Settings
  > Shows all common settings, grouped by category. Use tabs to prevent scrolling.
• Keyboard Schemes
  > Allow sets of keyboard shortcutes to be named, tagged and grouped. A button to print a Cheat-Sheet would be awesome.
• Themes/Visual Schemes
  > Rich UI for selecting colors for "Themes" with the ability to select background images, name, tag and group themes, and import/export themes with JSON/YAML. A button to "Variate" would start a new Theme that would be a clone, but two buttons, "Darker"/"Lighter" would darken or lighten the theme incrementally to help create variations for Profiles in a group.
• Profiles
  > Ability to name, tag and group Profiles (groups would be separated in the tab flyout menu to visually organize them). Selecting a them would use a preview of each theme in a carousel. Keyboard schemes would be selected from a drop down. When a Profile is tagged or grouped, it would auto-select a theme and keyboard scheme if matching items exist. Profiles can be exported to JSON.

All exportable JSON could be packaged as nuget archives with a powershell script to import the item to the current user's settings.

[DHowett-MSFT]

All of those points seem reasonable except for randomly using NuGet 😄

NuGet archives are just zip files with extra metadata that's really only good and useful for binary distributions of things that need to be built into C++/C#/WinJS/etc. projects moreso than as a generic config export format. JSON is already exportable as-is.

[sharpninja]

All of those points seem reasonable except for randomly using NuGet 😄

It's not random, it's meant to facilitate sharing of settings and profiles using Nuget servers. I'm currently working on an app and website that will be a gallery of Windows Terminal Profiles that people can share to and download from. Getting the data to the config file is easy with JSON, but I want to support many different scenarios, one of which is a completely offline scenario where the user doesn't have to edit any JSON files and can be included as part of the setup of a server or container. To facilitate that, the JSON is encapsulated in Nuget with a PS install and uninstall script that will import/remove the JSON from the config.

[SamuelEnglard]

To facilitate that, the JSON is encapsulated in Nuget with a PS install and uninstall script that will import/remove the JSON from the config.

So chocolatey? Making a PowerShell cmdlet that creates a chocolatey package of a profile shouldn't be that hard.

[sharpninja]

To facilitate that, the JSON is encapsulated in Nuget with a PS install and uninstall script that will import/remove the JSON from the config.

So chocolatey? Making a PowerShell cmdlet that creates a chocolatey package of a profile shouldn't be that hard.

The idea is for the nuget generation and import to be baked in so that a 3rd party tool isn't necessary

[SamuelEnglard]

completely offline scenario where the user doesn't have to edit any JSON files and can be included as part of the setup of a server or container

Odds are they're using some 3rd-party tool to do this already, chocolatey being one of the possible options. Integrating with those tools seems the best bet there to me.

[sharpninja]

The nuget integration isn't _necessary_, but would set a good precedent and would also be dogfooding...

[SFM61319]

This terminal is a UWP app that uses Fluent design and is highly customizable. Maybe take a look at it and kind of shape Windows Terminal similar to it? I mean, even that terminal looks good (although it is in its early stages).

[SFM61319]

IMO it would look good if the whole settings app (or page) has a background acrylic just like the Terminal (acrylic that changes according to the acrylic settings set in the settings page)

[mikemaccana]

Keep in mind that settings panels should be consistent across Windows. You may have feedback about how setting panels should look in Windows, but the Terminal GitHub isn't the best place to discuss them. The place to send thoughts about how settings panels should look in Windows is the Feedback app.

[RUSshy]

Why you censor my comment?

All i was saying is it looks like a UI made for tablets?

This is crazy the level of censorship at microsoft

[DHowett-MSFT]

@russhy I deleted your comment because of the specific language it used violating our code of conduct, not because you think our UI would look like a tablet UI. I don't particularly care _what_ you say so long as you express yourself respectfully.

[RUSshy]

oh i see, i'll try to use proper language in the future, but please let me know instead of just deleting stuff
@DHowett-MSFT

[DHowett-MSFT]

@russhy sure thing, sorry about that. :smile:

[ghost]

A

[krezol]

How about defaulting to json file view for the advanced users? That way users will edit settings their way.

[Alaboudi1]

This terminal is a UWP app that uses Fluent design and is highly customizable. Maybe take a look at it and kind of shape Windows Terminal similar to it? I mean, even that terminal looks good (although it is in its early stages).

That project is pretty awesome! Even all kinds of fonts render perfectly. It is, unfortunately, slower than Terminal. Hope Terminal gets inspired by that project while remains super snappy!

[michael-hawker]

🦙 Seems like this could be a good fit for the Form Control Proposal in WinUI.

[niels9001]

I agree with @michael-hawker - but I think Form Control is still in a proposal stage?

For PowerToys, we've put in quite some effort to get the XAML right: all fontsizes, margins, paddings and other attributes mimic the W10 Settings app. In this way it looks and feels native to Windows and I think it would be great to share the same UX?

I'm happy to contribute by creating all the XAML that is required according to the spec.. and to polish it all up. @zadjii-msft @DHowett . Is there already an active branch?

[zadjii-msft]

I believe there is a variety of WIP branches, but I honestly don't know which ones are active or not. I believe @carlos-zamora and @cinnamon-msft _do_ know though

[carlos-zamora]

The latest branch is cinnamon/settings-ui-v2. We implemented the Settings UI as a separate app that can be found under src/TerminalSettings.

We're still working on organizing a plan/spec for the Settings UI as a whole, so feel free to clean up the Globals and Color Schemes page for now, or poke around.

For the record, some of the stuff that we still need to plan out are...

• changes to the Profiles page
• overall design of the Keybindings page
• how to sync the JSON and the Settings UI
  We have some ideas, but we'll come out with an actual spec for all of this soon.

[Viniacamp]

How I execute the app(Settings page)?

[carlos-zamora]

How I execute the app(Settings page)?

The Settings UI is under active development and is not in Windows Terminal yet.

[Viniacamp]

Yes, I know this, but isn't it possible to test the prototype of the configuration page, to see how it can look? because at the beginning of the topic there are images of a prototype.

[zadjii-msft]

I believe those are just UI mockups made in Figma, not an actual prototype that can be played with quite yet.

[Viniacamp]

I downloaded a zip with with this supposed prototype, and now I don’t know how to run it

[Viniacamp]

I believe those are just UI mockups made in Figma, not an actual prototype that can be played with quite yet.

yes, it may be, but the image appears to be so real ...

[j4james]

@Viniacamp You need to compile the application yourself. There's a TerminalSettings.sln file in the src\TerminalSettings directory which you can open in in Visual Studio and then build and run. But if you don't know what you're doing you may struggle to get it working - I know I had to mess with the project files to adjust the package paths for my system. Also note that there isn't that much to see yet - it's just a few mockups of some of the screens, and that doesn't include any of the images posted at top of the issue.

[DHowett]

The "unsaved changes" thing obstructs the settings at the bottom of the page, and they can't be scrolled up.

[SFM61319]

Will there be an autosave feature? like as soon as you check a checkbutton, toggle a toggleswitch, or just change any setting, will they be saved? (event-based save feature)

[DHowett]

@SFM61319 because all open instances of Terminal automatically update when the settings file changes, we decided that it would be too dangerous and disruptive to save on every state change. Configuring a single profile would turn every terminal window into an absolute kaleidoscope of font sizes and colors while you were editing.

[SFM61319]

@DHowett wait I have an idea what about a setting (in settings) to enable autosave?

[SFM61319]

And will Ctrl + S save the settings so that one doesn't have to click the save button (if autosave isn't a feature)? (Keybindings make stuff easier to use)

[mdtauk]

I have been thinking, is there a plan to include an Import and Export button/option for the ColorScheme?

I know there is the JSON settings page, but it would also be useful to support importing existing colour schemes like iTerm, JSON, or even raw TXT files.

[DHowett]

@leonmsft you're gonna think I'm crazy, but.. the color schemes page is mixing up all the colors o_O

1. select campbell

1. keyboard down to campbell powershell

1. keyboard back up to campbell