Code Quality: Improved Omnibar UX 2

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBar.Properties.cs

@@ -15,5 +15,11 @@ public partial class BreadcrumbBar : Control
 
 		[GeneratedDependencyProperty]
 		public partial object? ItemTemplate { get; set; }
+
+		[GeneratedDependencyProperty]
+		public partial string? EllipsisButtonToolTip { get; set; }
+
+		[GeneratedDependencyProperty]
+		public partial string? RootItemToolTip { get; set; }
 	}
 }

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBar.xaml

@@ -55,17 +55,17 @@
 							x:Name="PART_RootBreadcrumbBarItem"
 							Grid.Column="0"
 							Padding="{StaticResource BreadcrumbBarRootItemPadding}"
-							AutomationProperties.AccessibilityView="Content"
-							CornerRadius="{StaticResource BreadcrumbBarRootItemCornerRadius}">
+							CornerRadius="{StaticResource BreadcrumbBarRootItemCornerRadius}"
+							ItemToolTip="{TemplateBinding RootItemToolTip}">
 							<ContentPresenter Content="{Binding RootItem, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
 						</local:BreadcrumbBarItem>
 
 						<local:BreadcrumbBarItem
 							x:Name="PART_EllipsisBreadcrumbBarItem"
 							Grid.Column="1"
 							Margin="{StaticResource BreadcrumbBarItemMargin}"
-							AutomationProperties.AccessibilityView="Content"
 							IsEllipsis="True"
+							ToolTipService.ToolTip="{TemplateBinding EllipsisButtonToolTip}"
 							Visibility="Collapsed">
 							<FontIcon FontSize="{StaticResource BreadcrumbBarEllipsisFontSize}" Glyph="&#xE712;" />
 						</local:BreadcrumbBarItem>
@@ -125,11 +125,13 @@
 							Padding="{TemplateBinding Padding}"
 							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 							AutomationProperties.AccessibilityView="Raw"
+							AutomationProperties.Name="{TemplateBinding Content}"
 							Background="{TemplateBinding Background}"
 							BorderBrush="{TemplateBinding BorderBrush}"
 							BorderThickness="{TemplateBinding BorderThickness}"
 							Control.IsTemplateFocusTarget="True"
 							CornerRadius="{TemplateBinding CornerRadius}"
+							ToolTipService.ToolTip="{TemplateBinding ItemToolTip}"
 							UseSystemFocusVisuals="True">
 							<Button.Resources>
 								<ResourceDictionary>
@@ -177,12 +179,14 @@
 							Margin="{StaticResource BreadcrumbBarItemMargin}"
 							Padding="{StaticResource BreadcrumbBarChevronPadding}"
 							VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-							AutomationProperties.AccessibilityView="Content"
+							AutomationProperties.AccessibilityView="Raw"
+							AutomationProperties.Name="Chevron"
 							Background="{TemplateBinding Background}"
 							BorderBrush="{TemplateBinding BorderBrush}"
 							BorderThickness="{TemplateBinding BorderThickness}"
 							CornerRadius="{StaticResource BreadcrumbBarChevronCornerRaduis}"
 							Style="{StaticResource BreadcrumbBarItemChevronButtonStyle}"
+							ToolTipService.ToolTip="{TemplateBinding ChevronToolTip}"
 							UseSystemFocusVisuals="True">
 							<Button.Resources>
 								<ResourceDictionary>

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBarItem.Properties.cs

@@ -13,6 +13,12 @@ public partial class BreadcrumbBarItem
 		[GeneratedDependencyProperty]
 		public partial bool IsLastItem { get; set; }
 
