🎨 Palette: Add Clear Search button to empty state#413
🎨 Palette: Add Clear Search button to empty state#413AhmmedSamier wants to merge 1 commit intomasterfrom
Conversation
Co-authored-by: AhmmedSamier <17784876+AhmmedSamier@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
📝 WalkthroughWalkthroughThe PR documents a design guideline requiring empty states to include accessible actionable recovery controls, and implements this principle by adding a "Clear Search" button to the search interface's empty-state UI. ChangesDesign Guideline & UI Implementation
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
visual-studio-extension/DeepLensVisualStudio/DeepLensVisualStudio/ToolWindows/SearchControl.xaml (1)
458-469: ⚡ Quick winAdd a VS-theme-aware
ControlTemplateto avoid Aero hover bleed-through.The button sets
Background="Transparent"inline but has no customControlTemplate. The default WPF theme template takes over on hover/press — it swapsBorder.BackgroundwhenIsMouseOver/IsPressedare true, replacing your custom background. In practice this means the Aero-theme light-blue (#FFBEE6FD) hover color will flash over the transparent background, which is visually jarring against VS dark/blue themes that the rest of the control uses VS brushes for.The existing
ActionButtonStyle(line 89) handles this correctly with an explicitControlTemplate+Style.Triggers. Consider a similar inline style for this text button:🎨 Proposed fix: inline `ControlTemplate` to honour VS theme brushes on hover
<Button Margin="0,12,0,0" Padding="12,6" HorizontalAlignment="Center" - Background="Transparent" - BorderBrush="{DynamicResource {x:Static vsshell:VsBrushes.ToolWindowBorderKey}}" - BorderThickness="1" Click="ClearSearchButton_Click" Content="Clear Search" Cursor="Hand" - Foreground="{DynamicResource {x:Static vsshell:VsBrushes.ToolWindowTextKey}}" - AutomationProperties.Name="Clear search" /> + AutomationProperties.Name="Clear search"> + <Button.Style> + <Style TargetType="Button"> + <Setter Property="Background" Value="Transparent" /> + <Setter Property="BorderBrush" + Value="{DynamicResource {x:Static vsshell:VsBrushes.ToolWindowBorderKey}}" /> + <Setter Property="BorderThickness" Value="1" /> + <Setter Property="Foreground" + Value="{DynamicResource {x:Static vsshell:VsBrushes.ToolWindowTextKey}}" /> + <Setter Property="Template"> + <Setter.Value> + <ControlTemplate TargetType="Button"> + <Border + x:Name="Bd" + Padding="{TemplateBinding Padding}" + Background="{TemplateBinding Background}" + BorderBrush="{TemplateBinding BorderBrush}" + BorderThickness="{TemplateBinding BorderThickness}" + CornerRadius="3"> + <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /> + </Border> + <ControlTemplate.Triggers> + <Trigger Property="IsMouseOver" Value="True"> + <Setter TargetName="Bd" Property="Background" + Value="{DynamicResource {x:Static vsshell:VsBrushes.CommandBarHoverKey}}" /> + </Trigger> + <Trigger Property="IsPressed" Value="True"> + <Setter TargetName="Bd" Property="Background" + Value="{DynamicResource {x:Static vsshell:VsBrushes.HighlightKey}}" /> + </Trigger> + </ControlTemplate.Triggers> + </ControlTemplate> + </Setter.Value> + </Setter> + </Style> + </Button.Style> +</Button>If this pattern is needed in more places, extract it as a named
OutlineButtonStyleresource (similar to howActionButtonStyleis defined).🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@visual-studio-extension/DeepLensVisualStudio/DeepLensVisualStudio/ToolWindows/SearchControl.xaml` around lines 458 - 469, The Clear Search Button uses Background="Transparent" but no ControlTemplate, so WPF's default hover/press visual (Aero light-blue) bleeds through; replace the inline attributes on the Button (the one with Click="ClearSearchButton_Click" and Content="Clear Search") with an inline Style that defines a ControlTemplate (copy the pattern from ActionButtonStyle) where a Border's Background is TemplateBound to Background and Style.Triggers for IsMouseOver/IsPressed set the Border.Background and BorderBrush to VS theme brushes (DynamicResource vsshell:VsBrushes.ToolWindowBackgroundKey / ToolWindowBorderKey / ToolWindowTextKey as appropriate); optionally extract that Style as a named resource (e.g., OutlineButtonStyle) if reused elsewhere.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.jules/palette.md:
- Line 1: Update the documentation header string "## 2025-05-04 - Actionable
Empty States" to the correct date "## 2026-05-04 - Actionable Empty States" in
.jules/palette.md so the entry reflects the PR creation date; locate and replace
that exact header line.
---
Nitpick comments:
In
`@visual-studio-extension/DeepLensVisualStudio/DeepLensVisualStudio/ToolWindows/SearchControl.xaml`:
- Around line 458-469: The Clear Search Button uses Background="Transparent" but
no ControlTemplate, so WPF's default hover/press visual (Aero light-blue) bleeds
through; replace the inline attributes on the Button (the one with
Click="ClearSearchButton_Click" and Content="Clear Search") with an inline Style
that defines a ControlTemplate (copy the pattern from ActionButtonStyle) where a
Border's Background is TemplateBound to Background and Style.Triggers for
IsMouseOver/IsPressed set the Border.Background and BorderBrush to VS theme
brushes (DynamicResource vsshell:VsBrushes.ToolWindowBackgroundKey /
ToolWindowBorderKey / ToolWindowTextKey as appropriate); optionally extract that
Style as a named resource (e.g., OutlineButtonStyle) if reused elsewhere.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5087a88b-abcc-4242-845e-02abcb42726f
📒 Files selected for processing (2)
.jules/palette.mdvisual-studio-extension/DeepLensVisualStudio/DeepLensVisualStudio/ToolWindows/SearchControl.xaml
| @@ -0,0 +1,3 @@ | |||
| ## 2025-05-04 - Actionable Empty States | |||
There was a problem hiding this comment.
Incorrect year in the documentation date — should be 2026-05-04.
The PR was created on 2026-05-04, but the entry header reads 2025-05-04.
📝 Proposed fix
-## 2025-05-04 - Actionable Empty States
+## 2026-05-04 - Actionable Empty States📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ## 2025-05-04 - Actionable Empty States | |
| ## 2026-05-04 - Actionable Empty States |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.jules/palette.md at line 1, Update the documentation header string "##
2025-05-04 - Actionable Empty States" to the correct date "## 2026-05-04 -
Actionable Empty States" in .jules/palette.md so the entry reflects the PR
creation date; locate and replace that exact header line.
1 participant
💡 What: Added a 'Clear Search' button directly to the empty state view when no search results are found.
🎯 Why: To reduce friction by providing an immediate, actionable recovery path for users when a search yields zero results, preventing them from having to manually clear the input field.
📸 Before/After: Visual change in the SearchControl.xaml empty state view.
♿ Accessibility: The button is fully keyboard accessible, uses proper hover styling (Cursor="Hand"), and includes an AutomationProperties.Name label for screen readers.
PR created automatically by Jules for task 16140783888082476126 started by @AhmmedSamier
Summary by CodeRabbit
New Features
Documentation