Skip to content

uniform browser tabs #1057

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wieslawsoltes merged 7 commits into from
Feb 19, 2026
Merged

uniform browser tabs #1057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7f05794
initial implementation of uniforms browser tab behavior.
danwalmsley Feb 18, 2026
4740d80
animate the tab resize.
danwalmsley Feb 18, 2026
cb1f49f
resize and animation behavior polish
danwalmsley Feb 18, 2026
668454e
keep add button with the tabs.
danwalmsley Feb 18, 2026
d362e9c
polish tab item separators.
danwalmsley Feb 19, 2026
aa7968c
disable scrollbar in browser tabs.
danwalmsley Feb 19, 2026
aa6ef98
fix tests.
danwalmsley Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions src/Dock.Avalonia.Themes.Browser/Styles/BrowserTabAccents.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard"
xmlns:platform="clr-namespace:Avalonia.Platform;assembly=Avalonia.Controls"
xmlns:core="using:Dock.Model.Core">
xmlns:core="using:Dock.Model.Core"
xmlns:controls="using:Dock.Avalonia.Controls">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<!-- Token-first brushes -->
Expand All @@ -12,10 +13,12 @@
<StaticResource x:Key="DockSurfacePanelBrush" ResourceKey="DockSurfaceWorkbenchBrush" />
<SolidColorBrush x:Key="DockSurfaceHeaderBrush">#D7DFEC</SolidColorBrush>
<SolidColorBrush x:Key="DockSurfaceHeaderActiveBrush">#2F6FDC</SolidColorBrush>
<StaticResource x:Key="DockDocumentTabStripMaskBrush" ResourceKey="DockSurfaceHeaderBrush" />

<StaticResource x:Key="DockBorderSubtleBrush" ResourceKey="DockSurfaceHeaderBrush" />
<SolidColorBrush x:Key="DockBorderStrongBrush">#CBD9F2</SolidColorBrush>
<StaticResource x:Key="DockSeparatorBrush" ResourceKey="DockBorderSubtleBrush" />
<SolidColorBrush x:Key="DockDocumentTabItemSeparatorBrush">#CC000000</SolidColorBrush>
<StaticResource x:Key="DockSplitterIdleBrush" ResourceKey="DockBorderSubtleBrush" />
<SolidColorBrush x:Key="DockSplitterHoverBrush">#4D87E7</SolidColorBrush>
<SolidColorBrush x:Key="DockSplitterDragBrush">#2F6FDC</SolidColorBrush>
Expand Down Expand Up @@ -60,10 +63,12 @@
<StaticResource x:Key="DockSurfacePanelBrush" ResourceKey="DockSurfaceWorkbenchBrush" />
<SolidColorBrush x:Key="DockSurfaceHeaderBrush">#334055</SolidColorBrush>
<SolidColorBrush x:Key="DockSurfaceHeaderActiveBrush">#5C9BFF</SolidColorBrush>
<StaticResource x:Key="DockDocumentTabStripMaskBrush" ResourceKey="DockSurfaceHeaderBrush" />

