Skip to content

Commit

Permalink
Ironsides - Move implementation closer to Design's vision (#3284)
Browse files Browse the repository at this point in the history 
* Move rotate button to the title bar

* Updated icons

* Updated UX

* PR feedback, remove Insights and Clipboard Monitor buttons for now

* PR feedback
  • Loading branch information
@timkur
timkur committed Jun 27, 2024
1 parent db4c4ca commit 997a176
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 108 deletions.
155 changes: 75 additions & 80 deletions tools/PI/DevHome.PI/Controls/ExpandedViewControl.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,11 @@

<Grid Margin="16">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock
x:Uid="ExpandedViewHeaderTextBlock" x:Name="ExpandedViewTitleTextBlock" Text="{x:Bind viewModel.Title, Mode=OneWay}"
FontSize="{StaticResource SubtitleTextBlockFontSize}" FontWeight="Bold" FontFamily="Segoe UI"/>

<Grid Grid.Row="1" Margin="0,8,0,0">
<Grid Grid.Row="0" Margin="0,8,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="Auto"/>
Expand Down Expand Up @@ -61,23 +57,7 @@
Visibility="{x:Bind viewModel.AppSettingsVisibility, Mode=OneWay}"
Command="{x:Bind viewModel.DetachFromProcessCommand}"/>
</StackPanel>
<Button
Grid.Row="1" x:Name="SettingsButton" Click="SettingsButton_Click"
BorderThickness="0" Background="Transparent" Margin="4,0,0,0"
HorizontalAlignment="Stretch" VerticalAlignment="Center" HorizontalContentAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock
Text="&#xe713;" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="{StaticResource CaptionTextBlockFontSize}"
HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock
Grid.Column="1" Text="{x:Bind viewModel.SettingsHeader, Mode=OneWay}"
Margin="12,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
</Button>

</Grid>

<toolkit:GridSplitter
Expand All @@ -92,69 +72,84 @@

<Frame x:Name="PageFrame"/>

<Expander
x:Name="ClipboardErrorExpander" Grid.Row="1"
</Grid>
</Grid>

<!-- Bottom section -->
<StackPanel Orientation="Vertical" Grid.Row="2">
<Expander
x:Name="ClipboardErrorExpander"
IsExpanded="False" ExpandDirection="Up"
HorizontalAlignment="Stretch" VerticalAlignment="Top" Padding="0,6"
HorizontalContentAlignment="Stretch">
<Expander.Header>
<TextBlock x:Uid="ClickboardErrorTextBlock" FontSize="{StaticResource CaptionTextBlockFontSize}"/>
</Expander.Header>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}"/>
<Setter Property="Margin" Value="12,0,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,8,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>
<Expander.Header>
<TextBlock x:Uid="ClickboardErrorTextBlock" FontSize="{StaticResource CaptionTextBlockFontSize}"/>
</Expander.Header>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}"/>
<Setter Property="Margin" Value="12,0,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,8,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="HexLabelTextBlock"/>
<TextBox x:Name="ErrorHexTextBox" Grid.Column="1" Text="{x:Bind viewModel.ClipboardContentsHex, Mode=OneWay}"/>
<TextBlock x:Uid="DecLabelTextBlock" Grid.Row="1"/>
<TextBox x:Name="ErrorDecTextBox" Grid.Row="1" Grid.Column="1" Text="{x:Bind viewModel.ClipboardContentsDec, Mode=OneWay}"/>
<TextBlock x:Uid="CodeLabelTextBlock" Grid.Row="2"/>
<TextBox x:Name="ErrorCodeTextBox" Grid.Row="2" Grid.Column="1" Text="{x:Bind viewModel.ClipboardContentsCode, Mode=OneWay}"/>
<TextBlock x:Uid="HelpLabelTextBlock" Grid.Row="3"/>
<TextBox x:Name="ErrorHelpTextBox" Grid.Row="3" Grid.Column="1"
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Uid="HexLabelTextBlock"/>
<TextBox x:Name="ErrorHexTextBox" Grid.Column="1" Text="{x:Bind viewModel.ClipboardContentsHex, Mode=OneWay}"/>
<TextBlock x:Uid="DecLabelTextBlock" Grid.Row="1"/>
<TextBox x:Name="ErrorDecTextBox" Grid.Row="1" Grid.Column="1" Text="{x:Bind viewModel.ClipboardContentsDec, Mode=OneWay}"/>
<TextBlock x:Uid="CodeLabelTextBlock" Grid.Row="2"/>
<TextBox x:Name="ErrorCodeTextBox" Grid.Row="2" Grid.Column="1" Text="{x:Bind viewModel.ClipboardContentsCode, Mode=OneWay}"/>
<TextBlock x:Uid="HelpLabelTextBlock" Grid.Row="3"/>
<TextBox x:Name="ErrorHelpTextBox" Grid.Row="3" Grid.Column="1"
ScrollViewer.HorizontalScrollBarVisibility="Auto" Height="36" Text="{x:Bind viewModel.ClipboardContentsHelp, Mode=OneWay}"/>
</Grid>
</Expander>
</Grid>
</Expander>

