Spec: Design Refresh

[Shomnipotence]

https://www.figma.com/design/PqKdpNK8MLsskXQJvwuN0z/UI?node-id=120-9821&t=QTS0NJ9eKCtA8Xzf-1

App Frame

title bar (tab bar), address bar (toolbar)

• Feature: Set a custom tab highlighting style #24

• Feature: Make tab area 48px high #25

• Feature: Remove background of address bar and only show on hover #26

• Feature: Add an underline effect when address bar is activated #22

Titlebar

• Feature: Titlebar color based on website color #21

Toolbar

Enable or disable toolbar bottom separator line

• Generally speaking, the design guidelines stipulate that the content area should be lighter than the title bar (toolbar) area, and there should be a dividing line.
  

My design here removes this effect. You can add it, or allow users to choose freely.

NTP and other pages

new tab page

• Feature: Brand new NTP similar to Safari with familiar sites listed #20

• Feature: Fluent error page similar to Edge #19

Thumbnail of Tab

• Feature: Make tab thumbnail transparent inline with user's settings  #18

Browser features

• Feature: Add bookmarks applet to toolbar with a transparent background #17

• Feature: Add search and folder functions to bookmarks applet when expanded #27

• background of its follows the user settings (acrylic/mica), and cannot be set to a picture
  Bookmarks has three views:

• Show name only

• Show thumbnail and name

• Grid View
  
  
  

• Feature: Fluent history page similar to Edge that is split into 3 different views #16

Plugin Flyout

• Feature: Use transparent background in browser extensions menu #23