<StaticResource x:Key="DockBorderSubtleBrush" ResourceKey="DockSurfaceHeaderBrush" />
<SolidColorBrush x:Key="DockBorderStrongBrush">#415271</SolidColorBrush>
<StaticResource x:Key="DockSeparatorBrush" ResourceKey="DockBorderSubtleBrush" />
<SolidColorBrush x:Key="DockDocumentTabItemSeparatorBrush">#CCFFFFFF</SolidColorBrush>
<StaticResource x:Key="DockSplitterIdleBrush" ResourceKey="DockBorderSubtleBrush" />
<SolidColorBrush x:Key="DockSplitterHoverBrush">#4C89E8</SolidColorBrush>
<SolidColorBrush x:Key="DockSplitterDragBrush">#5C9BFF</SolidColorBrush>
Expand Down Expand Up @@ -112,6 +117,8 @@
<!-- Size/density tokens -->
<sys:Double x:Key="DockTabItemMinHeight">24</sys:Double>
<sys:Double x:Key="DockDocumentTabItemMinHeight">28</sys:Double>
<sys:Double x:Key="DockDocumentTabItemMinWidth">28</sys:Double>
<sys:Double x:Key="DockDocumentTabItemSeparatorOpacity">0.55</sys:Double>
<sys:Double x:Key="DockToolTabItemMinHeight">0</sys:Double>
<sys:Double x:Key="DockDocumentTabStripMinHeight">28</sys:Double>
<OnPlatform x:Key="DockHostWindowChromeHints"
Expand Down Expand Up @@ -168,6 +175,12 @@
<StaticResource x:Key="DockDocumentContentBorderBrush" ResourceKey="DockBorderSubtleBrush" />
<Thickness x:Key="DockDocumentContentBorderThickness">0</Thickness>
<ItemsPanelTemplate x:Key="DockDocumentTabStripHorizontalItemsPanel">
<WrapPanel Orientation="Horizontal" ClipToBounds="False" ItemSpacing="4" LineSpacing="4" />
<controls:DelayedUniformTabPanel ClipToBounds="False"
MaxTabWidth="220"
MinTabWidth="28"
ItemSpacing="-6"
ExpansionDelay="0:0:1"
ResizeAnimationDuration="0:0:0.18" />
</ItemsPanelTemplate>

</ResourceDictionary>
78 changes: 78 additions & 0 deletions src/Dock.Avalonia.Themes.Browser/Styles/BrowserTabTheme.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,82 @@
</ResourceDictionary>
</Styles.Resources>

<Style Selector="DocumentTabStripItem">
<Setter Property="ClipToBounds" Value="False" />
</Style>

<Style Selector="DocumentTabStripItem /template/ Border#PART_TabSeparatorRight">
<Setter Property="IsVisible" Value="True" />
<Setter Property="Background" Value="{DynamicResource DockDocumentTabItemSeparatorBrush}" />
<Setter Property="Opacity" Value="{DynamicResource DockDocumentTabItemSeparatorOpacity}" />
</Style>

<Style Selector="DocumentTabStripItem /template/ Border#PART_TabGutter">
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="Transparent" />
</Style>

<Style Selector="DocumentTabStripItem /template/ Border#PART_TabBody">
<Setter Property="Margin" Value="3,0,3,0" />
</Style>

<Style Selector="DocumentTabStripItem:selected">
<Setter Property="(Panel.ZIndex)" Value="3" />
</Style>

<Style Selector="DocumentTabStripItem:pointerover">
<Setter Property="(Panel.ZIndex)" Value="2" />
</Style>

<Style Selector="DocumentTabStripItem:selected /template/ Border#PART_TabGutter">
<Setter Property="Margin" Value="-3,0,-2,0" />
<Setter Property="Background" Value="{DynamicResource DockDocumentTabStripMaskBrush}" />
</Style>

<Style Selector="DocumentTabStripItem:pointerover /template/ Border#PART_TabGutter">
<Setter Property="Margin" Value="-4,0,-2,0" />
<Setter Property="Background" Value="{DynamicResource DockDocumentTabStripMaskBrush}" />
</Style>

<!-- Compensate for active gutter expansion so tab content/body does not shift on hover/selection. -->
<Style Selector="DocumentTabStripItem:selected /template/ Border#PART_TabBody">
<Setter Property="Margin" Value="6,0,5,0" />
</Style>

<Style Selector="DocumentTabStripItem:pointerover /template/ Border#PART_TabBody">
<Setter Property="Margin" Value="7,0,5,0" />
</Style>

<Style Selector="DocumentTabStripItem:selected /template/ Border#PART_TabSeparatorRight">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="DocumentTabStripItem:pointerover /template/ Border#PART_TabSeparatorRight">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="DocumentTabStripItem /template/ ContentPresenter#PART_ClosePresenter">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="DocumentTabStripItem:selected /template/ ContentPresenter#PART_ClosePresenter">
<Setter Property="IsVisible" Value="True" />
</Style>

<Style Selector="DocumentTabStripItem:pointerover /template/ ContentPresenter#PART_ClosePresenter">
<Setter Property="IsVisible" Value="True" />
</Style>

<Style Selector="DocumentTabStripItem:ultracompact:selected /template/ ContentPresenter#PART_CompactClosePresenter">
<Setter Property="IsVisible" Value="True" />
</Style>