<Grid Grid.Row="2">
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}"/>
<Setter Property="Margin" Value="12,0,0,0"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
</StackPanel.Resources>
<TextBlock x:Uid="ExpandedViewTargetAppPidTextBox" Visibility="{x:Bind viewModel.PerfMarkersVisibility, Mode=OneWay}" Text="{x:Bind viewModel.ApplicationPid, Mode=OneWay}"/>
<TextBlock x:Uid="ExpandedViewAppCpuPerf" Visibility="{x:Bind viewModel.PerfMarkersVisibility, Mode=OneWay}" Text="{x:Bind viewModel.CpuUsage, Mode=OneWay}"/>
<TextBlock x:Uid="ExpandedViewAppMemoryPerf" Visibility="{x:Bind viewModel.PerfMarkersVisibility, Mode=OneWay}" Text="{x:Bind viewModel.RamUsage, Mode=OneWay}"/>
<TextBlock x:Uid="ExpandedViewAppDiskPerf" Visibility="{x:Bind viewModel.PerfMarkersVisibility, Mode=OneWay}" Text="{x:Bind viewModel.DiskUsage, Mode=OneWay}"/>
</StackPanel>
</Grid>
<!-- Bottom status bar -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="{StaticResource CaptionTextBlockFontSize}"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="Button">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
</Style>
</Grid.Resources>
<StackPanel Orientation="Horizontal" Grid.Column="0" Spacing="10" Visibility="{x:Bind viewModel.PerfMarkersVisibility, Mode=OneWay}">
<TextBlock x:Uid="ExpandedViewTargetAppPidTextBox" Text="{x:Bind viewModel.ApplicationPid, Mode=OneWay}"/>
<TextBlock x:Uid="ExpandedViewAppCpuPerf" Text="{x:Bind viewModel.CpuUsage, Mode=OneWay}"/>
<TextBlock x:Uid="ExpandedViewAppMemoryPerf" Text="{x:Bind viewModel.RamUsage, Mode=OneWay}"/>
<TextBlock x:Uid="ExpandedViewAppDiskPerf" Text="{x:Bind viewModel.DiskUsage, Mode=OneWay}"/>
</StackPanel>

<Button HorizontalAlignment="Right" Grid.Column="1" Click="SettingsButton_Click">
<TextBlock Text="&#xe713;" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="{StaticResource CaptionTextBlockFontSize}" />
</Button>
</Grid>
</Grid>
</StackPanel>
</Grid>
</UserControl>
32 changes: 28 additions & 4 deletions tools/PI/DevHome.PI/Strings/en-us/Resources.resw
View file
Original file line number Diff line number Diff line change
Expand Up @@ -514,19 +514,19 @@
<comment>Description of the error code</comment>
</data>
<data name="TargetAppPidTextFormat" xml:space="preserve">
<value>pid: {0}</value>
<value>PID: {0}</value>
<comment>{Locked="{0}"} Showing a process identifier. {0} is an integer</comment>
</data>
<data name="CpuPerfTextFormat" xml:space="preserve">
<value>cpu: {0:0.0}%</value>
<value>{0:0.0}% CPU usage</value>
<comment>{Locked="{0:0.0}"} Showing CPU utilization. {0} is a percentage 0-100</comment>
</data>
<data name="MemoryPerfTextFormat" xml:space="preserve">
<value>memory: {0:N2} MB</value>
<value>{0:N2} MB Memory used</value>
<comment>{Locked="{0:N2}"} Showing RAM utilization. MB stands for megabytes. {0} is a number.</comment>
</data>
<data name="DiskPerfTextFormat" xml:space="preserve">
<value>dsk: {0:N0} MB/s</value>
<value>{0:N0} MB/s Disk utilization</value>
<comment>{Locked="{0:N0}"} Showing disk utilization. MB/s stands for megabytes per second. {0} is a number.</comment>
</data>
<data name="CpuPerfNotAvailableText" xml:space="preserve">
Expand Down Expand Up @@ -1013,4 +1013,28 @@
<value>Collapse the large content panel</value>
<comment>The tooltip for a button which collapses the large content panel.</comment>
</data>
<data name="AppName.ToolTipService.ToolTip" xml:space="preserve">
<value>Name of the attached app</value>
<comment>Refers to the app's name in the bar</comment>
</data>
<data name="ClipboardMonitor.ToolTipService.ToolTip" xml:space="preserve">
<value>Open the Clipboard Monitor window</value>
<comment>Tooltip that tells users what the Clipboard Monitor button will do</comment>
</data>
<data name="ClipboardMonitorLabel.Text" xml:space="preserve">
<value>Clipboard Monitor</value>
<comment>A text label for the Clipboard Monitor button</comment>
</data>
<data name="Insights.ToolTipService.ToolTip" xml:space="preserve">
<value>See insights that Project Ironsides has gained</value>
<comment>Tooltip that tells users what the Insights button will do</comment>
</data>
<data name="InsightsLabel.Text" xml:space="preserve">
<value>Insights</value>
<comment>A text label for the Insights button</comment>
</data>
<data name="ProcessesLabel.Text" xml:space="preserve">
<value>Processes</value>
<comment>A text label for the Processes button</comment>
</data>
</root>
25 changes: 23 additions & 2 deletions tools/PI/DevHome.PI/ViewModels/BarWindowViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Diagnostics;
using System.Globalization;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
Expand Down Expand Up @@ -63,6 +64,9 @@ public partial class BarWindowViewModel : ObservableObject
[ObservableProperty]
private bool _isAppBarVisible = true;

