Need to add 4px left margin to tab icons

[bradleyrichter]

Description

Left margin on tabs became smaller. Icons nearly touching tab ear left edge.

Steps to Reproduce

1. open a lot of tabs. Enough to fill your window width so they shrink enough.
2. notice icons (round is more obvious) are too close to the left edge of the tab ear

Actual result:

Expected result:

Reproduces how often:

I don't know how long it has been this way.

Brave version (brave://version info)

[Version 1.51.114 Chromium: 113.0.5672.92 (Official Build) (arm64)

Version/Channel Information:

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

Other Additional Information:

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

Miscellaneous Information:

[BrendanEich]

I reported to brad but wondered if anyone else reported sooner, and how we defend against this kind of regression vs. upstream. Thanks.

[petemill]

Is it definitely a regression, i.e. something we changed from upstream?

As for defending, perhaps a visual diff during PRs is an all-encompassing way to highlight any unexpected changes.

[BrendanEich]

A visual diff might need to be fuzzy matcher, but not too fuzzy ;-).

[simonhong]

This is upstream behavior. Not a regression.
Upstream has extra 4px left padding before icon when available width is sufficient for showing close button.
This extra 4px padding is intended to visually balalnce the close button.
...

and that padding is gone with insufficient width from inactive tab.
Active tab still have close button w/o extra padding but it seems ok because it has more wider space than us at left side.
...

Brave also have same layout logic. We should have this extra left 4px padding when close button and icon is visible.

alert icon also needs extra padding when close button is visible.

When always give extra padding, icon and close button get too closed. Need to adjust the distance.

Should we give extra padding to title also for balancing with close button?

[simonhong]

@bradleyrichter How about this?

Screen.Recording.2023-06-02.at.1.15.32.PM.mov

[kjozwiak]

The above requires 1.53.96 or higher for 1.53.x verification 👍

[LaurenWags]

Verified using

Brave | 1.53.100 Chromium: 114.0.5735.133 (Official Build) beta (x86_64)
-- | --
Revision | fbfa2ce68d01b2201d8c667c2e73f648a61c4f4a-refs/branch-heads/5735@{#1270}
OS | macOS Version 13.4 (Build 22F66)

Reproduced the original issue using the STR/Cases outlined via #30469 (comment) running 1.52.126 Chromium: 114.0.5735.133 as per the following:

Notice how close the icons are to the left margins as mentioned via the original issue.

Verified that the margins have been increased using the STR/Cases outlined via #30469 (comment) as per the following:

[MadhaviSeelam]

Verification PASSED using

Brave | 1.53.102 Chromium: 114.0.5735.133 (Official Build) (64-bit)
-- | --
Revision | fbfa2ce68d01b2201d8c667c2e73f648a61c4f4a-refs/branch-heads/5735@{#1270}
OS | Windows 11 Version 22H2 (Build 22621.1848)

Reproduced the original issue, that the icons are close to the left margins of the tab, as mentioned using the STR/Cases outlined via #30469 (comment) running 1.52.126 Chromium: 114.0.5735.133 as per the following:

Confirmed that the margins have been increased using the STR/Cases outlined via #30469 (comment) as per the following:

[MadhaviSeelam]

Verification PASSED using

Brave | 1.53.102 Chromium: 114.0.5735.133 (Official Build) (64-bit)
-- | --
Revision | fbfa2ce68d01b2201d8c667c2e73f648a61c4f4a-refs/branch-heads/5735@{#1270}
OS | Linux

Reproduced the original issue, that the icons are close to the left margins of the tab, as mentioned using the STR/Cases outlined via #30469 (comment) running 1.52.126 Chromium: 114.0.5735.1331.52.126 Chromium: 114.0.5735.133 as per the following:

Confirmed that the margins have been increased using the STR/Cases outlined via #30469 (comment) as per the following:

[kjozwiak]

The above requires 1.52.130 or higher for 1.52.x verification 👍 Removing the QA Pass labels as we'll need to recheck against 1.52.x.

[LaurenWags]

Verified using

Brave | 1.52.130 Chromium: 114.0.5735.198 (Official Build) (x86_64)
-- | --
Revision | c3029382d11c5f499e4fc317353a43d411a5ce1c-refs/branch-heads/5735@{#1394}
OS | macOS Version 13.4.1 (Build 22F82)

Reproduced the original issue using the STR/Cases outlined via #30469 (comment) running 1.52.129 Chromium: 114.0.5735.198 as per the following:

Notice how close the icons are to the left margins as mentioned via the original issue.

Verified that the margins have been increased using the STR/Cases outlined via #30469 (comment) as per the following:

[MadhaviSeelam]

Verification PASSED using

Brave | 1.52.130 Chromium: 114.0.5735.198 (Official Build) (64-bit)
-- | --
Revision | c3029382d11c5f499e4fc317353a43d411a5ce1c-refs/branch-heads/5735@{#1394}
OS | Linux

Reproduced the original issue, that the icons are close to the left margins of the tab, as mentioned using the STR/Cases outlined via #30469 (comment) running 1.52.129 Chromium: 114.0.5735.198 as per the following:

Confirmed that the margins have been increased using the STR/Cases outlined via #30469 (comment) as per the following:

[stephendonner]

Verified PASSED using

Brave	1.52.130 Chromium: 114.0.5735.198 (Official Build) (64-bit) 
Revision	c3029382d11c5f499e4fc317353a43d411a5ce1c-refs/branch-heads/5735@{#1394}
OS	Windows 10 Version 22H2 (Build 19045.3155)

Reproduced the original issue, that the icons are close to the left margins of the tab, as mentioned using the STR/Cases outlined via #30469 (comment) running 1.52.129 Chromium: 114.0.5735.198 as per the following:

1.52.129

---

Confirmed that the margins have been increased using the STR/Cases outlined via #30469 (comment) as per the following:

1.52.130

Fullscreen shots