A presentation for SYRCOSE 2010. Nizhny Novgorod, Russia. This is a work-in-progress report on a single-window approach to the interfaces of development environments: instead of a traditional tool view interface, the authors propose a replacement with a minimum of additional widgets.

1. Single-Window
Integrated Development Environment
Ivan Ruchkin Vladimir Prus
Moscow State University Moscow State University
Faculty of Computational Faculty of Computational
Mathematics and Cybernetics Mathematics and Cybernetics
Computing Systems Lab Computing Systems Lab
ruchkin.ivan@gmail.com vladimir.prus@gmail.com

2. Single-window IDE
Outline SYRCoSE 2010
• Introduction
• Single-window design
• Implementation
• Results and future work
Introduction Design Implementation Results

3. Single-window IDE
IDEs SYRCoSE 2010
Integrated Development Environments
Combine: Provide:
• Code editing tools • Syntax highlighting
• Build system • Code completion
• Debugger • Build management
• VCS • Refactoring
• … • …
Introduction Design Implementation Results

4. Single-window IDE
Popularity SYRCoSE 2010
• Many developers prefer text editors to IDEs
• Reasons for that are not clear
• One of possible reasons – GUI usability
Introduction Design Implementation Results

5. Single-window IDE
Tool views SYRCoSE 2010
Introduction Design Implementation Results

6. Single-window IDE
Text editor SYRCoSE 2010
Introduction Design Implementation Results

7. Single-window IDE
Our approach SYRCoSE 2010
• Remove all tool views
• Provide tool views’ functions through text
editor window
• Introduce additional widgets if necessary
Introduction Design Implementation Results

8. Single-window IDE
Steps SYRCoSE 2010
• Collect tool views from existing IDEs
• Compose an IDE tool view model
consisting of abstract tool views
• Create a single-window interface design by
removing all abstract tool views
• Implement single-window interface in
KDevelop
• Do usability testing
Introduction Design Implementation Results

9. Single-window IDE
Tool view model SYRCoSE 2010
Abstract tool views:
• Project view
• Files view
• Build results view
• Code objects view
• Tasks view
• Call stack view
• Threads view
• Breakpoints view
• Variables view
Introduction Design Implementation Results

10. Single-window IDE
Removal approach SYRCoSE 2010
• We have a list of abstract tool views
• Most of them are either tree-like or list-like
• Tree-like tool views can be replaced with
breadcrumbs
• List-like tool views can be shown in text
• Messages and status information can be
shown in status bar
Introduction Design Implementation Results

11. Single-window IDE
Additional widgets SYRCoSE 2010
• Breadcrumbs bar
1
2 3
Introduction Design Implementation Results

12. Single-window IDE
Additional widgets SYRCoSE 2010
• Inline text widgets
Introduction Design Implementation Results

13. Single-window IDE
Additional widgets SYRCoSE 2010
• Enhanced status bar
1
2
3 4
Introduction Design Implementation Results

14. Single-window IDE
Removing tool views SYRCoSE 2010
• Project view
– Show navigation tree in breadcrumbs bar,
mode “Project”
• Files view
– Show navigation tree in breadcrumbs bar,
mode “Files”
Introduction Design Implementation Results

15. Single-window IDE
Removing tool views SYRCoSE 2010
• Build results view
– Marks in “Project” and “Files” breadcrumbs
modes
– Static element in status bar with number of
errors
– Inline widget with Next/Previous buttons
– Status bar message “Build complete”
• Code objects view
– Navigation with breadcrumbs
Introduction Design Implementation Results

16. Single-window IDE
Removing tool views SYRCoSE 2010
• Tasks view
– Inline Next/Previous buttons
– Marks in “Projects” and “Files” breadcrumbs
– Static status bar element “Number of tasks”
• Call stack view and threads view
– Show navigation tree in breadcrumbs, mode
“Threads and Stacks”
Introduction Design Implementation Results

17. Single-window IDE
Removing tool views SYRCoSE 2010
• Breakpoints view
– Inline widget with Next/Previous buttons
– Marks in “Files”, “Project” and “Code Objects”
breadcrumbs
– Static status bar element “Number of
breakpoints”
– Status bar message “Breakpoint hit”
• Variables view
– Inline widget (always on top of text editor)
Introduction Design Implementation Results

18. Single-window IDE
Implementation SYRCoSE 2010
• Breadcrumbs bar
1
2 3
Introduction Design Implementation Results

19. Single-window IDE
Implementation SYRCoSE 2010
• Build errors in text
1
2
Introduction Design Implementation Results

20. Single-window IDE
Implementation SYRCoSE 2010
• Enhanced status bar
1 2
3
Introduction Design Implementation Results

21. Single-window IDE
Results SYRCoSE 2010
• Described a tool view model
• Designed a single-window interface
• Implemented single-window interface
Introduction Design Implementation Results

22. Single-window IDE
Future work SYRCoSE 2010
• Finish implementation
• Usability testing of vanilla KDevelop
• Usability testing of single-window KDevelop
• Comparison and conclusion
Introduction Design Implementation Results

23. Single-window IDE
The end SYRCoSE 2010
Thank you for your attention!
Questions?
Ivan Ruchkin Vladimir Prus
ruchkin.ivan@gmail.com vladimir.prus@gmail.com