Update brave://settings/appearance with section titles and better grouping #33128

rebron · 2023-09-20T00:11:33Z

Description

Update brave://settings/appearance page with sub-titles and grouping.
This will bring the Brave Wallet button show/hide to the appearance page from web3 section.
Add section titles for Address bar, Tabs, Sidebar, and Content.
Figma link: https://www.figma.com/file/IXNCYwXmMWaF6u7Pdv1pOW/Desktop-settings---Leo?type=design&node-id=1-17&mode=design&t=k9wGm2Ix9QSrfSZB-0

Design:

Reproduces how often:

Easily.

Brave version (brave://version info)

Target 1.60.x

Version/Channel Information:

Can you reproduce this issue with the current release? yes
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:

Related pr: brave/brave-core#20160

The text was updated successfully, but these errors were encountered:

simonhong · 2023-10-04T03:36:27Z

Working on this.

kjozwiak · 2023-10-18T01:35:15Z

@brave/qa-team you can use brave/brave-core#20409 (comment) as a template. The above requires 1.60.95 or higher for 1.60.x verification 👍

GeetaSarvadnya · 2023-10-18T16:14:42Z

Verification PASSED on

Brave | 1.60.95 Chromium: 118.0.5993.88 (Official Build) beta (64-bit)
-- | --
Revision | d65c9c374e175c06c50025db46cf953fd200e9cc
OS | Windows 10 Version 22H2 (Build 19045.3570)

Basically using the information & screenshots examples from brave/brave-core#20409 (comment), ensured the following:

ensured that the new brave://settings/appearance grouping matches the examples from Update settings appearance grouping brave-core#20409 (comment) & https://www.figma.com/file/IXNCYwXmMWaF6u7Pdv1pOW/Desktop-settings---Nala?type=design&node-id=1-17&mode=design&t=y5GTL3Vs121di4m5-0
- the title should be Toolbar and not Address Bar (Figma and some other screenshots are showing Address Bar)
went through most of the settings via brave://settings/appearance and ensured that everything is working
- ensured there was no obvious crashes/visual issues when enabling/disabling various features
ensured that vertical lines overlapping under brave://settings/appearance in Tabs section #30100 was fixed/address via Vertical Tabs grouping
ensured that Leo is now underneath Web3
ensured that the correct logo/branding is being used under brave://settings
- bottom About Brave logo that points to brave://settings/help
ensured that the redundant Settings text is removed from navigation menu on the left via brave://settings
ensured that Always show toolbar in fullscreen is NOT displayed on Windows, it shows only on macOS via the Toolbar grouping

`Vertical Tabs` using `Light` theme

`Example`	`Example`

`Vertical Tabs` using `Dark` theme

`Example`	`Example`

`Horizontal Tabs` using `Light` theme

`Example`	`Example`

`Horizontal Tabs` using `Dark` theme

`Example`	`Example`

`Leo` position (below `Web3`)

`Example`	`Example`

Removing `Setting` text from navigation via `brave://settings`

`Old`	`New`

`Always show toolbar in fullscreen` only appearing under `macOS` via `Toolbar`

stephendonner · 2023-10-30T18:50:09Z

Verification `PASSED` using

Brave | 1.60.106 Chromium: 119.0.6045.59 (Official Build) (x86_64)
-- | --
Revision | 16064193dde8c55f64dabd32f125c0cd9380f96a
OS | macOS Version 14.2 (Build 23C5030f)

Basically using the information & screenshots examples from brave/brave-core#20409 (comment), ensured the following:

ensured that the new brave://settings/appearance grouping matches the examples from Update settings appearance grouping brave-core#20409 (comment) & https://www.figma.com/file/IXNCYwXmMWaF6u7Pdv1pOW/Desktop-settings---Nala?type=design&node-id=1-17&mode=design&t=y5GTL3Vs121di4m5-0
- the title should be Toolbar and not Address Bar (Figma and some other screenshots are showing Address Bar)
went through most of the settings via brave://settings/appearance and ensured that everything is working
- ensured there was no obvious crashes/visual issues when enabling/disabling various features
ensured that vertical lines overlapping under brave://settings/appearance in Tabs section #30100 was fixed/address via Vertical Tabs grouping
ensured that Leo is now underneath Web3
ensured that the correct logo/branding is being used under brave://settings
- bottom About Brave logo that points to brave://settings/help
ensured that the redundant Settings text is removed from navigation menu on the left via brave://settings
ensured that Always show toolbar in fullscreen is NOT displayed on Windows, it shows only on macOS via the Toolbar grouping

`Vertical Tabs` using `Light` theme

`Example`	`Example`

`Vertical Tabs` using `Dark` theme

`Example`	`Example`

`Horizontal Tabs` using `Light` theme

`Example`	`Example`

`Horizontal Tabs` using `Dark` theme

`Example`	`Example`

`Leo` position (below `Web3`)

`Example`	`Example`

Removing `Setting` text from navigation via `brave://settings`

`Old`	`New`

`Always show toolbar in fullscreen` only appearing under `macOS` via `Toolbar`

example	example

btlechowski · 2023-11-01T20:56:59Z

Verified with

Brave	1.60.110 Chromium: 119.0.6045.105 (Official Build) (64-bit)
Revision	0bb6e7a81aed340b5a9e8b752c1cf92768257c40
OS	Linux

Basically using the information & screenshots examples from brave/brave-core#20409 (comment), ensured the following:

ensured that the new brave://settings/appearance grouping matches the examples from Update settings appearance grouping brave-core#20409 (comment) & https://www.figma.com/file/IXNCYwXmMWaF6u7Pdv1pOW/Desktop-settings---Nala?type=design&node-id=1-17&mode=design&t=y5GTL3Vs121di4m5-0
- the title should be Toolbar and not Address Bar (Figma and some other screenshots are showing Address Bar)
went through most of the settings via brave://settings/appearance and ensured that everything is working
- ensured there was no obvious crashes/visual issues when enabling/disabling various features
ensured that vertical lines overlapping under brave://settings/appearance in Tabs section #30100 was fixed/address via Vertical Tabs grouping
ensured that Leo is now underneath Web3
ensured that the correct logo/branding is being used under brave://settings
- bottom About Brave logo that points to brave://settings/help
ensured that the redundant Settings text is removed from navigation menu on the left via brave://settings
ensured that Always show toolbar in fullscreen is NOT displayed on Windows, it shows only on macOS via the Toolbar grouping

`Vertical Tabs` using `Light` theme

`Example`	`Example`

`Vertical Tabs` using `Dark` theme

`Horizontal Tabs` using `Light` theme

`Example`	`Example`

`Horizontal Tabs` using `Dark` theme

`Example`	`Example`

`Leo` position (below `Web3`)

`Example`	`Example`

Removing `Setting` text from navigation via `brave://settings`

rebron added OS/Desktop feature/settings labels Sep 20, 2023

rebron changed the title ~~Update brave://settings/appearance with sub-titles and grouping~~ Update brave://settings/appearance with section titles and better grouping Sep 20, 2023

rebron added the priority/P3 The next thing for us to work on. It'll ride the trains. label Sep 20, 2023

rebron assigned simonhong Sep 20, 2023

rebron added QA/Yes release-notes/exclude labels Sep 20, 2023

rebron mentioned this issue Sep 20, 2023

[META] Improve brave://settings with updates to order and placement of several new settings #16621

Open

13 tasks

simonhong mentioned this issue Oct 5, 2023

Update settings appearance grouping brave/brave-core#20409

Merged

25 tasks

simonhong closed this as completed in brave/brave-core#20409 Oct 11, 2023

brave-builds added feature/web3/wallet Integrating Ethereum+ wallet support feature/web3/wallet/core labels Oct 11, 2023

brave-builds added this to the 1.61.x - Nightly milestone Oct 11, 2023

brave-builds mentioned this issue Oct 16, 2023

Update settings appearance grouping (uplift to 1.60.x) brave/brave-core#20555

Merged

7 tasks

brave-builds modified the milestones: 1.61.x - Nightly, 1.60.x - Beta Oct 18, 2023

kjozwiak added the QA/Test-All-Platforms label Oct 18, 2023

kjozwiak mentioned this issue Oct 18, 2023

vertical lines overlapping under brave://settings/appearance in Tabs section #30100

Closed

GeetaSarvadnya added QA Pass-Win64 and removed feature/web3/wallet Integrating Ethereum+ wallet support feature/web3/wallet/core labels Oct 19, 2023

GeetaSarvadnya mentioned this issue Oct 25, 2023

Upgrade from Chromium 118 to Chromium 119 #33274

Closed

stephendonner added the QA Pass-macOS label Oct 30, 2023

stephendonner mentioned this issue Nov 1, 2023

Upgrade from Chromium 119.0.6045.66 to Chromium 119.0.6045.105 #34024

Closed

btlechowski added the QA Pass-Linux label Nov 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update brave://settings/appearance with section titles and better grouping #33128

Update brave://settings/appearance with section titles and better grouping #33128

rebron commented Sep 20, 2023

simonhong commented Oct 4, 2023

kjozwiak commented Oct 18, 2023

GeetaSarvadnya commented Oct 18, 2023 •

edited

Loading

stephendonner commented Oct 30, 2023 •

edited

Loading

btlechowski commented Nov 1, 2023 •

edited

Loading

Update brave://settings/appearance with section titles and better grouping #33128

Update brave://settings/appearance with section titles and better grouping #33128

Comments

rebron commented Sep 20, 2023

Description

Design:

Reproduces how often:

Brave version (brave://version info)

Version/Channel Information:

Other Additional Information:

Miscellaneous Information:

simonhong commented Oct 4, 2023

kjozwiak commented Oct 18, 2023

GeetaSarvadnya commented Oct 18, 2023 • edited Loading

Vertical Tabs using Light theme

Vertical Tabs using Dark theme

Horizontal Tabs using Light theme

Horizontal Tabs using Dark theme

Leo position (below Web3)

Removing Setting text from navigation via brave://settings

Always show toolbar in fullscreen only appearing under macOS via Toolbar

stephendonner commented Oct 30, 2023 • edited Loading

Verification PASSED using

Vertical Tabs using Light theme

Vertical Tabs using Dark theme

Horizontal Tabs using Light theme

Horizontal Tabs using Dark theme

Leo position (below Web3)

Removing Setting text from navigation via brave://settings

Always show toolbar in fullscreen only appearing under macOS via Toolbar

btlechowski commented Nov 1, 2023 • edited Loading

Vertical Tabs using Light theme

Vertical Tabs using Dark theme

Horizontal Tabs using Light theme

Horizontal Tabs using Dark theme

Leo position (below Web3)

Removing Setting text from navigation via brave://settings

GeetaSarvadnya commented Oct 18, 2023 •

edited

Loading

`Vertical Tabs` using `Light` theme

`Vertical Tabs` using `Dark` theme

`Horizontal Tabs` using `Light` theme

`Horizontal Tabs` using `Dark` theme

`Leo` position (below `Web3`)

Removing `Setting` text from navigation via `brave://settings`

`Always show toolbar in fullscreen` only appearing under `macOS` via `Toolbar`

stephendonner commented Oct 30, 2023 •

edited

Loading

Verification `PASSED` using

`Vertical Tabs` using `Light` theme

`Vertical Tabs` using `Dark` theme

`Horizontal Tabs` using `Light` theme

`Horizontal Tabs` using `Dark` theme

`Leo` position (below `Web3`)

Removing `Setting` text from navigation via `brave://settings`

`Always show toolbar in fullscreen` only appearing under `macOS` via `Toolbar`

btlechowski commented Nov 1, 2023 •

edited

Loading

`Vertical Tabs` using `Light` theme

`Vertical Tabs` using `Dark` theme

`Horizontal Tabs` using `Light` theme

`Horizontal Tabs` using `Dark` theme

`Leo` position (below `Web3`)

Removing `Setting` text from navigation via `brave://settings`