E4/CSS/Visual Design

This page summarizes the investigations into an updated visual design (default stylesheet) for the e4 workbench.

Goals

The goals of this work are:

• design a compelling visual style for e4
  • reduce visual noise, focus on the data
  • investigate additional breathing space, lessons learned from publishing and web
  • sleek/modern
• drive the ability/flexibility of the CSS styling for SWT widgets
• demonstrate the ability to keep a "classic" look and supply alternate designs
• identify the major interaction design issues (workbench model) that might block visual design

Interaction Design Ideas

• Activity based layouts vs. perspectives (default workbench model)
• Is there still a single editor area now that we can be more flexible?
• "Split editor" interactions
  • Today creating a split is same feedback as stack manipulation but it's a different thing
  • Toolbar icons for managing split/unsplit (might be useful in "compare" also)

Timetable/approach

• October
  • Investigate/define implementation constraints
    • Bogdan - explore tab shape definition, border control, Windows 7 implications (if any)
  • Prioritize visual design areas
    • Susan - work within e4 plat UI team to prioritize focus areas for design exploration
• November
  • Visual design explorations
    • Linda - multiple design explorations with limited constraints
    • Susan - solicit team response/consensus on alternatives
    • Choose a direction by end of November
  • Interaction design explorations
    • Susan/Eric - work within e4 team to develop default workbench assumptions wrt perspectives, activity-based layouts, role of the editor area
• Dec/Jan/Feb
  • Visual design
    • Linda/Susan/Bogdan - Iterate (push/pull) on default design
    • Susan - project team consensus, communicate to community
    • Susan/Bogdan - investigate programmatic reduction of clutter (fades, decorator removal, etc.)
    • Bogdan - implementation/evolution of CSS/SWT styling engine, CTabFolder, etc.
  • Interaction design
    • Eric/Susan (?) - implementation
• March
  • EclipseCon goals
    • Show the new design
    • Show a "classic" stylesheet based on 3.x
    • Show radical alternatives to demonstrate CSS flexibility
• April
  • stabilize design

Design element	Requirement	Implementation constraints	Priority	Status
Tabs	Ability to define custom shapes	Shape should be specified in CSS, shouldn't require Java code (ownerdraw). Consider use of sprites/images and prototype the performance. Look for other standards for specifying custom shapes.	High	10/19/2009 - Bogdan investigating SVG as descriptive format for tab shapes. Linda to provide SVG file(s) of previous tab shape designs.