Brave-browser: Dashboard setting `Show background image` switch is distorted in an upgraded profile

[GeetaSarvadnya]

Description

Dashboard setting Show background image switch is distorted in an upgraded profile

Steps to Reproduce

1. Clean profile 1.2.43
2. Open a bunch of sites
3. Make sure top sites are added in a new tab page
4. Upgrade to 1.3.110
5. Remove stats
6. Top sites are moved to the top as expected
7. Click on Dashboard settings
8. Dashboard setting Show background image switch is distorted in an upgraded profile

Note: close and open dashboard settings fix the issue

Actual result:

Dashboard setting Show background image switch is distorted in an upgraded profile

Expected result:

Dashboard settings switches should be aligned properly

Reproduces how often:

Always

Brave version (brave://version info)

Brave | 1.3.110 Chromium: 80.0.3987.78 (Official Build) (64-bit)
-- | --
Revision | cb5aa81cb0a3a2c674b93bc7ffb34a86cd3b4802-refs/branch-heads/3987@{#752}
OS | Windows 10 OS Version 1803 (Build 17134.1006)

Version/Channel Information:

• Can you reproduce this issue with the current release? No - upgraded from 1.0.1 -->1.2.43
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the dev channel? Not sure
• Can you reproduce this issue with the nightly channel? Not sure

Other Additional Information:

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

Miscellaneous Information:

cc: @brave/legacy_qa @rebron @petemill @bsclifton

[LaurenWags]

Reproduces on macOS when using light theme only, does not reproduce on dark theme. Steps:

1. Install 1.2.43
2. Populate some top sites
3. Turn off stats
4. Upgrade on test channel to 1.3.110
5. Do not see issue with dark theme/same as macOS bc my OS is set to dark:
   

1. Change to light theme
2. Reproduce issue:
   

Brave | 1.3.110 Chromium: 80.0.3987.78 (Official Build) (64-bit)
-- | --
Revision | cb5aa81cb0a3a2c674b93bc7ffb34a86cd3b4802-refs/branch-heads/3987@{#752}
OS | macOS Version 10.14.6 (Build 18G103)

[rebron]

I'm seeing this with the ntp flag enabled.

[rebron]

I'm seeing the error intermittently and can reproduce by reloading the new tab page and opening and closing the dashboard settings.

[rebron]

Able to reproduce on dark theme and light theme Win/macOS 1.3.111.

[w0ts0n]

Can +1 that I saw this as of today.
Brave Version 1.3.113 Chromium: 80.0.3987.87 (Official Build) (64-bit) on MacOS 10.15.1

[cezaraugusto]

This seems to be an upstream bug that got fixed in some upstream version after this bug report. I'm not able to reproduce. Using macOS following steps Lauren suggested. Tested on:

Release build Version 1.3.115 Chromium: 80.0.3987.87 (Official Build) (64-bit)
Beta build Version 1.4.80 Chromium: 80.0.3987.85 (Official Build) beta (64-bit)
Dev build Version 1.5.86 Chromium: 80.0.3987.87 (Official Build) dev (64-bit)
Nightly build Version 1.6.14 Chromium: 80.0.3987.87 (Official Build) nightly (64-bit)
Development build Version 1.6.12 Chromium: 80.0.3987.87 (Developer Build) (64-bit)

[kjozwiak]

@GeetaSarvadnya @w0ts0n @LaurenWags mind checking to see if this is still reproducible as per the above comment from @cezaraugusto.

[LaurenWags]

I have not been able to reproduce using

Brave | 1.3.115 Chromium: 80.0.3987.87 (Official Build) (64-bit)
-- | --
Revision | 449cb163497b70dbf98d389f54e38e85d4c59b43-refs/branch-heads/3987@{#801}
OS | macOS Version 10.14.6 (Build 18G103)

Installed 1.2.43 and then upgraded to 1.3.115 and attempted the following:

• Steps from my original comment about reproducing the issue: https://github.com/brave/brave-browser/issues/8070#issuecomment-582433750
• Steps from description https://github.com/brave/brave-browser/issues/8070#issue-560255386
• Comment by @rebron https://github.com/brave/brave-browser/issues/8070#issuecomment-582654143

Was unable to reproduce using dark or light theme on 1.3.115.

[w0ts0n]

Version 1.3.115 Chromium: 80.0.3987.87 (Official Build) (64-bit)
Windows 10.

I'm still able to reproduce. (included date and time in screenshot)

[rebron]

This looks to be happening on older profiles. New profiles don't seem to be effected.
cc: @simonhong in case he has any ideas.

[rebron]

I think this will be fixed in 80.0.3987.116 with https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f

[bsclifton]

Closing - we should be able to verify this with latest build. I suspect this was fixed with https://chromium.googlesource.com/chromium/src/+/b1738fb61215bb8610e08f65de4d01681e250f7f

[kjozwiak]

@w0ts0n mind checking one more time using https://github.com/brave/brave-browser/releases/tag/v1.3.118 which includes the css-grid revert that @bsclifton mentioned above.

[srirambv]

Verification passed on

Brave | 1.3.118 Chromium: 80.0.3987.116 (Official Build) (64-bit)
-- | --
Revision | dc00a510e4c2ae25c4d084cc3d946fc782249224-refs/branch-heads/3987@{#917}
OS | Linux

• Verified steps from issue description
• Verified switch knobs are correctly aligned
• Dark Theme
  
• Light Theme
  
• Verified toggle all switches doesn't cause knobs to be misaligned

Verification passed on

Brave | 1.3.118 Chromium: 80.0.3987.116 (Official Build) (64-bit)
-- | --
Revision | dc00a510e4c2ae25c4d084cc3d946fc782249224-refs/branch-heads/3987@{#917}
OS | Windows 10 OS Version 1803 (Build 17134.1006)

• Verified steps from issue description
• Verified switch knobs are correctly aligned

Light theme:

Dark theme

Verified passed with

Brave | 1.3.118 Chromium: 80.0.3987.116 (Official Build) (64-bit)
-- | --
Revision | dc00a510e4c2ae25c4d084cc3d946fc782249224-refs/branch-heads/3987@{#917}
OS | macOS Version 10.14.6 (Build 18G3020)

• Reproduced the issue using STR from description and https://github.com/brave/brave-browser/issues/8070#issuecomment-582433750 on 1.3.110:
  

• Upgraded to 1.3.118 and issue no longer occurred on both light and dark themes:
  
  

[rebron]

@w0ts0n Works for you now, correct?

[w0ts0n]

Correct! Thanks all.