Split view - UI polish

[aguscruiz]

Description

Latest version of Figma

https://www.figma.com/design/Dt0iJdVaaAj7DikWLO1P7I/Split-view-%2F-Sidebar-browsing?node-id=348-28191&t=0r7ExpW2INc0KU4d-1

On hold

• Update all colors to material color tokens

Tab bar

• The previous tab to the split view (on the left) shouldn't have a divider #39335

• Check correct colors for the split view tabs container background in dark mode: (Re-style split view UI brave-core#27008)
  https://www.figma.com/design/Dt0iJdVaaAj7DikWLO1P7I/Split-view-%2F-Sidebar-browsing?node-id=2492-48088&t=OXIs7NQGq8BpdKxU-1

• Separator between tabs in split view tab (Re-style split view UI brave-core#27008)

• Horizontal tabs: should be primitive/neutral/10 (Re-style split view UI brave-core#27008)

• Vertical tabs: should be primitive/neutral/10 (Re-style split view UI brave-core#27008)

• Update tab UI Update split view tab's bounds/padding #42913

Page area

• Border color around the active tab has been updated
• Border color of inactive tab has also been updated
• Border of active tabs is 2px
• Inactive tabs don't have a shadow
• Added the url preview on inactive tab in split view #39152
  https://github.com/brave/reviews/issues/1646 Figma link to spec:
  https://www.figma.com/design/Dt0iJdVaaAj7DikWLO1P7I/Split-view-%2F-Sidebar-browsing?node-id=348-28191&t=0r7ExpW2INc0KU4d-1

Contextual menu on gutter

• When hovering, don't change the background color.
• When active, change icon color to semantic/icon/interactive
• The contextual menu itself needs a 4px padding on top-bottom to not make it look so cramped

[sangwoo108]

Border of active tabs is 1.5px

@aguscruiz real number may not work on Windows. Can we have integer for the thickness?

Border color of inactive tab has also been updated

And curious if Browser/ToolBar/Button/Outline is valid token. I couldn't find the color.

[aguscruiz]

@aguscruiz real number may not work on Windows. Can we have integer for the thickness?

Yeah we can use 2px instead. We can use that on macOS/Linux aswell, so we keep the same in all. Btw the color token I used is for border/icon/interactive. That should solve the issue with the color not having contrast in dark mode

And curious if Browser/ToolBar/Button/Outline is valid token. I couldn't find the color.

This one is part of the new color tokens for the material design work. It's built on top of the new primitives, so it's not accessible without those.

---

You need it for the url indicator?

If that's the use case, you can use the same color we give the top tab bar background. It's the same value.

------------------------------------------

Note: With that URL indicator, the whole inactive tab gets a border color too

---

I left a clean design without images here so you can see it better
https://www.figma.com/design/Dt0iJdVaaAj7DikWLO1P7I/Split-view-%2F-Sidebar-browsing?node-id=2318-16574&t=6FHr3SRo0nZmN0Fo-1

[sangwoo108]

If that's the use case, you can use the same color we give the top tab bar background. It's the same value.

Yeah, I needed it for inactive web view's border. I guess that's the same value with the mini url bar's border.

[sangwoo108]

Browser's current frame color looks lighter than the design guide, so vaguely notice the border 🤔

[aguscruiz]

Yeah, another update from the material design Token update that's pending.

[sangwoo108]

Okay then let me push as is 👍

[ghost]

I recorded this yesterday but still applies to 1.69.66 Chromium: 127.0.6533.26 (Official Build) nightly (64-bit)

Seems like this behavior appeared after Polish Split view UI brave/brave-core#24385 PR, and it is basically, that when you click on the tabs of the split view, the active tab will have 2px less, than when it is not the active one.

You can see it in devtools, how the size changes.
Plus seems like devtools now disappears for a while when switching from non-devtools split view tab to the devtools one

And as can be seen, it happens in both VT and HT.

Recording.2024-06-28.152839.mp4

Recording.2024-06-27.121915.mp4