Add Extensions page to Settings UI #18559

carlos-zamora · 2025-02-11T00:50:05Z

Summary of the Pull Request

Adds an Extensions page to the Settings UI. This lets you enable/disable extensions and see how they affect your settings (i.e. adding/modifying profiles and adding color schemes). This page is specifically designed for fragment extensions and dynamic profile generators, but can be expanded on in the future as we develop a more advanced extensions model.

App extensions extract the name and icon from the extension package and display it in the UI. Dynamic profile generators extract the name and icon from the generator and display it in the UI. We prefer to use the display name for breadcrumbs when possible.

A "NEW" badge was added to the Extensions page's NavigationViewItem to highlight that it's new. It goes away once the user visits it.

Detailed Description of the Pull Request / Additional comments

Settings Model changes:
- FragmentSettings represents a parsed json fragment extension.
- FragmentProfileEntry and FragmentColorSchemeEntry are used to track profiles and color schemes added/modified
- ExtensionPackage bundles the FragmentSettings together. This is how we represent multiple JSON files in one extension.
- IDynamicProfileGenerator exposes a DisplayName and Icon
- ExtensionPackages created from app extensions extract the DisplayName and Icon from the extension
- ApplicationState is used to track which badges have been dismissed and prevent them from appearing again
- a std::unordered_set is used to keep track of the dismissed badges, but we only expose a get and append function via the IDL to interact with it
Editor changes - view models:
- ExtensionsViewModel operates as the main view model for the page.
- FragmentProfileViewModel and FragmentColorSchemeViewModel are used to reference specific components of fragments. They also provide support for navigating to the linked profile or color scheme via the settings UI!
- ExtensionPackageViewModel is a VM for a group of extensions exposed by a single source. This is mainly needed because a single source can have multiple JSON fragments in it. This is used for the navigators on the main page. Can be extended to provide additional information (i.e. package logo, package name, etc.)
- CurrentExtensionPackage is used to track which extension package is currently in view, if applicable (similar to how the new tab menu page works)
Editor changes - views:
- Extensions.xaml uses a lot of data templates. These are reused in ItemsControls to display extension components.
- ExtensionPackageTemplateSelector is used to display ExtensionPackages with metadata vs simple ones that just have a source (i.e. Git)
- Added a NewInfoBadge style that is just an InfoBadge with "New" in it instead of a number or an icon. Based on Add "new" labels to navigation PowerToys#36939
- The visibility is bound to a get call to the ApplicationState conducted via the ExtensionsPageViewModel. The VM is also responsible for updating the state.
Lazy loading extension objects
- Since most instances of Terminal won't actually open the settings UI, it doesn't make sense to create all the extension objects upon startup. Instead, we defer creating those objects until the user actually navigates to the Extensions page. This is most of the work that happened in CascadiaSettingsSerialization.cpp. The SettingsLoader can be used specifically to load and create the extension objects.

Validation Steps

✅ Keyboard navigation feels right
✅ Screen reader reads all info on screen properly
✅ Accessibility Insights FastPass found no issues
✅ "Discard changes" retains subpage, but removes any changes
✅ Extensions page nav item displays a badge if page hasn't been visited
✅ The badge is dismissed when the user visits the page

Follow-ups

Streamline a process for adding extensions from the new page
Long-term, we can reuse the InfoBadge system and make the following minor changes:
- SettingContainer: display the badge and add logic to read/write ApplicationState appropriately (similarly to above)
- XPageViewModel:
  - count all the badges that will be displayed and expose/bind that to InfoBadge.Value
  - If a whole page is new, we can just style the badge using the NewInfoBadge style

carlos-zamora · 2025-02-19T20:30:12Z

Demo

carlos-zamora · 2025-02-19T20:32:08Z

src/cascadia/TerminalSettingsEditor/AddProfile.xaml

@@ -59,7 +59,7 @@
                                <IconSourceElement Grid.Column="0"
                                                   Width="16"
                                                   Height="16"
-                                                   IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(Icon), Mode=OneTime}" />
+                                                   IconSource="{x:Bind mtu:IconPathConverter.IconSourceWUX(EvaluatedIcon), Mode=OneTime}" />


📝 Admittedly, a drive by. Happy to pull this out into a separate PR if desired.

carlos-zamora · 2025-02-19T20:33:43Z

src/cascadia/TerminalSettingsEditor/CommonResources.xaml

@@ -1199,7 +1199,7 @@
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
-        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />


📝 Had to update this style a bit to enable functionality for showing "Disabled" on the right side when an extension was disabled.

The way I made that work is that we have a 2-column grid. We need the grid to take up the entire horizontal content, so we need to set HorizontalContentAlignmen to stretch

carlos-zamora · 2025-02-19T20:38:44Z

src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml

