CSSEditor - A StyleSheet Editor Wednesday, 8 August 2007

I have a CssEditor editor project that I started a few years ago but never finished. It needs to be finished and it needs a home.

What is the CSSEditor?

The CSSEditor provides a User Interface that allows the user to edit the actual rules in the styleSheet.

If you are not using Mozilla Firefox, you won't be able to try the StyleSheet Editor.

The StyleSheet Editor is intended as a CMS bolt-on so that you can edit the style separately from the content.

How it Works

The CSSEditor has a styleSheet property that is an actual stylesheet, and uses the DOM Style Modules.

It uses a rule-mapping, performing a similar algorithm that the browser applies. The mapping matches an element to its most specific matching rule (as opposed to matching multiple RuleSets. (This is facilitated by Dean's CSSQuery)

This allows the user to select an element (by clicking).

When an element is selected, the most specific selector in the stylesheet is matched to that element and the CSSEditor's components are populated with the property: value pairs of the selector's corresponding RuleSet in the styleSheet.

I'll admit it may sound a bit complex. This really needs UML diagrams. It needs a lot of things, including being finished.

CSSEditor State Management

The CSSEditor has three states:

EditState

An element is being edited

SelectionState

User can select an element to edit

DisabledState

the CssEditor is disabled. No element can be selected. No element is being or can be edited.

State Change Management

State can change in the following conditions:

From SelectionState to EditState

By selecting an element (by clicking)

From DisabledState to SelectionState

By clicking on the panel's icon:  • 

From SelectionState or EditState

By clicking on the panel's icon:  • 

What it Needs

The CSSEditor needs a lot of work!

• Server Integration
  • XMLHttpTransport
  • service ( Java, C#, or PHP )
• Code Cleanup
• Functional and User Testing
• Background Image service (Flickr?)
• Tooltips
• QuickHelp
• Developer Documentation and UML for the tricky parts
• Bug Tracking