1 — Window frame, glass, drop shadow, active colour

reference — .window.glass.active
miniSCP

Glass frame, 6px radius, drop shadow.

ours — app.html shell (active above, inactive below)
miniSCP

Focused window.

miniSCP

Unfocused — chrome desaturates.

2 — ListView (file panel)

reference — <table>
Name Size Modified
..——
Documents—3/29/2007 12:00 AM
report.pdf27 KB3/23/2007 12:00 AM
notes.txt4 KB3/13/2007 12:00 AM
ours — focused pane (top) vs unfocused pane (bottom)
Name Size Modified
..——
Documents—3/29/2007 12:00 AM
report.pdf27 KB3/23/2007 12:00 AM
notes.txt4 KB3/13/2007 12:00 AM
Name Size Modified
..——
Documents—3/29/2007 12:00 AM
report.pdf27 KB3/23/2007 12:00 AM
notes.txt4 KB3/13/2007 12:00 AM

2b — Selection geometry (rows must NOT shift when selected)

no selection
NameSize
aaa.txt1 KB
bbb.txt2 KB
ccc.txt3 KB
ddd.txt4 KB
middle row selected — baselines must still line up
NameSize
aaa.txt1 KB
bbb.txt2 KB
ccc.txt3 KB
ddd.txt4 KB

3 — Context menu

reference — ul[role=menu]
ours — context-menu.ts output (buttons, divider, accelerator, checkables)

4 — Controls 7.css already owns (sanity check)

buttons / textbox / progress
reference — menu[role=tablist]
Tab body

5 — Workspace tab strip (ours, as tab-bar.ts renders it)

ours — 3 workspaces, 2nd active
ours — single workspace (the live startup state)