[ObservableProperty]
private bool _isProcessChooserVisible = false;

[ObservableProperty]
private Visibility _externalToolSeparatorVisibility = Visibility.Collapsed;

Expand Down Expand Up @@ -106,9 +110,13 @@ public BarWindowViewModel()
SystemDiskUsage = CommonHelper.GetLocalizedString("DiskPerfPercentUsageTextFormatNoLabel", PerfCounters.Instance.SystemDiskUsage);

var process = TargetAppData.Instance.TargetProcess;
IsAppBarVisible = process is not null;
if (process != null)

// Show either the process chooser, or the app bar. Not both
IsProcessChooserVisible = process is null;
IsAppBarVisible = !IsProcessChooserVisible;
if (IsAppBarVisible)
{
Debug.Assert(process is not null, "Process should not be null if we're showing the app bar");
ApplicationName = process.ProcessName;
ApplicationPid = process.Id;
ApplicationIcon = TargetAppData.Instance.Icon;
Expand Down Expand Up @@ -232,6 +240,16 @@ public void ProcessChooser()
barWindow?.NavigateTo(typeof(ProcessListPageViewModel));
}

[RelayCommand]
public void LaunchInsights()
{
ToggleExpandedContentVisibility();

// And navigate to the appropriate page
var barWindow = Application.Current.GetService<PrimaryWindow>().DBarWindow;
barWindow?.NavigateTo(typeof(InsightsPageViewModel));
}

[RelayCommand]
public void ManageExternalToolsButton()
{
Expand Down Expand Up @@ -277,6 +295,9 @@ private void TargetApp_PropertyChanged(object? sender, PropertyChangedEventArgs
ApplicationPid = process.Id;
ApplicationName = process.ProcessName;
}
// Conversely, the process chooser is only visible if we're not attached to a process
IsProcessChooserVisible = process is null;
});
}
else if (e.PropertyName == nameof(TargetAppData.Icon))
Expand Down
13 changes: 8 additions & 5 deletions tools/PI/DevHome.PI/ViewModels/ExpandedViewControlViewModel.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,8 @@ private void AddPagesIfNecessary(Process? process)
if (!Links.Contains(processListNavLink))
{
Links.Add(processListNavLink);
Links.Add(watsonNavLink);
Links.Add(insightsNavLink);
}

// If App Details is missing, add all other pages.
Expand All @@ -210,9 +212,12 @@ private void AddPagesIfNecessary(Process? process)
Links.Insert(0, appDetailsNavLink);
Links.Insert(1, resourceUsageNavLink);
Links.Insert(2, modulesNavLink);
Links.Insert(3, watsonNavLink);
Links.Insert(4, winLogsNavLink);
Links.Insert(6, insightsNavLink);

// Process List #3
// Watson #4
Links.Insert(5, winLogsNavLink);

// Insights #6;
}
}
}
Expand All @@ -225,9 +230,7 @@ private void RemoveAppSpecificPages()
Links.Remove(appDetailsNavLink);
Links.Remove(resourceUsageNavLink);
Links.Remove(modulesNavLink);
Links.Remove(watsonNavLink);
Links.Remove(winLogsNavLink);
Links.Remove(insightsNavLink);
}

public void NavigateTo(Type viewModelType)
Expand Down
Loading

0 comments on commit 997a176

Please sign in to comment.