-            <!--  TODO CARLOS: Icon  -->
+            <!--  TODO GH #18281: Icon  -->


📝 This one's on me 😅

carlos-zamora · 2025-02-19T20:40:32Z

src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml

@@ -227,6 +227,45 @@
        </Setter>
    </Style>

+    <!--  A basic setting container displaying immutable text as content  -->
+    <Style x:Key="SettingContainerWithTextContent"


📝 Used to display the Scope for an extension. Also allowed me to apply the SecondaryTextBlockStyle to the text shown on the right side (aka the value of Scope)

src/cascadia/TerminalSettingsModel/GlobalAppSettings.cpp

carlos-zamora · 2025-02-19T20:52:19Z

src/cascadia/TerminalSettingsEditor/Extensions.cpp

+            for (const auto&& entry : fragExt.ModifiedProfilesView())
+            {
+                // Ensure entry successfully modifies a profile before creating and registering the object
+                if (const auto& deducedProfile = _settings.FindProfile(entry.ProfileGuid()))
+                {
+                    auto vm = winrt::make<FragmentProfileViewModel>(entry, fragExt, deducedProfile);
+                    currentProfilesModified.push_back(vm);
+                    if (extensionEnabled)
+                    {
+                        profilesModifiedTotal.push_back(vm);
+                    }
+                }
+            }
+
+            for (const auto&& entry : fragExt.NewProfilesView())
+            {
+                // Ensure entry successfully points to a profile before creating and registering the object.
+                // The profile may have been removed by the user.
+                if (const auto& deducedProfile = _settings.FindProfile(entry.ProfileGuid()))
+                {
+                    auto vm = winrt::make<FragmentProfileViewModel>(entry, fragExt, deducedProfile);
+                    currentProfilesAdded.push_back(vm);
+                    if (extensionEnabled)
+                    {
+                        profilesAddedTotal.push_back(vm);
+                    }
+                }
+            }
+
+            for (const auto&& entry : fragExt.ColorSchemesView())
+            {
+                for (const auto& schemeVM : _colorSchemesPageVM.AllColorSchemes())
+                {
+                    if (schemeVM.Name() == entry.ColorSchemeName())
+                    {
+                        auto vm = winrt::make<FragmentColorSchemeViewModel>(entry, fragExt, schemeVM);
+                        currentColorSchemesAdded.push_back(vm);
+                        if (extensionEnabled)
+                        {
+                            colorSchemesAddedTotal.push_back(vm);
+                        }
+                    }
+                }
+            }


I'm only displaying the ones that were added successfully and point to something that already exists.

Long-term, do we want to do more here? Perhaps show the ones that weren't added successfully? I'm just not sure what the next steps would be and how we would want to approach this issue.

src/cascadia/TerminalSettingsModel/GlobalAppSettings.cpp

DHowett

Stake: I want to be the second reviewer on this :)

…stem

carlos-zamora · 2025-04-24T21:34:29Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

                const auto guid = profile->HasGuid() ? profile->Guid() : profile->Updates();
+                auto destinationSet = profile->HasGuid() ? newProfiles : modifiedProfiles;


Suggested change

auto destinationSet = profile->HasGuid() ? newProfiles : modifiedProfiles;

auto destinationSet = profile->HasGuid() ? &newProfiles : &modifiedProfiles;

carlos-zamora · 2025-04-24T21:35:07Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

-            _addUserProfileParent(fragmentProfile);
+            if (!_addOrMergeUserColorScheme(fragmentColorScheme))
+            {
+                // Color scheme wasn't added because it conflicted with a non-user created scheme.


Actually yeah, I'm going to undo the whole Conflict thing. We're not using it and that's an edge case to handle separately and better tbh.

carlos-zamora · 2025-04-24T22:25:51Z

Latest changes merged in some of the other branches and PRs:

Add display name and icon to SUI extensions page #18633
Add Badge to highlight new Extensions Page #18813
lazy loading the extension objects as @DHowett suggested

This is now ready to go 😊

src/cascadia/TerminalSettingsEditor/Extensions.cpp

DHowett

Ideally we would have scaled-up versions of the generator icons as well. Some of them may be easy to get, others may be less easy to get. We can do this as followup work.

DHowett

Very close now!

DHowett · 2025-05-22T23:09:59Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

+        extPkg->Icon(hstring{ generator.GetIcon() });
+    };
+
+    // TODO CARLOS: is there a way to deduplicate this list?


TODO! Decide, then commit. It's fine to have the code duplicated here, but please do add a comment explaining the duplication.

DHowett · 2025-05-22T23:16:47Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

-                    parseAndLayerFragmentFiles(fragmentExtFolder.path(), winrt::hstring{ source });
+                    parseAndLayerFragmentFiles(fragmentExtFolder.path(),
+                                               winrt::hstring{ source },
+                                               rfid == FOLDERID_LocalAppData ? FragmentScope::User : FragmentScope::Machine); // scope


