[side panel] Address clipping issues during entry/exit animation

The current side panel animation relies on layers being clipped by
the BrowserView (the SidePanel width is fixed, the animation
slowly slides it beyond the bounds of the BrowserView).

However the BrowserView paints to the BrowserFrame layer and this
does not always match BrowserView bounds (extended for painting
client-side window shadows for e.g.). This causes the layer children
of the side panel to appear to clip outside the browser's bounds.

This CL adds VisibleBoundsViewClipper which is responsible for
ensuring any immediate layer children of the SidePanel view are
clipped to their visible bounds (within the BrowserView).

This is intended to be a short term fix to address the acute
problem while a more robust means of handling the WebViews content
layer is explored.

Alternatives considered:

  - Make the SidePanel layer-backed and clipped to visible bounds.
    Doesn't work as this introduces a layer subtree and WebView
    content layers are always parented directly to the Widget's layer

  - Refactor SidePanel so children are added to BorderView instead
    and clip only the border. Better but a bigger change and risky
    if a merge is required

Bug: 337056034, 344626785
Change-Id: I656ba668237df88023f42c136b58aeed7e976e7a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5593235
Commit-Queue: Thomas Lukaszewicz <tluk@chromium.org>
Reviewed-by: Caroline Rising <corising@chromium.org>
Code-Coverage: findit-for-me@appspot.gserviceaccount.com <findit-for-me@appspot.gserviceaccount.com>
Cr-Commit-Position: refs/heads/main@{#1309651}