GSoC 2016 Work Report – Better CSS Style Sheet Support

Organization: Inkscape
Project: Better CSS Style Sheet Support

The trunk of Inkscape can be found at My branch name is css-support and this branch can be located at

The list to commits I made along with a brief description for them can be seen below:

  1. Revision 14950: This registers Style dialog in Inkscape. Simple Dialog with just a ‘+’ is created allowing to add selectors in the dialog. (More details)
  2. Revision 14952: This sets the class attribute of the objects selected equal to the text in entrybox. However, this work was ignored.
  3. Revision 14954: This adds the selector added in Style Dialog to style element in XML representation. Also the work ignored in previous commit was replaced by the expected implementation of adding selectors.
  4. Revision 14956: If any selectors already exist in the style element, the style dialog is populated with all those selectors, one in each row of the dialog.
  5. Revision 14958: A patch by Tavmjong Bah for broken automake was applied in this revision.
  6. Revision 14961: Deletion of a selector from the Style Dialog by clicking ‘-‘ at bottom of Style Dialog has been implemented in this. Nothing is removed from the style element in XML repr.
  7. Revision 14963: This removes unnecessary spaces that surround selector labels in row as well as in XML style element.
  8. Revision 14964: A crash occurs when an object without style attribute is added to selector. This commit resolves this crash.
  9. Revision 14965: This commit sets the class attribute of the objects added to selector. If the selector is a class selector, then the ‘.’ preceding the class selector row label is removed and is set as class attribute of the objects in selector.
  10. Revision 14967: The map being used to save pair of selector and the associated objects is replaced by a vector in this revision.
  11. Revision 14968: Deletion of selector by clicking ‘-‘ at bottom of Style Dialog now removes the selector both from the dialog as well as the style element.
  12. Revision 14970: Unwanted space at the top of Style Dialog is removed via this.
  13. Revision 14972: Deletion works well except when there is only one selector left. Deleting this only selector that remains causes a crash. This is fixed in this commit.
  14. Revision 14973: In case, an empty string is added for the selector name via the entry box, a crash occurs which is resolved by this revision.
  15. Revision 14976: This adds and removes objects to and from selectors and thus child rows are added to parent rows (selectors). XML’s style element is not updated yet.
  16. Revision 14978: Another crash when deleting selectors is fixed in this along with some coding style corrections.
  17. Revision 14979: This enables selection of matching objects when a selector row is selected in the Style Dialog.
  18. Revision 14980: When objects are added to selector i.e. child rows are formed, style element is updated. This implementation is done by this commit.
  19. Revision 14982: When objects are removed from selector i.e. child row is deleted, then the style element is updated accordingly. Also multiple style elements do not exist anymore. If a style element is already there, its content is updated accordingly when adding and deleting selectors.
  20. Revision 14983: This solves some compiler errors.
  21. Revision 14984: If an existing drawing with selectors is opened, the buttons at the bottom and in front of selector rows are made functional correctly.
  22. Revision 14985: This commit adds support to select corresponding treeview rows when objects are selected.
  23. Revision 14988: This fixes deletion and selection of objects when clicking on styledialog rows and vice-versa.
  24. Revision 14989: This fixes issues related to updating style content and selection of rows in treeview.
  25. Revision 14991: This adds support for selection of matching objects when selector row is single-clicked as well as double-clicked.
  26. Revision 14993: Support to delete objects from selector by clicking ‘-‘ in front of the child object row is added by this revision.
  27. Revision 14995: This is a patch by Tavmjong Bah to propagate changes to object tree with changes in style element.
  28. Revision 14997: A small replacement of a string s1 with matchSelector.
  29. Revision 14998: This corrects deletion of child rows when parent selector is deleted.
  30. Revision 14999: Initially the expander column was the one with ‘+’ symbol in front of every row. This changes the expander column of treeview and sets indentation of child rows.
  31. Revision 15001: This adds CSS panel with editing support with no changes reflected yet in the drawing.
  32. Revision 15003: This updates XML’s style element and hence drawing when properties are edited in CSS panel.
  33. Revision 15004: This corrects the updating of XML correctly when editing properties in CSS panel.
  34. Revision 15005: This separates the CSS dialog from Style Dialog visually, thus allowing it to be resized.
  35. Revision 15007: This replaces the storage vector with InkSelector class and some code improvements.
  36. Revision 15009: A robust implementation of _getSelectorVec() is added here.
  37. Revision 15010: This add functionality to add and delete CSS property in CSS panel. Clicking ‘+’ at bottom of CSS panel adds a CSS property and clicking ‘-‘ in front of CSS property row deletes the CSS property selected.
  38. Revision 15012: A crash occurs when when deleting CSS property which is resolved in this revision.
  39. Revision 15014: Another patch by Tavmjong Bah which adds changes for compilation with latest trunk.
  40. Revision 15016: An empty CSS property row gets added sometimes. This is fixed via this commit.
  41. Revision 15017: Some tests while adding & removing objects from class selectors failed. Those tests are passed by code in this commit.
  42. Revision 15019: The tests to add ID selectors are all passed by changes in this commit.
  43. Revision 15020: A minor addition of a condition to correctly add CSS properties.
  44. Revision 15022: Some tests still failed to pass ID selector tests. The complete passing of tests to add ID selectors is done in this.
  45. Revision 15023: The remaining simple class selector tests are passed by changes in this revision.
  46. Revision 15024: Some comments are added to improve the understanding of code.

This all has been achieved so far.

Further work to be done:

  1. Undo Redo
  2. Dragging of Selectors

Progress So Far

Not going into details in this post, I will just mention about what progress I have made in the past two weeks.

  1. Adding Objects to Selector, in XML repr too
  2. Deleting objects from Style Dialog as well as from repr (this was a tough one)
  3. Selecting all matching objects when any row(selector) in Style Dialog
  4. Selecting matching selectors when objects in the drawing are selected
  5. Opening CSS dialog on double clicking selector
  6. Populating CSS dialog with properties of selector selected in Style Dialog
  7. Make properties editable in CSS dialog and update XML repr so changes are reflected in the drawing

Besides polishing the last two above, dragging selectors along with undo-redo support is left. It has been a pleasure so far! 😀

I will dig the details on each of the above in coming posts.