+		[GeneratedDependencyProperty]
+		public partial string ItemToolTip { get; set; }
+
+		[GeneratedDependencyProperty]
+		public partial string ChevronToolTip { get; set; }
+
 		partial void OnIsEllipsisChanged(bool newValue)
 		{
 			VisualStateManager.GoToState(this, newValue ? "ChevronCollapsed" : "ChevronVisible", true);

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBarItemAutomationPeer.cs

@@ -24,7 +24,7 @@ protected override string GetLocalizedControlTypeCore()
 
 		protected override object GetPatternCore(PatternInterface patternInterface)
 		{
-			if (patternInterface is PatternInterface.Invoke)
+			if (patternInterface is PatternInterface.ExpandCollapse or PatternInterface.Invoke)
 				return this;
 
 			return base.GetPatternCore(patternInterface);
@@ -37,12 +37,15 @@ protected override string GetClassNameCore()
 
 		protected override AutomationControlType GetAutomationControlTypeCore()
 		{
-			return AutomationControlType.Button;
+			return AutomationControlType.SplitButton;
 		}
 
-		/// <summary>
-		/// Sends a request to invoke the item associated with the automation peer.
-		/// </summary>
+		protected override bool IsControlElementCore()
+		{
+			return true;
+		}
+
+		/// <inheritdoc/>
 		public void Invoke()
 		{
 			if (Owner is not BreadcrumbBarItem item)

src/Files.App.Controls/BreadcrumbBar/BreadcrumbBarLayout.cs

@@ -33,13 +33,15 @@ protected override Size MeasureOverride(NonVirtualizingLayoutContext context, Si
 			var accumulatedSize = new Size(0, 0);
 			_availableSize = availableSize;
 
+			var indexAfterEllipsis = GetFirstIndexToRender(context);
+
 			// Go through all items and measure them
-			foreach (var item in context.Children)
+			for (int index = 0; index < context.Children.Count; index++)
 			{
-				if (item is BreadcrumbBarItem breadcrumbItem)
+				if (context.Children[index] is BreadcrumbBarItem breadcrumbItem)
 				{
 					breadcrumbItem.Measure(availableSize);
-					accumulatedSize.Width += breadcrumbItem.DesiredSize.Width;
+					accumulatedSize.Width += index < indexAfterEllipsis ? 0: breadcrumbItem.DesiredSize.Width;
 					accumulatedSize.Height = Math.Max(accumulatedSize.Height, breadcrumbItem.DesiredSize.Height);
 				}
 			}
@@ -49,7 +51,7 @@ protected override Size MeasureOverride(NonVirtualizingLayoutContext context, Si
 				_ellipsisButton ??= context.Children[0] as BreadcrumbBarItem;
 
 			// Sets the ellipsis item's visibility based on whether the items are overflowing
-			EllipsisIsRendered = accumulatedSize.Width > availableSize.Width;
+			EllipsisIsRendered = indexAfterEllipsis is not 0;
 
 			return accumulatedSize;
 		}

src/Files.App.Controls/Omnibar/Omnibar.Events.cs

@@ -22,6 +22,16 @@ private void AutoSuggestBox_GettingFocus(UIElement sender, GettingFocusEventArgs
 			_previouslyFocusedElement = new(args.OldFocusedElement as UIElement);
 		}
 
+		private void AutoSuggestBox_LosingFocus(UIElement sender, LosingFocusEventArgs args)
+		{
+			if (IsModeButtonPressed)
+			{
+				IsModeButtonPressed = false;
+				args.TryCancel();
+				return;
+			}
+		}
+
 		private void AutoSuggestBox_GotFocus(object sender, RoutedEventArgs e)
 		{
 			IsFocused = true;
@@ -70,7 +80,7 @@ private void AutoSuggestBox_KeyDown(object sender, KeyRoutedEventArgs e)
 				{
 					_textBoxSuggestionsListView.SelectedIndex = nextIndex;
 
-					ChooseSuggestionItem(_textBoxSuggestionsListView.SelectedItem);
+					ChooseSuggestionItem(_textBoxSuggestionsListView.SelectedItem, true);
 				}
 			}
 			else if (e.Key == VirtualKey.Escape)
@@ -127,5 +137,10 @@ private void AutoSuggestBoxSuggestionsListView_ItemClick(object sender, ItemClic
 			ChooseSuggestionItem(e.ClickedItem);
 			SubmitQuery(e.ClickedItem);
 		}
+
+		private void AutoSuggestBoxSuggestionsListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
+		{
+			_textBoxSuggestionsListView.ScrollIntoView(_textBoxSuggestionsListView.SelectedItem);
+		}
 	}
 }

src/Files.App.Controls/Omnibar/Omnibar.cs

@@ -33,6 +33,9 @@ public partial class Omnibar : Control
 
 		private WeakReference<UIElement?> _previouslyFocusedElement = new(null);
 
+		// NOTE: This is a workaround to keep Omnibar's focus on a mode button being clicked
+		internal bool IsModeButtonPressed { get; set; }
+
 		// Events
 
 		public event TypedEventHandler<Omnibar, OmnibarQuerySubmittedEventArgs>? QuerySubmitted;
@@ -71,11 +74,13 @@ protected override void OnApplyTemplate()
 			SizeChanged += Omnibar_SizeChanged;
 			_textBox.GettingFocus += AutoSuggestBox_GettingFocus;
 			_textBox.GotFocus += AutoSuggestBox_GotFocus;
+			_textBox.LosingFocus += AutoSuggestBox_LosingFocus;
 			_textBox.LostFocus += AutoSuggestBox_LostFocus;
 			_textBox.KeyDown += AutoSuggestBox_KeyDown;
 			_textBox.TextChanged += AutoSuggestBox_TextChanged;
 			_textBoxSuggestionsPopup.GettingFocus += AutoSuggestBoxSuggestionsPopup_GettingFocus;
 			_textBoxSuggestionsListView.ItemClick += AutoSuggestBoxSuggestionsListView_ItemClick;
+			_textBoxSuggestionsListView.SelectionChanged += AutoSuggestBoxSuggestionsListView_SelectionChanged;
 
 			// Set the default width
 			_textBoxSuggestionsContainerBorder.Width = ActualWidth;
@@ -148,6 +153,11 @@ protected void ChangeMode(OmnibarMode? oldMode, OmnibarMode newMode)
 
 			VisualStateManager.GoToState(newMode, "Focused", true);
 			newMode.IsTabStop = false;
+
+			_textBox.PlaceholderText = newMode.PlaceholderText ?? string.Empty;
+			_textBoxSuggestionsListView.ItemTemplate = newMode.SuggestionItemTemplate;
+			_textBoxSuggestionsListView.ItemsSource = newMode.SuggestionItemsSource;
+
 			if (newMode.IsAutoFocusEnabled)
 			{
 				_textBox.Focus(FocusState.Pointer);
@@ -196,12 +206,13 @@ public bool TryToggleIsSuggestionsPopupOpen(bool wantToOpen)
 			return false;
 		}
 
-		public void ChooseSuggestionItem(object obj)
+		public void ChooseSuggestionItem(object obj, bool isOriginatedFromArrowKey = false)
 		{
 			if (CurrentSelectedMode is null)
 				return;
 
-			if (CurrentSelectedMode.UpdateTextOnSelect)
+			if (CurrentSelectedMode.UpdateTextOnSelect ||
+				(isOriginatedFromArrowKey && CurrentSelectedMode.UpdateTextOnArrowKeys))
 			{
 				_textChangeReason = OmnibarTextChangeReason.SuggestionChosen;
 				ChangeTextBoxText(GetObjectText(obj));

src/Files.App.Controls/Omnibar/Omnibar.xaml

@@ -67,7 +67,6 @@
 							FontStretch="{TemplateBinding FontStretch}"
 							FontWeight="{TemplateBinding FontWeight}"
 							Foreground="{TemplateBinding Foreground}"
-							PlaceholderText="{Binding CurrentSelectedMode.PlaceholderText, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
 							ScrollViewer.BringIntoViewOnFocusChange="False"
 							Style="{StaticResource DefaultOmnibarTextBoxStyle}"
 							UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" />
@@ -96,11 +95,7 @@
 									MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
 									Margin="{ThemeResource AutoSuggestListPadding}"
 									IsItemClickEnabled="True"
-									ItemTemplate="{Binding CurrentSelectedMode.SuggestionItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
-									ItemsSource="{Binding CurrentSelectedMode.SuggestionItemsSource, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
-									SelectionMode="Single">
-									<ListView.ItemContainerTransitions />
-								</ListView>
+									SelectionMode="Single" />
 							</Border>
 						</Popup>
 

src/Files.App.Controls/Omnibar/OmnibarMode.Events.cs

@@ -30,6 +30,8 @@ private void ModeButton_PointerReleased(object sender, PointerRoutedEventArgs e)
 
 			VisualStateManager.GoToState(this, "PointerOver", true);
 
+			owner.IsModeButtonPressed = true;
+
 			// Change the current mode
 			owner.CurrentSelectedMode = this;
 		}

src/Files.App.Controls/Omnibar/OmnibarMode.Properties.cs

@@ -43,6 +43,9 @@ public partial class OmnibarMode
 		[GeneratedDependencyProperty(DefaultValue = true)]
 		public partial bool UpdateTextOnSelect { get; set; }
 
+		[GeneratedDependencyProperty(DefaultValue = true)]
+		public partial bool UpdateTextOnArrowKeys { get; set; }
+
 		[GeneratedDependencyProperty]
 		public partial bool IsAutoFocusEnabled { get; set; }
 

src/Files.App/Strings/en-US/Resources.resw

@@ -4236,4 +4236,10 @@
     <value>Status center progress ping</value>
     <comment>Screen reader name for the status center progress ring</comment>
   </data>
+  <data name="BreadcrumbBarEllipsisButtonToolTip" xml:space="preserve">
+    <value>Show collapesed path breadcrumbs</value>
+  </data>
+  <data name="BreadcrumbBarChevronButtonToolTip" xml:space="preserve">
+    <value>Show child folders</value>
+  </data>
 </root>

src/Files.App/UserControls/NavigationToolbar.xaml

@@ -340,10 +340,12 @@
 				<controls:OmnibarMode.ContentOnInactive>
 					<controls:BreadcrumbBar
 						x:Name="BreadcrumbBar"
+						EllipsisButtonToolTip="{helpers:ResourceString Name=BreadcrumbBarEllipsisButtonToolTip}"
 						ItemClicked="BreadcrumbBar_ItemClicked"
 						ItemDropDownFlyoutClosed="BreadcrumbBar_ItemDropDownFlyoutClosed"
 						ItemDropDownFlyoutOpening="BreadcrumbBar_ItemDropDownFlyoutOpening"
-						ItemsSource="{x:Bind ViewModel.PathComponents, Mode=OneWay}">
+						ItemsSource="{x:Bind ViewModel.PathComponents, Mode=OneWay}"
+						RootItemToolTip="{helpers:ResourceString Name=Home}">
 						<controls:BreadcrumbBar.RootItem>
 							<Image
 								Width="16"
@@ -352,7 +354,12 @@
 						</controls:BreadcrumbBar.RootItem>
 						<controls:BreadcrumbBar.ItemTemplate>
 							<DataTemplate x:DataType="dataitems:PathBoxItem">
-								<controls:BreadcrumbBarItem Content="{x:Bind Title, Mode=OneWay}" />
+								<controls:BreadcrumbBarItem
+									AutomationProperties.AccessibilityView="Content"
+									AutomationProperties.AutomationId="{x:Bind Title, Mode=OneWay}"
+									ChevronToolTip="{helpers:ResourceString Name=BreadcrumbBarChevronButtonToolTip}"
+									Content="{x:Bind Title, Mode=OneWay}"
+									ItemToolTip="{x:Bind Title, Mode=OneWay}" />
 							</DataTemplate>
 						</controls:BreadcrumbBar.ItemTemplate>
 					</controls:BreadcrumbBar>

src/Files.App/UserControls/NavigationToolbar.xaml.cs

@@ -262,7 +262,13 @@ private async void Omnibar_QuerySubmitted(Omnibar sender, OmnibarQuerySubmittedE
 			}
 			else if (Omnibar.CurrentSelectedMode == OmnibarCommandPaletteMode)
 			{
-				if (args.Item is not NavigationBarSuggestionItem item || item.Text is not { } commandText)
+				string commandText = args.Item is NavigationBarSuggestionItem { Text: string itemText }
+					? itemText
+					: args.Text is string text
+						? text
+						: string.Empty;
+
+				if (string.IsNullOrEmpty(commandText))
 					return;
 
 				var command = Commands[commandText];
@@ -276,6 +282,7 @@ await DialogDisplayHelper.ShowDialogAsync(Strings.CommandNotExecutable.GetLocali
 					await command.ExecuteAsync();
 
 				ViewModel.OmnibarCurrentSelectedMode = OmnibarPathMode;
+				ViewModel.OmnibarCommandPaletteModeText = string.Empty;
 			}
 			else if (Omnibar.CurrentSelectedMode == OmnibarSearchMode)
 			{