Move advanced `vertical tab` settings into `brave://settings/appearance`

[kjozwiak]

Description

As discussed via Slack, we should move the more advanced settings for vertical tabs into brave://settings/appearance rather than displaying them within the right click context menu. For example, moving Show title bar & Float on mouseover into brave://settings/appearance.

Steps to Reproduce

1. install 1.52.54 Chromium: 112.0.5615.121
2. right click on a tab and select Use vertical tabs
3. once selected, notice the advanced settings such as Show title bar & Float on mouseover
4. these and anything else related to vertical tabs should be moved into brave://settings/appearance

Actual result:

Expected result:

We should move the more advanced settings into brave://settings/appearance rather than displaying them via the context menu.

https://www.figma.com/file/tLXWGCpNoiJxDZDdpfordj/Desktop-Settings?node-id=3383-67555&t=nZ9X4L2m1MUuTamn-0

Reproduces how often:

100% reproducible using the STR/Cases outlined above.

Brave version (brave://version info)

Brave | 1.52.54 Chromium: 112.0.5615.121 (Official Build) nightly (64-bit)
-- | --
Revision | 39cc4e45904ae9f1741c4fbaa866e629c96f2268-refs/branch-heads/5615_51@{#8}
OS | Windows 11 Version 22H2 (Build 22621.1555)

Version/Channel Information:

• Can you reproduce this issue with the current release? N/A
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? N/A
• Does the issue resolve itself when disabling Brave Rewards? N/A
• Is the issue reproducible on the latest version of Chrome? N/A

Miscellaneous Information:

CCing @rebron

[kjozwiak]

The above requires 1.51.106 or higher for 1.51.x verification 👍

[MadhaviSeelam]

Verification PASSED using

Brave | 1.51.106 Chromium: 113.0.5672.53 (Official Build) (64-bit)
-- | --
Revision | 12f5dac35d12e8f4e72d7dd11df557ef93bc046f-refs/branch-heads/5672@{#703}
OS | Windows 11 Version 22H2 (Build 22621.1555)

• Installed 1.51.106
• launched Brave
• open brave://flags in a new tab

Case 1: Enable #brave-vertical-tabs in brave://flags

1. Enabled #brave-vertical-tabs and clicked Relaunch

2. opened brave://settings/appearance

   • Confirmed following is shown under Tabs section:
     • Confirmed Use vertical tabs settings is displayed and the toggle is disabled as a default
     • Confirmed Show title bar setting is displayed under Use vertical tabs section and unchecked as a default
     • Confirmed Float on mouseover setting is displayed under Use vertical tabs section and is checked as a default
     • Additionally, `Disable mute function in tab speaker icons & Tab hover mode settings are shown
   • Confirmed when Use vertical tabs is enabled in brave://settings/appearance, vertical tab view is shown
   • Confirmed Show title bar & Float on mouseover settings are no longer shown in the context menu
   • Confirmed Use vertical tabs is selected in the context menu
   • Confirmed Float on mouseover is working as expected in the Vertical tab view when checked
   • Confirmed when Float on mouseover unchecked, vertical tab view is shown in expanded/minimized view
   • Confirmed when Show title bar is checked, title is shown

Example	Example	Example	Example	Example

Case 2: Disable #brave-vertical-tabs in brave://flags

1. Disabled #brave-vertical-tabs and clicked Relaunch
2. opened brave://settings/appearance

• Confirmed Use vertical tabs setting is no longer shown in the Tabs section
• Confirmed Show title bar & Float on mouseoverunderUse vertical tabs` section is not shown
• Confirmed Vertical tab view is no longer shown from case 1 and switched to horizonal tab view
  • Confirmed Use vertical tabs settings is not available in the context menu

Example	Example	Example

[LaurenWags]

Added QA/Test-All-Platforms label per discussion with @MadhaviSeelam as the test plan from @sangwoo108 calls out all OSes.

[stephendonner]

Verification PASSED using

Brave	1.51.106 Chromium: 113.0.5672.53 (Official Build) (x86_64)
Revision	12f5dac35d12e8f4e72d7dd11df557ef93bc046f-refs/branch-heads/5672@{#703}
OS	macOS Version 11.7.6 (Build 20G1231)

Shared Steps:

- installed `1.51.106` - launched Brave - opened `brave://flags` in a new tab

Case 1: Enable #brave-vertical-tabs in brave://flags - PASSED

1. Enabled `#brave-vertical-tabs` and clicked Relaunch 2. opened `brave://settings/appearance` - Confirmed following is shown under `Tabs` section: - Confirmed `Use vertical tabs` settings is displayed and the toggle is disabled as a default - Confirmed `Show title bar` setting is displayed under `Use vertical tabs` section and unchecked as a default - Confirmed `Float on mouseover` setting is displayed under `Use vertical tabs` section and is checked as a default - Additionally, `Disable mute function in tab speaker icons & Tab hover mode settings are shown - Confirmed when `Use vertical tabs` is enabled in `brave://settings/appearance`, vertical tab view is shown - Confirmed `Show title bar` & `Float on mouseover` settings are no longer shown in the context menu - Confirmed `Use vertical tabs` is selected in the context menu - Confirmed `Float on mouseover` is working as expected in the Vertical tab view when checked - Confirmed when `Float on mouseover` unchecked, vertical tab view is shown in expanded/minimized view - Confirmed when `Show title bar` is checked, title is shown Example | Example | Example | Example | Example ---- | ----- | ----- | ------ | ------- | | | |

Case 2: Disable #brave-vertical-tabs in brave://flags - PASSED

1. Disabled `#brave-vertical-tabs` and clicked Relaunch 2. opened `brave://settings/appearance` - Confirmed `Use vertical tabs` setting is no longer shown in the `Tabs` section - Confirmed `Show title bar` & Float on mouseover` under `Use vertical tabs` section is not shown - Confirmed Vertical tab view is no longer shown from case 1 and switched to horizonal tab view - Confirmed `Use vertical tabs` settings is not available in the context menu Example | Example | Example ---- | ----- | ----- | |

---

Verification passed on

Brave	1.51.107 Chromium: 113.0.5672.63 (Official Build) (64-bit)
Revision	0e1a4471d5ae5bf128b1bd8f4d627c8cbd55f70c-refs/branch-heads/5672@{#912}
OS	Ubuntu 18.04 LTS

Shared Steps:

- installed `1.51.107` - launched Brave - opened `brave://flags` in a new tab

Case 1: Enable #brave-vertical-tabs in brave://flags - PASSED

1. Enabled `#brave-vertical-tabs` and clicked Relaunch 2. opened `brave://settings/appearance` - Confirmed following is shown under `Tabs` section: - Confirmed `Use vertical tabs` settings is displayed and the toggle is disabled as a default - Confirmed `Show title bar` setting is displayed under `Use vertical tabs` section and unchecked as a default - Confirmed `Float on mouseover` setting is displayed under `Use vertical tabs` section and is checked as a default - Additionally, `Disable mute function in tab speaker icons & Tab hover mode settings are shown - Confirmed when `Use vertical tabs` is enabled in `brave://settings/appearance`, vertical tab view is shown - Confirmed `Show title bar` & `Float on mouseover` settings are no longer shown in the context menu - Confirmed `Use vertical tabs` is selected in the context menu - Confirmed `Float on mouseover` is working as expected in the Vertical tab view when checked - Confirmed when `Float on mouseover` unchecked, vertical tab view is shown in expanded/minimized view - Confirmed when `Show title bar` is checked, title is shown Example | Example ---- | ----- |

Case 2: Disable #brave-vertical-tabs in brave://flags - PASSED

1. Disabled `#brave-vertical-tabs` and clicked Relaunch 2. opened `brave://settings/appearance` - Confirmed `Use vertical tabs` setting is no longer shown in the `Tabs` section - Confirmed `Show title bar` & Float on mouseover` under `Use vertical tabs` section is not shown - Confirmed Vertical tab view is no longer shown from case 1 and switched to horizonal tab view - Confirmed `Use vertical tabs` settings is not available in the context menu Example | Example ---- | ----- |