<Style Selector="DocumentTabStripItem:ultracompact:selected /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="DocumentTabStrip[Orientation=Horizontal] /template/ ScrollViewer#PART_ScrollViewer">
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
</Style>

</Styles>
2 changes: 2 additions & 0 deletions src/Dock.Avalonia.Themes.Fluent/Accents/Fluent.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,11 @@

<sys:Double x:Key="DockTabItemMinHeight">24</sys:Double>
<sys:Double x:Key="DockDocumentTabItemMinHeight">24</sys:Double>
<sys:Double x:Key="DockDocumentTabItemMinWidth">64</sys:Double>
<sys:Double x:Key="DockToolTabItemMinHeight">0</sys:Double>
<sys:Double x:Key="DockDocumentTabStripMinHeight">0</sys:Double>
<sys:Double x:Key="DockDocumentTabStripLeadingSpacerWidth">0</sys:Double>
<sys:Double x:Key="DockDocumentTabItemSeparatorOpacity">0</sys:Double>
<Thickness x:Key="DockDocumentTabItemMargin">0</Thickness>
<Thickness x:Key="DockDocumentTabItemPadding">4,0,4,0</Thickness>
<CornerRadius x:Key="DockDocumentTabItemCornerRadius">0</CornerRadius>
Expand Down
4 changes: 3 additions & 1 deletion src/Dock.Avalonia.Themes.Fluent/Controls/DocumentTabStrip.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@
<DockPanel Grid.Row="1"
Grid.Column="1"
ClipToBounds="False">
<Panel DockPanel.Dock="Left"
<Panel x:Name="PART_LeadingSpacer"
DockPanel.Dock="Left"
Width="{DynamicResource DockDocumentTabStripLeadingSpacerWidth}"
Height="1" />
<Panel Name="PART_Panel">
Expand All @@ -124,6 +125,7 @@
<ContentControl x:Name="PART_CreateButtonHost"
Content="{Binding}"
IsVisible="{Binding CanCreateDocument}" />
<Panel Name="PART_TrailingFill" />
</DockPanel>
</Grid>
</ControlTemplate>
Expand Down
122 changes: 86 additions & 36 deletions src/Dock.Avalonia.Themes.Fluent/Controls/DocumentTabStripItem.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,7 @@
<Setter Property="(TextElement.FontSize)" Value="{DynamicResource DockFontSizeNormal}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="MinHeight" Value="{DynamicResource DockDocumentTabItemMinHeight}" />
<Setter Property="MinWidth" Value="{DynamicResource DockDocumentTabItemMinWidth}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource DockTabForegroundBrush}" />
Expand All @@ -326,44 +327,72 @@

