[Inspector V2] Widget properties tab highlight extends past its rounded edge

[loic-sharma]

The inspector has rounded edge around the tabs:

If I hover on the Widget properties tab, the highlight incorrectly extends past the rounded corner:

[elliette]

I don't think this is specific to the Inspector but affecting all screens that used DevTools custom tabbed container widget.

[theprantadutta]

Hi — I'd like to take this on if it's still open. Based on @elliette's note that this affects the shared DevTools tabbed-container widget rather than being Inspector-specific, my plan is:

1. Locate the custom tabbed-container widget and confirm the bug reproduces on the current master.
2. Identify whether the hover/highlight is painted by an InkWell, Material ink ripple, or a custom Container decoration, and clip it to the container's rounded shape (e.g. matching borderRadius on the Material/InkWell, or a ClipRRect wrapper).
3. Add a widget test (or golden, whichever pattern this widget already uses) verifying the highlight stays inside the rounded bounds.

Happy to defer if you'd prefer to handle this internally, or to take a different approach. Otherwise I'll investigate and report back here before opening a PR.

[theprantadutta]

Following up on my comment from May — I dug into this on current master and I actually can't reproduce it anymore.

To make it observable I built a reduced harness around AnalyticsTabbedView (the shared tabbed container @elliette pointed to): pump it in a widget test, hover the first tab with a mouse TestGesture, and capture the rendered pixels via RepaintBoundary.toImage from above the ancestor Material (so ink painted there would be included). On current master with Flutter 3.44.4 stable, the hover highlight is clipped to the rounded corner correctly — pixel inspection shows the highlight tint following the border arc precisely, with the wedge outside the arc staying at the background color.

Notably, the DevTools code here hasn't changed since the report (RoundedOutlinedBorder(clip: true) in tab.dart predates it) — the highlight used to escape because ink effects paint on the nearest ancestor Material, historically ignoring intermediate clips like this ClipRRect. So this looks like it was fixed by a framework-side ink/overlay clipping change that has since rolled into the SDK, rather than by anything in this repo — and DevTools pins a newer master candidate than the stable I tested on.

Suggest verifying in the live app on a recent build and closing if it looks good. Happy to dig further if anyone still sees it on a current build.