Main Window
Live Preview
Chromatic Pixel
The Planetarium
New Tab
mozillademos.org
Window
Dimensions
Top/"Titlebar" 10px | Left, Right 8px
padding-mainWindow
Tabs
Shape
shape-tab
Dimensions | Padding
dimensions-tab
Tab Overlap
dimensions-overlap-tabs
Tab Strip Layout Visualization
dimensions-tabStrip
Style
Tab - Active
style-tabActive
Tab - Background/Hover
style-tabActive
style-tabSpecs
App Tabs
Dimensions | Padding
dimensions-appTab
Notification Glow
style-appTab-notifications
NavBar
Large Button Mode: Dimensions | Padding
8px Padding for Toolbar Content
dimensions-navBar
Large Back-Button and Last-Child Special Case
-4px Padding on Large Back-Button and Last-Child Toolbar Buttons
dimensions-navBar-specialCase
Button Layout Spacing/Padding Example
Sample NavBar Layout with 4px between buttons, full toolbar height button click area and end buttons click area extends to toolbar edge.
dimensions-navBar-buttonPlacement
Style
style-navBar
NavBar (Buttons)
Dimensions | Padding
Back-Button (Large)
dimensions-navBar-button-backLarge
Normal
dimensions-navBar-button-default
Menu
dimensions-navBar-button-menu
Connected
dimensions-navBar-button-connected
Split
dimensions-navBar-button-split
Style
Hover
style-navBar-button-hover
Pressed/Active
style-navBar-button-pressed
Toggled
style-navBar-button-toggled
Separator
style-navBar-button-separator
NavBar (Fields)
Dimensions | Padding
Location Field
dimensions-locationBar
Style
Normal
style-toolbarFields-normal
Go/Stop/Reload Button
Normal
style-goStopReload-normal
Pressed
style-goStopReload-pressed
Reload
style-goStopReload-reload
Stop
style-goStopReload-stop
Go
style-goStopReload-go
NavBar (Elements Overview)
style-navBar-elementOverview