<Setter Property="Template">
<ControlTemplate>
<Panel>
<Border Background="{TemplateBinding Background}"
TextElement.FontFamily="{TemplateBinding FontFamily}"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.FontWeight="{TemplateBinding FontWeight}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ContextMenu="{TemplateBinding DocumentContextMenu}"
Padding="{TemplateBinding Padding}"
CornerRadius="{TemplateBinding CornerRadius}"
DockProperties.IsDragArea="True"
DockProperties.IsDropArea="True"
DockProperties.IsDockTarget="True"
DockProperties.ShowDockIndicatorOnly="True"
DockProperties.IndicatorDockOperation="Fill">
<DockableControl TrackingMode="Tab"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<DockPanel Background="Transparent">
<StackPanel Background="Transparent"
Orientation="Horizontal"
Spacing="{DynamicResource DockTabContentSpacing}">
<StackPanel Margin="{DynamicResource DockTabContentMargin}"
Orientation="Horizontal"
Spacing="{DynamicResource DockDocumentTabHeaderContentSpacing}">
<ContentPresenter ContentTemplate="{Binding $parent[DocumentControl].IconTemplate}"
<Panel Background="{DynamicResource DockDocumentTabStripMaskBrush}">
<Border x:Name="PART_TabGutter"
Background="Transparent">
<Border x:Name="PART_TabBody"
Background="{TemplateBinding Background}"
TextElement.FontFamily="{TemplateBinding FontFamily}"
TextElement.FontSize="{TemplateBinding FontSize}"
TextElement.FontWeight="{TemplateBinding FontWeight}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
ContextMenu="{TemplateBinding DocumentContextMenu}"
Padding="{TemplateBinding Padding}"
CornerRadius="{TemplateBinding CornerRadius}"
DockProperties.IsDragArea="True"
DockProperties.IsDropArea="True"
DockProperties.IsDockTarget="True"
DockProperties.ShowDockIndicatorOnly="True"
DockProperties.IndicatorDockOperation="Fill">
<DockableControl TrackingMode="Tab"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<DockPanel Background="Transparent">
<Grid Background="Transparent"
ColumnDefinitions="*,Auto"
ColumnSpacing="{DynamicResource DockTabContentSpacing}">
<StackPanel Grid.Column="0"
x:Name="PART_HeaderHost"
Margin="{DynamicResource DockTabContentMargin}"
Orientation="Horizontal"
Spacing="{DynamicResource DockDocumentTabHeaderContentSpacing}"
ClipToBounds="True">
<Grid x:Name="PART_IconCloseHost"
ClipToBounds="False">
<ContentPresenter x:Name="PART_IconPresenter"
ContentTemplate="{Binding $parent[DocumentControl].IconTemplate}"
Content="{Binding}" />
<ContentPresenter x:Name="PART_CompactClosePresenter"
IsVisible="False"
ContentTemplate="{Binding $parent[DocumentControl].CloseTemplate}"
Content="{Binding}" />
</Grid>
<ContentPresenter x:Name="PART_HeaderPresenter"
ContentTemplate="{Binding $parent[DocumentControl].HeaderTemplate}"
Content="{Binding}" />
<ContentPresenter x:Name="PART_ModifiedPresenter"
ContentTemplate="{Binding $parent[DocumentControl].ModifiedTemplate}"
IsVisible="{Binding IsModified}"
Content="{Binding}" />
</StackPanel>
<ContentPresenter x:Name="PART_ClosePresenter"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="{DynamicResource DockTabContentMargin}"
ContentTemplate="{Binding $parent[DocumentControl].CloseTemplate}"
Content="{Binding}" />
<ContentPresenter ContentTemplate="{Binding $parent[DocumentControl].HeaderTemplate}"
Content="{Binding}" />
</StackPanel>
<ContentPresenter ContentTemplate="{Binding $parent[DocumentControl].ModifiedTemplate}"
IsVisible="{Binding IsModified}"
Content="{Binding}" />
<ContentPresenter ContentTemplate="{Binding $parent[DocumentControl].CloseTemplate}"
Content="{Binding}" />
</StackPanel>
</DockPanel>
</DockableControl>
</Grid>
</DockPanel>
</DockableControl>
</Border>
</Border>
<Border x:Name="PART_TabSeparatorRight"
IsHitTestVisible="False"
Width="1"
Margin="0,7,0,7"
HorizontalAlignment="Right"
VerticalAlignment="Stretch" />
</Panel>
</ControlTemplate>
</Setter>
Expand Down Expand Up @@ -402,6 +431,27 @@
<Setter Property="Foreground" Value="{DynamicResource DockDocumentTabPointerOverForegroundBrush}" />
</Style>

<Style Selector="^/template/ Border#PART_TabSeparatorRight">
<Setter Property="Background" Value="{DynamicResource DockSeparatorBrush}" />
<Setter Property="Opacity" Value="{DynamicResource DockDocumentTabItemSeparatorOpacity}" />
</Style>

<Style Selector="^:ultracompact /template/ ContentPresenter#PART_ClosePresenter">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="^:ultracompact /template/ ContentPresenter#PART_CompactClosePresenter">
<Setter Property="IsVisible" Value="False" />
</Style>

<Style Selector="^:ultracompact:pointerover /template/ ContentPresenter#PART_CompactClosePresenter">
<Setter Property="IsVisible" Value="True" />
</Style>

<Style Selector="^:ultracompact:pointerover /template/ ContentPresenter#PART_IconPresenter">
<Setter Property="IsVisible" Value="False" />
</Style>

</ControlTheme>

</ResourceDictionary>
Loading
Loading