Add New Tab Menu Customization to Settings UI

[carlos-zamora]

Summary of the Pull Request

Adds customization for the New Tab Menu to the settings UI.

• Settings Model changes:
  • The Settings UI generally works by creating a copy of the entire settings model objects on which we apply the changes to. Turns out, we completely left the NewTabMenu out of that process. So I went ahead and implemented it.
  • FolderEntry
    • FolderEntry exposes Entries() (used by the new tab menu to figure out what to actually render) and RawEntries() (the actual JSON data deserialized into settings model objects). I went ahead and exposed RawEntries() since we'll need to apply changes to it to then serialize.
• View Model:
  • NewTabMenuViewModel is the main view model that interacts with the page. It maintains the current view of items and applies changes to the settings model.
  • NewTabMenuEntryViewModel and all of the other _EntryViewModel classes are wrappers for the settings model NTM entries.
  • FolderTreeViewEntry encapsulates FolderEntryViewModel. It allows us to construct a TreeView of just folders.
• View changes and additions:
  • Added FontIconGlyph to the SettingContainer
  • Added a New Tab Menu item to the navigation view
  • Adding entries: a stack of SettingContainers is used here. We use the new FontIconGlyph to make this look nice!
  • Reordering entries: drag and drop is supported! This might not work in admin mode though, and we can't drag and drop into folders. Buttons were added to make this keyboard accessible.
  • To move entries into a folder, a button was added which then displays a TreeView of all folders.
  • Multiple entries can be moved to a folder or deleted at once!
  • Breadcrumbs are used for folders
  • When a folder is entered, additional controls are displayed to customize that folder.
     

Verification

• ✅ a11y pass
• ✅ keyboard accessible
• scenarios:
  • ✅ add entries (except actions)
  • ✅ changes propagated to settings model (aka "saving works")
  • ✅ reorder entries
  • ✅ move entries to an existing folder
  • ✅ delete multiple entries
  • ✅ delete individual entries
  • ✅ display entries (including actions)

Follow-ups

• add support for adding and editing action entries
• when we discard changes or save, it would be cool if we could stay on the same page
• allow customizing the folder entry before adding it (current workaround is to add it, then edit it)
• improve UI for setting icon (reuse UI from Improve Profile.Icon UI in settings #17965)

[carlos-zamora]

Demo

Top-level view

"Move to folder" dialog

Edit Folder view

[lhecker]

TBH nothing in this PR was a problem for me, although there are some nits. I'm mostly curious how it'll feel in practice (once it's in Canary). 🙂