fwiw you could structure this as follows:

auto scope = FragmentScope::User; for(const auto& rfid : std::array{ RFID, RFID }) { for (...) { something(scope); } // Since the outer loop only has two entries, set the scope for the next run scope = FragmentScope::Machine; }

that lets you get rid of one pesky ternary and a comparison against one of the array entries; TBD which is more fragile

DHowett · 2025-05-22T23:19:08Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

@@ -312,11 +399,8 @@ void SettingsLoader::FindFragmentsAndMergeIntoUserSettings()

    for (const auto& ext : extensions)
    {
-        const auto packageName = ext.Package().Id().FamilyName();
-        if (_ignoredNamespaces.contains(std::wstring_view{ packageName }))


I would still prefer to bail out early--before interacting with any more of the async package APIs (!)--if we aren't expressly building the fragment data and the user has requested that we please disable it. Is that still possible?

DHowett · 2025-05-22T23:19:55Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

+                                       packageName,
+                                       FragmentScope::User);
+
+            if (generateExtensionPackages)


i see that in this case we are still generating them, we are just letting them get created in parseAndLayer and then deleted if nobody asked for them... :(

ah we aren't generating the objects because we didn't populate the optional. however, we are still doing package API things when the user told us not to interact w/ that source

DHowett · 2025-05-22T23:27:58Z

src/cascadia/TerminalSettingsModel/CascadiaSettingsSerialization.cpp

+                    {
+                        fragmentColorSchemes.emplace_back(winrt::make<FragmentColorSchemeEntry>(scheme->Name(), hstring{ til::u8u16(Json::writeString(_getJsonStyledWriter(), schemeJson)) }));
+                    }
+                    else if (applyToUserSettings)


personally i'd structure this as if rather than else if so that if we ever change this to generate and load at the same time we don't need to wonder why "sometimes when I generate, it doesn't apply".

e.g. these aren't opposite conditions. :D

DHowett · 2025-05-22T23:40:23Z

src/cascadia/TerminalSettingsModel/CascadiaSettings.idl

@@ -56,4 +63,35 @@ namespace Microsoft.Terminal.Settings.Model

        void ExpandCommands();
    }
+
+    [default_interface] runtimeclass FragmentProfileEntry


we don't need [default_interface] on any of these, FWIW.

(or at least, we should not.)

DHowett · 2025-05-22T23:42:05Z

src/cascadia/TerminalSettingsModel/CascadiaSettings.cpp

+{
+    if (!_extensionPackages)
+    {
+        // Lazy load the ExtensionPackage objects


FUNNY. I bet we only call this on the CLONED one, so the cache is always empty (clone the base settings object without the extensions, get the extensions, fill the cache)

I think this is fine, fwiw, because it results in users seeing up-to-date fragment information on every settings UI load ;p

DHowett · 2025-05-22T23:43:25Z

src/cascadia/TerminalSettingsModel/Resources/en-US/Resources.resw

@@ -740,4 +740,24 @@
  <data name="OpenCWDCommandKey" xml:space="preserve">
    <value>Open current working directory</value>
  </data>
-</root>
+  <data name="WslDistroGeneratorDisplayName" xml:space="preserve">
+    <value>WSL Distro Profile Generator</value>


Suggested change

<value>WSL Distro Profile Generator</value>

<value>WSL Distribution Profile Generator</value>

DHowett · 2025-05-22T23:44:37Z

src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml

@@ -302,8 +347,7 @@
                                <StackPanel Grid.Column="0"
                                            Style="{StaticResource StackPanelInExpanderStyle}">
                                    <StackPanel Orientation="Horizontal">
-                                        <TextBlock Style="{StaticResource SettingsPageItemHeaderStyle}"
-                                                   Text="{TemplateBinding Header}" />
+                                        <ContentPresenter Content="{TemplateBinding Header}" />


Ugh, we have to add that whole new Style just because we can't style the text content inside a content presenter, don't we

DHowett · 2025-05-22T23:46:10Z

src/cascadia/TerminalSettingsEditor/MainPage.cpp

+                                    // navigate to the NewTabMenu page,
+                                    // _Navigate() will handle trying to find the right subpage
+                                    SettingsNav().SelectedItem(item);
+                                    _Navigate(breadcrumbExtensionPackage, BreadcrumbSubPage::NewTabMenu_Folder);


new tab menu? is that so?

This comment was marked as outdated.

Sign in to view

This comment was marked as resolved.

Sign in to view

carlos-zamora marked this pull request as ready for review February 19, 2025 20:18

carlos-zamora commented Feb 19, 2025

View reviewed changes

carlos-zamora added the zBugBash-Consider label Feb 19, 2025

carlos-zamora commented Feb 19, 2025

View reviewed changes

OmegaGateway333 approved these changes Feb 22, 2025

View reviewed changes

lhecker previously approved these changes Feb 25, 2025

View reviewed changes

lhecker reviewed Feb 25, 2025

View reviewed changes

src/cascadia/TerminalSettingsModel/GlobalAppSettings.cpp Outdated Show resolved Hide resolved

DHowett requested changes Feb 27, 2025

View reviewed changes

microsoft-github-policy-service bot added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Feb 27, 2025

carlos-zamora mentioned this pull request Feb 27, 2025

Add display name and icon to SUI extensions page #18633

Merged

OmegaGateway333 approved these changes Feb 27, 2025

View reviewed changes

carlos-zamora added 7 commits February 27, 2025 10:04

Add Extensions page to Settings UI

019bb76

rename some resources; remove some TODOs

7f0c9e5

add nested page

f11515e

add nested page (part 2) + support for multiple json files

75d02c2

copy over DisabledProfileSources

e6c43c0

wil::to_vector

6b83fa7

add dynamic profile generators

5afc9bc

microsoft-github-policy-service bot removed the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Feb 27, 2025

address feedback

7cdbb7c

carlos-zamora force-pushed the dev/cazamor/sui/extensions-page branch from ec88b32 to 7cdbb7c Compare February 27, 2025 18:17

microsoft-github-policy-service bot removed the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label Apr 21, 2025

carlos-zamora added 2 commits April 21, 2025 14:32

Fix XAML crash for release builds (applied incompatible styling)

0af4eb0

JsonSource->Filename; remove deep copy of fragments & generators

2766f21

carlos-zamora assigned DHowett Apr 22, 2025

carlos-zamora and others added 6 commits April 22, 2025 14:57

Add display name and icon to SUI extensions page

7fcdeaa

add DisplayName and Icon to profile generators; improve identifier sy…

b472d9f

…stem

a11y check: screen reader, keyboard navigation, FastPass ✅

1072d69

use high resolution assets

c371c48

Explicitly introduce and use profile generator icons; add VS logo

e9f83fc

[fix rebase] remove deep clone of ext pkgs

f25e6fe

carlos-zamora commented Apr 24, 2025

View reviewed changes

carlos-zamora added 3 commits April 24, 2025 14:38

Lazy load extension objects for SUI

057128e

Add Badge to highlight new Extensions Page

debacee

simplify AppState code; display 'NEW'

fc0eb78

Merge branch 'main' into dev/cazamor/sui/extensions-page

34c6115

carlos-zamora added a commit that referenced this pull request Apr 29, 2025

PRE-MERGE #18559 Add Extensions page to Settings UI

0a4da97

carlos-zamora added 5 commits May 2, 2025 13:32

apply feedback from bug bash

3353323

Linguistic sorting!

2d077ca

fix propagating CascadiaSettings reference & Enabled notification

831313c

Add toggle switches to root of Extensions page

5ae13b3

Merge branch 'main' into dev/cazamor/sui/extensions-page

27e1aee

github-advanced-security bot found potential problems May 6, 2025

View reviewed changes

This comment has been minimized.

Sign in to view

carlos-zamora added a commit that referenced this pull request May 6, 2025

PRE-MERGE #18559 Add Extensions page to Settings UI

c8f1050

spell

a282164

carlos-zamora added a commit that referenced this pull request May 16, 2025

PRE-MERGE #18559 Add Extensions page to Settings UI

07dc3cd

DHowett reviewed May 22, 2025

View reviewed changes

DHowett requested changes May 22, 2025

View reviewed changes

microsoft-github-policy-service bot added the Needs-Author-Feedback The original author of the issue/PR needs to come back and respond to something label May 22, 2025

		const auto guid = profile->HasGuid() ? profile->Guid() : profile->Updates();
		auto destinationSet = profile->HasGuid() ? newProfiles : modifiedProfiles;

	<value>WSL Distro Profile Generator</value>
	<value>WSL Distribution Profile Generator</value>

Add Extensions page to Settings UI #18559

Are you sure you want to change the base?

Add Extensions page to Settings UI #18559

Uh oh!

Conversation

carlos-zamora commented Feb 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of the Pull Request

Detailed Description of the Pull Request / Additional comments

Validation Steps

Follow-ups

Uh oh!

This comment was marked as outdated.

This comment was marked as resolved.

carlos-zamora commented Feb 19, 2025

Demo

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

DHowett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

carlos-zamora commented Apr 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

DHowett left a comment

Choose a reason for hiding this comment

Uh oh!

DHowett left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

carlos-zamora commented Feb 11, 2025 •

edited

Loading

carlos-zamora commented Apr 24, 2025 •

edited

Loading