Orion 5.0 M1 – New and Noteworthy

Just in time for the holidays, a new Orion milestone is available! This milestone has crammed in a whole lot of developer tooling improvements, and enhancements to several aspects of the user interface. There is also a ton of work going on behind the scenes on bigger features that we’ll hopefully be able to share in the next milestone. You can take the latest build for a spin on OrionHub, or download it.

Mark occurrences

The Orion editor will now highlight occurrences of variables in JavaScript files. Simply move the cursor over a variable to highlight all occurrences in the file. Occurrences are shown both highlighted in the text, and in the overview ruler which shows you all occurrences in the file at a glance. This is implemented using the orion.edit.occurrences service, which allows plug-ins to provide occurrence computation for arbitrary content types. This feature can be turned on or off from the editor settings page.
Mark occurrences

New JavaScript outline

Orion has added a brand new JavaScript outline view! This new outline shows all functions and closures in a hierarchical format matching your source. The outline is built using the esprima parser and estraverse AST traversal library to get zippy performance and high accuracy. View the outline by selecting Source Outline from the drop-down menu at the top of the navigation pane on the left hand side of the editor.
JavaScript outline pane

Outline filtering

The outline pane now includes a filter box to help you quickly find the function you are looking for. Simply type in the filter box to filter the contents of the outline.
50m1-outline-filter

New icons using an icon font

Orion now has a completely new set of icons, implemented using an icon font. Implementing icons using a font improves page load performance because images don’t need to be fetched individually. Because they are vector-based, they also scale up and down very well. The following image shows our old icons alongside the icon font replacements on a high resolution iPad display:
50m1-iconfont

New syntax highlighting framework

This milestone includes a branch new syntax highlighting framework designed to suit the Orion plugin architecture. This framework uses declarative rules to match patterns in a source file to styles. The Orion plugin provides simple rules, and the calculations all happen in the main editor page. Stay tuned for more documentation on how to plug-in your own highlighter using this new framework. The Orion editor already uses this new system to provide highlighting of JavaScript, Java, CSS, and HTML source files.

New JavaScript validation

Orion has switched to a brand new syntax validation service based on eslint (previously we used JSLint). This new validator is currently roughly comparable to our old one, and provides much greater flexibility that we plan to expose to users in the future.

Accessibility deep dive

Many Orion committers attended a special master class with web accessibility guru Derek Featherstone this month. We did a deep dive on various parts of the Orion UI and how to make them more accessible to keyboards, screen readers, dictation software, etc. So far the net result has been a long list of new bug reports and design ideas, but we are certain this will ripple through into a more accessible Orion user interface over the coming months.

Compare images

The Orion compare editor now allows you to compare common image types. You can now see outgoing changes to your images in the Git staging page, and compare pairs of images in the standalone compare page.
50m1-compare-images

Drag to move files in navigation pane

You can now drag files and folders in the editor navigation pane to move them to another folder.
50m1-drag-move

Show in Navigator

When browsing around in the editor navigation pane it can be easy to lose track of the file you are editing. You can now click on the filename in the breadcrumb at the top of the editor to immediately reveal and select the currently edited file in the Navigator.
50m1-show-nav

Completion support in editor find bar

The find and replace bar in the editor now provides a drop-down of suggested completions for your search term based on your search history. You can delete entries from the history directly in the down-down if you don’t want to see that suggestion again.
50m1-find-completion

Open file with different editor

A drop-down menu has been added to the editor to allow you to view the same file in a different editor. For example, when editing a markdown file, you can use this to toggle between the Orion text editor and a rendered markdown view.
50m1-switch-editor

Find user command for administrators

A new command is available to administrators in the user profile list to quickly jump to the profile for a particular user. If you manage an Orion install with thousands of users you will be thanking us for this one.
50m1-find-user

That’s all for this milestone!

This entry was posted in New & Noteworthy. Bookmark the permalink.