Style Dialog Populated with Classes & IDs

Today I added classes and ids to style dialog distinguished by characters ‘#’ and ‘.’ respectively. If the selector name is the object’s id, it is added to the dialog as #object-id. If the user wishes to add a class as a selector, it is added to the dialog as .red.

Screenshot from 2016-06-10 22:22:27

Another implementation I did today includes populating the style dialog with existing selectors in the style sheet. Whenever a style element is created, it is pushed to a map whose key is the selector’s name and value includes style properties in the selector. This map is iterated to obtain the selectors from the document that is opened. The selectors are presented in the style dialog. The user thus knows the list of selectors already available in the document.

Screenshot from 2016-06-10 22:25:49