Difference between revisions of "E4/CSS/Visual Design"

Revision as of 11:59, 3 December 2009

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, modern visual style for e4
• reduce visual clutter, more focus on the data, less on the container elements
• investigate design lessons learned from publishing and web
• drive the ability/flexibility of the CSS styling for SWT widgets
• identify the major interaction design issues (workbench model) that might block visual design

Assumptions

• the default design will still honor platform themes with respect to colors and fonts
  • end users still control common fonts and colors through Eclipse preferences and platform theme settings
  • we continue to respect high contrast themes (accessibility)
  • end users may completely reskin the SDK using CSS but should not have to do so for existing preferences
• the design will focus on space, colors, and gradients to help reduce the visual noise
  • tab colors and backgrounds, view backgrounds, reduction of borders
  • investigate overlays to fade non-focus areas

Issues Identified

• How to remain "platform respecting" with respect to theme colors and fonts while still able to style shades and gradients
  • Specifying hue-neutral colors and gradients for backgrounds and borders Bug 296175
  • Specifying tab shapes and gradients as sprites while still respecting theme hues
  • Specifying tab shapes using SVG

Deliverables

• default CSS styling for the Eclipse 4.0 workbench
• demonstrate ability to retain the "classic" look

Timetable/approach

Visual Design Items

The following table tracks visual design elements that are being considered and any constraints that the implementation imposes on the design. Note that the priority listed in the table is related to its impact on the overall visual design. High priority items must have their constraints defined first, while lower priority items can be defined later in the design process without affecting the overall design approach.

Design element	Requirement	Implementation constraints	Priority	Status
Tabs	Ability to define custom shapes. Shape should be specified in CSS (ie, you shouldn't have to write Java ownerdraw code to get custom shapes).	Consider use of sprites/images and prototype the performance. Look for other standards for specifying custom shapes.	High	Bogdan investigating SVG as descriptive format for tab shapes. Linda to provide SVG file(s) of previous tab shape designs.
Tabs	Custom highlight colors and gradients	An approach using images limits the ability to honor platform themes where the color does not need to be specified.	High	SVG would solve this issue.
Tabs	Separate background color for area behind tabs (blank space on right)	None - Can be drawn by ETabFolder	High
Tabs	Specify custom fonts/bolding for normal/selection	None - Can be drawn by ETabFolder	High
Tabs	Ability to remove keylines or specify their color independently	None - Can be drawn by ETabFolder	High	which borders do we need to control (remove top border without removing tab tops? position of bottom line?)
Widget borders	reducing key lines within tab content, etc.	Need to determine which borders can be removed/controlled easily at platform level.	Medium	Bogdan to provide summary of OS limitations
View and editor toolbars	Consistent location of view and editor toolbars. Consider a local editor toolbar. Consider a static position for view toolbar (always below?). Location of min max controls		Medium	Ongoing discussion in Bug 292792
View and editor visuals	Visual separation of view stacks without using keylines (coloring?).		Medium
Perspective Switcher	Look and feel of switcher in e4, location of switcher		Medium	Ongoing discussion in Bug 292789
Shared search bar	Should we have a search bar in the trim?	None	Medium
Workbench background	Specify an image as the background for the workbench	?	Low
Toolbar	Specify transparency or customizable background	Current assumption: limited by platform	Low	Bogdan looking at Windows 7, any changes here
Menubar	Specify transparency or customizable background	Current assumption: limited by platform	Low	Bogdan looking at Windows 7, any changes here
Decorations	Don't show decorators for 90% case	would need new graphics for "exception case"	?
Fades	Fade non-active views	?	?
UI Forms	Are there additional requirements for styling ui forms components?	Apps desiring styling control over forms should be encouraged to use web UI technology to achieve this. There will be no more effort applied to styling ui forms.	Low	No work to be done