Janky when tab dragging in vertical tab mode

[simonhong]

Description

Tab dragging is quite laggy when there are many tab groups in vertical tab mode.

Screen.Recording.2025-02-18.101016.mp4

Steps to reproduce

1. Enable vertical tab mode
2. Add tabs more than 20
3. Add tab groups more than 10
4. Drag any tab

Actual result

Janky when tab dragging

Expected result

Should be smooth like there is no tab groups.

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Recorded from lastest master.

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

cc @rebron @bsclifton @brave/qa-team

[simonhong]

When replaced below DeprecatedlayoutImmediately() with InvalidateLayout(), this perf issue is fixed.
but got some other UI regressions.

void BraveTabStrip::Layout(PassKey) {
  if (ShouldShowVerticalTabs()) {
    // Chromium implementation limits the height of tab strip, which we don't
    // want.
    auto bounds = GetLocalBounds();
    for (views::View* view : children()) {
      if (view->bounds() != bounds) {
        view->SetBoundsRect(GetLocalBounds());
      } else if (view == &tab_container_.get()) {
        view->DeprecatedLayoutImmediately();
      }
    }
    return;
  }

  LayoutSuperclass<TabStrip>(this);
}

[simonhong]

If we can avoid scroll_view_->SetBoundsRect(bounds); in below, tab dragging goes very smoothly.

void BraveCompoundTabContainer::Layout(PassKey) {
  if (!ShouldShowVerticalTabs()) {
    LayoutSuperclass<CompoundTabContainer>(this);
    return;
  }

  const auto contents_bounds = GetContentsBounds();

  // Pinned container gets however much space it wants.
  pinned_tab_container_->SetBoundsRect(
      gfx::Rect(gfx::Size(contents_bounds.width(),
                          pinned_tab_container_->GetPreferredSize().height())));

  // Unpinned container gets the left over.
  if (scroll_view_) {
    auto bounds = gfx::Rect(
        contents_bounds.x(), pinned_tab_container_->bounds().bottom(), width(),
        contents_bounds.height() - pinned_tab_container_->height());
    scroll_view_->SetBoundsRect(bounds);
    if (scroll_view_->GetMaxHeight() != bounds.height()) {
      scroll_view_->ClipHeightTo(0, scroll_view_->height());
    }

    UpdateUnpinnedContainerSize();
  } else {
    unpinned_tab_container_->SetBoundsRect(
        gfx::Rect(contents_bounds.x(), pinned_tab_container_->bounds().bottom(),
                  contents_bounds.width(),
                  contents_bounds.height() - pinned_tab_container_->height()));
  }
}

[simonhong]

We know why janky during the tab dragging - it's because BraveCompoundTabContainer::Layout() is called so many times.
then why it should be called? I think BraveCompoundTabContainer doesn't need to be re-layout during the tab dragging in the same window because tab dragging doesn't change BraveTabContainer's size. Only need to re-arrange tab's order inside it.
One of the main reason is preferred size change of BraveCompoundTabContainer during the tab dragging.
Interestingly, only its preferred width is slightly changed. Because of that this filtering effectively reduce tab dragging janky. but fundamentaly, layout should not be happened there during the tab dragging.

[kjozwiak]

The above requires 1.77.78 or higher for 1.77.x verification 👍 Labelled as QA/Test-All-Platforms so we can spot check macOS & Linux just to make sure the above didn't cause any noticeable performance issues. Ideally, the bulk of the verification should be completed on Win.

[MadhaviSeelam]

Verification PASSED using

Brave | 1.77.78 Chromium: 134.0.6998.89 (Official Build) beta (64-bit)
-- | --
Revision | 8ce3f15aedbdba27978c618bdd8d578b8a93750e
OS | Windows 11 Version 24H2 (Build 26100.3194)

Verified using STR from the issue #44050 (comment)

Confirmed tab grabbing worked smoothly when there are many tab groups in vertical tab mode

2025-03-12_12h36_32.mp4

[LaurenWags]

Verified with

Brave | 1.77.83 Chromium: 134.0.6998.95 (Official Build) beta (x86_64)
-- | --
Revision | ebd160121bb160e51ae95b772e39e9c5a1dd4fda
OS | macOS Version 14.7.4 (Build 23H420)

Verified STR from description. Generally confirmed tab dragging in vertical tab mode was smooth. Spot checked horizontal tab dragging as well.

vertical.mov

[LaurenWags]

Verified with

Brave | 1.77.85 Chromium: 134.0.6998.118 (Official Build) beta (64-bit)
-- | --
Revision | 979ebc717a0bade18469ac1215f0cc57d27a7912
OS | Linux

Screen.Recording.2025-03-21.at.3.14.38.PM.mov