Fix crash when vertical tabs are displayed with certain themes

[zenparsing]

Resolves brave/brave-browser#33598

This change avoids the problem by not displaying theme backgrounds on the new tab button and tabs when in vertical tabs mode.

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run lint, npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

• enable vertical tabs via brave://settings/appearance
• attempt installing https://chrome.google.com/webstore/detail/slinky-elegant/bmanlajnpdncmhfkiccmbgeocgbncfln
• browser should not crash

[petemill]

I guess that's fine to solve the crash. Themeing with vertical tabs is harder and we can perfect it later perhaps @zenparsing @sangwoo108?

[zenparsing]

@petemill @sangwoo108 Ideally, this would be solved by moving the vertical tabstrip under BrowserView. Is that possible, or is there some factor that prevents it?

[bsclifton]

Verified this works great locally - change makes sense

Will defer actual approval to @sangwoo108 😄

[sangwoo108]

LGTM 👍 Thank you so much @zenparsing !

[sangwoo108]

@petemill @sangwoo108 Ideally, this would be solved by moving the vertical tabstrip under BrowserView. Is that possible, or is there some factor that prevents it?

For now we need a dedicated widget so that vertical tabs can get mouse events correctly even when it's on top of web contents area. brave/brave-browser#26891

[kjozwiak]

Verification PASSED on Win 11 x64 using the following build(s):

Brave | 1.61.21 Chromium: 118.0.5993.70 (Official Build) nightly (64-bit)
-- | --
Revision | ce51937f5b035db1f8c8173fc36df9140494d59a
OS | Windows 11 Version 22H2 (Build 22621.2428)

Using the STR/Cases outlined via brave/brave-browser#33598 (comment), ensured that Brave doesn't crash when Vertical Tabs are enabled and certain themes are used as per the following: