Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add padding and shadow to main content window #31645

Closed
rebron opened this issue Jul 14, 2023 · 7 comments · Fixed by brave/brave-core#20526
Closed

Add padding and shadow to main content window #31645

rebron opened this issue Jul 14, 2023 · 7 comments · Fixed by brave/brave-core#20526
Assignees
Labels
front-end-change This task is a front end task and doesn't need any C++ changes needs-discussion Although the issue is clear, we haven't yet reached a decision about the right solution. OS/Desktop priority/P3 The next thing for us to work on. It'll ride the trains. QA Pass-Linux QA Pass-macOS QA Pass-Win64 QA/Test-All-Platforms QA/Yes release-notes/exclude

Comments

@rebron
Copy link
Collaborator

rebron commented Jul 14, 2023

Description

Add padding and shadow to main content window to show separation. Add border radius to all four corners.
This will allow for clear separation when vertical and sidebar are open.

Design

Screenshot 2023-07-14 at 8 33 30 AM Screenshot 2023-07-14 at 8 36 14 AM

Figma: https://www.figma.com/file/H11ZOl6JMYbCTW4ZJXqR5V/%F0%9F%A6%81-Browser?type=design&node-id=186%3A17108&mode=design&t=nhfxV22NiGDSYN2e-1

Brave version (brave://version info)

Version/Channel Information:

  • Can you reproduce this issue with the current release? n/a
  • Can you reproduce this issue with the beta channel? n/a
  • Can you reproduce this issue with the nightly channel? n/a

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:

@rebron rebron added needs-discussion Although the issue is clear, we haven't yet reached a decision about the right solution. QA/Yes release-notes/include OS/Desktop front-end-change This task is a front end task and doesn't need any C++ changes priority/P4 Planned work. We expect to get to it "soon". labels Jul 14, 2023
@zenparsing zenparsing self-assigned this Aug 30, 2023
@rebron rebron added priority/P3 The next thing for us to work on. It'll ride the trains. and removed priority/P4 Planned work. We expect to get to it "soon". labels Sep 27, 2023
@brave-builds brave-builds added this to the 1.61.x - Nightly milestone Oct 23, 2023
@MadhaviSeelam
Copy link

MadhaviSeelam commented Nov 1, 2023

Verification PASSED using

Brave | 1.61.60 Chromium: 119.0.6045.105 (Official Build) beta (64-bit)
-- | --
Revision | 1ecda441378e2e473fd84b38456413224121751c
OS | Windows 11 Version 22H2 (Build 22621.2428)
  1. Installed 1.61.60
  2. launched Brave
  3. opened brave://flags in a new tab
  4. enabled #brave-web-view-rounded-corners
  5. enabled vertical view tabs
  6. opened sidebar panel
  • Confirmed padding and shadow is shown to main content window to show separation.
  • Confirmed border radius is shown for all four corners.
before enabling the flag after enabling the flag - vertical after enabling the flag - horizontal
image image image
before enabling the flag after enabling the flag - sidebar panel
image !image

@MadhaviSeelam
Copy link

Added QA/Test-All-Platforms label because found #34067 which could be windows specific and may not be an issue in macOS as confirmed by @aguscruiz

@stephendonner
Copy link

stephendonner commented Nov 6, 2023

Verified PASSED using

Brave | 1.61.66 Chromium: 119.0.6045.105 (Official Build) beta (x86_64)
-- | --
Revision | aaaecfc0d925cde58e40e1b689464f1c630ef96d
OS | macOS Version 11.7.10 (Build 20G1427)

Steps:

  1. installed 1.61.66
  2. launched Brave
  3. opened brave://flags in a new tab
  4. enabled brave://flags/#brave-web-view-rounded-corners
  5. enabled vertical-tab view
  6. opened the sidepanel

Confirmed padding and shadow is applied to main content window, to show separation

Confirmed border radius is shown for all four corners

Light mode

before enabling the flag after enabling the flag - vertical after enabling the flag - horizontal
Screen Shot 2023-11-06 at 11 44 49 AM Screen Shot 2023-11-06 at 11 46 02 AM Screen Shot 2023-11-06 at 11 46 14 AM
before enabling the flag after enabling the flag - sidebar panel
Screen Shot 2023-11-06 at 11 50 38 AM Screen Shot 2023-11-06 at 11 53 20 AM

Dark mode

before enabling the flag after enabling the flag - vertical after enabling the flag - horizontal
Screen Shot 2023-11-06 at 12 00 10 PM Screen Shot 2023-11-06 at 12 02 13 PM Screen Shot 2023-11-06 at 12 02 24 PM
before enabling the flag after enabling the flag - sidebar panel
Screen Shot 2023-11-06 at 12 00 10 PM Screen Shot 2023-11-06 at 11 57 03 AM

@stephendonner stephendonner added QA/In-Progress Indicates that QA is currently in progress for that particular issue QA Pass-macOS and removed QA/In-Progress Indicates that QA is currently in progress for that particular issue labels Nov 6, 2023
@LaurenWags LaurenWags added the QA/In-Progress Indicates that QA is currently in progress for that particular issue label Nov 20, 2023
@LaurenWags
Copy link
Member

LaurenWags commented Nov 20, 2023

Verification in progress with

Brave	1.61.82 Chromium: 119.0.6045.163 (Official Build) beta (64-bit) 
Revision	c5d19b3a31e7e3ddaaa1fa2ea52b9338003e754e
OS	Linux

Encountered #34454 while testing.

Steps:

  1. installed 1.61.x
  2. launched Brave
  3. opened brave://flags in a new tab
  4. enabled brave://flags/#brave-web-view-rounded-corners
  5. enabled vertical-tab view
  6. opened the sidepanel

Confirmed padding and shadow is applied to main content window, to show separation

Confirmed border radius is shown for all four corners - Encountered #34067

Horizontal tabs Light mode

before enabling the flag after enabling the flag
1 1a
2 2a
3 3a

Horizontal tabs Dark mode

before enabling the flag after enabling the flag
1d 1da
2d 2da
3d 3da

Vertical tabs Light mode

before enabling the flag after enabling the flag
1 1a
2 2a
3 3a

Vertical tabs Dark mode

before enabling the flag after enabling the flag
1d 1da
2d 2da
3d 3da

@LaurenWags
Copy link
Member

changing to release-notes/exclude per discussion with @rebron

@GeetaSarvadnya
Copy link

GeetaSarvadnya commented Nov 21, 2023

Verification PASSED on

Brave | 1.61.83 Chromium: 119.0.6045.163 (Official Build) beta (64-bit)
-- | --
Revision | f5a497784a959e96317dc946d9086098d8fa6c50
OS | Windows 10 Version 22H2 (Build 19045.3693)

Steps:

  1. installed 1.61.x
  2. launched Brave
  3. opened brave://flags in a new tab
  4. enabled brave://flags/#brave-web-view-rounded-corners
  5. enabled vertical-tab view
  6. opened the sidepanel

Confirmed padding and shadow is applied to main content window, to show separation

Confirmed border radius is shown for all four corners - Encountered #34067

Horizontal tabs Light mode

before enabling the flag after enabling the flag
image image
image image
image image

Horizontal tabs Dark mode

before enabling the flag after enabling the flag
image image
image image
image image

Vertical tabs Light mode

before enabling the flag after enabling the flag
image image
image image
image image

Vertical tabs Dark mode

before enabling the flag after enabling the flag
image image
image image
image image

@MadhaviSeelam
Copy link

MadhaviSeelam commented Nov 22, 2023

Verification PASSED using

Brave | 1.61.83 Chromium: 119.0.6045.163 (Official Build) beta (64-bit)
-- | --
Revision | f5a497784a959e96317dc946d9086098d8fa6c50
OS | Windows 11 Version 22H2 (Build 22621.2715)

Steps:

  1. installed 1.61.83
  2. launched Brave
  3. relaunched Brave to pull in griffin
  4. verified BraveWebViewRoundedCornersStudy:Enabled entry shown
  5. opened brave://flags in a new tab
  6. verified brave://flags/#brave-web-view-rounded-corners is enabled as default
  7. enabled vertical-tab view
  8. opened the sidepanel
step 3 step 4 step 6
image image image

Light mode/Horizontal View

Horizontal tab view Reading list Bookmarks Leo panel Brave talk Wallet
image image image image image image

Light mode/Vertical tab view

Vertical tab view Reading list Bookmarks Leo panel Wallet Brave talk
image image image image image image

Dark mode/Horizontal tab view

Horizontal tab view Reading List Bookmarks Leo panel Wallet Brave talk
image image image image image image

Dark mode/Vertical tab view

Vertical tab view Reading List Bookmarks Leo panel Wallet Brave talk
image image image image image image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
front-end-change This task is a front end task and doesn't need any C++ changes needs-discussion Although the issue is clear, we haven't yet reached a decision about the right solution. OS/Desktop priority/P3 The next thing for us to work on. It'll ride the trains. QA Pass-Linux QA Pass-macOS QA Pass-Win64 QA/Test-All-Platforms QA/Yes release-notes/exclude
Projects
None yet
7 participants