Orion’s new look, and split editor

Designing a web based development tool has turned out to be a truly interesting and challenging job. Developers, it turns out, are strongly opinionated about the capabilities and behaviour of their tools, and want familiar controls at their fingertips.

It’s fascinating for me to think back through the evolution of Orion during the three years that I’ve worked on the front end. I’m really pleased with this new version of Orion’s interface, that we’ve just completed [ and will commit later this week ]. It comes close to what I’d hoped it would be when I first started making commits.

New Orion screenshot

A simpler and more modern look for Orion.

The new editor can be split to enable developers to keep open two files for editing at a time. This is especially useful for instance if you’re working with css and html or javascript, to ease hopping between files that rely on shared definitions.

New Orion editor - split view

New editor showing split view

Introducing split views forced us to relate the file name to the area that is split, and since the filename used to be part of the breadcrumb at the top of the page, we elected to show only the filename, but offer the whole path in a hover.

Relocating the breadcrumb freed more space from the old horizontal area that was devoted to it, so we were able to merge the remaining few controls ( for the login, and for the operations feedback ) into one bar.

The result is a much cleaner look. The navigation and operational controls sit on the perimeter of the creative coding area, in an L-Shape that defines the page.

You can compare it to the previous look here:

Previous version of Orion editor

Previous version of Orion editor

We’ve carried that L-Shape as a pattern into the other pages of Orion. You can see it here for example in the Git page.

New look Orion Git UI

New look Orion Git UI

Since Orion hadn’t had a facelift in a little while, we took this opportunity to shade it with a darker, more contemporary look, drawing on a consistent deep blue anchor colour, and relating it to tones from that blue swatch book. We wanted a darker look, but perhaps a departure from grey, to offer a little more interest.

As part of the design community at IBM, I’m a student of the IBM design language, and so leaned on the swatch books from the open resources offered. I also considered experimenting with some of Google’s Material Design, which I might also try if I can make some time for it.

Orion is open source, so you can colour it in however you like :)

I added a new ( switchable ) dark editor theme called ‘Ceol’ [ the Irish word for music, pronounced like a quick ‘ky-ole’ ].

What we’ve learned is that developers still like to see the familiar desktop approach for developing. With this latest version of Orion, we think we offer that, but in a contemporary and well thought out web context, drawing on modern navigation approaches and web layouts.

When I use Orion these days, I forget that it runs in a browser. It comes into its own when combined with Git deployment – for instance when editing GitHub pages. I can maintain my website entirely from a web browser.

It really starts to open up the power of creativity in the cloud, and now with a new more minimal look.

Posted in General | Comments Off

Announcing Orion 8.0

The Orion Project is pleased to announce the release of Orion 8.0. You can check out the new release now on OrionHub, or grab your own copy of the Orion server from the download page. The Orion Node.js implementation matching this release is orion 0.0.35 on NPM. The Orion 8.0 release includes over 1000 commits from 36 unique contributors, and fixing 280 bugs. The major themes for this release were building higher value tools for JavaScript/CSS/HTML development, and in making the Orion server highly scalable.

In language tools, Orion 8.0 introduces Quick Fixes for automatically resolving common coding problems, semantic file to file navigation, smart language tool hovers, and many more smaller enhancements. For complete details on the extensive web tooling improvements, read Orion 8.0 Language Tooling Enhancements Part 1 and Part 2

On the server side, the main focus for Orion 8.0 has been on clustering support. For a site with heavy traffic, it is useful to have multiple Orion instances operating on the same Orion workspace content. This also allows you to have a running standby instance for fail-over and upgrade without any site downtime. To support this, Orion 8.0 has introduced file-based locking to manage contention across multiple instances. In addition, persistent state has been divided between instance-private and shared locations, to prevent sharing of the server’s own internal state that is not designed for sharing across instances.

A final major change on the server side was completely rewriting our search infrastructure. The new Orion search implementation provides global search and replace based on a server side search crawler, rather than indexing. This means searches take a little longer, but they have perfect accuracy. Server side search now also supports regular expressions and case-sensitive search, making this kind of search much faster than before. This implementation also simplifies Orion server management for large-scale Orion installs, because it saves Orion server admins from having to deal with search index sharding and Solr clustering. This server side global search is currently only available on the Java implementation of the Orion server, but there is a team in the community working on a Node.js implementation for this as well.

Enjoy!

Posted in Announcements | Comments Off

Orion 8.0 – Language Tooling Enhancements – Part 2

The number of language tooling enhancements added to Orion for the 8.0 release is so large we had to break it up into two parts.  The first part explained the introduction of hovers.  Try out all of these new features right now at orionhub.org

JS Validation

There are plenty of bug fixes and several new rules added to our JavaScript validator in 8.0.  ESLint, which runs our validation rules, was updated to version 0.8.2.

  • Assignments in conditional expressions:
    nocondassign
  • Reserved words used as property keys:
    noreservedkeys
  • Constant as conditional expression:
    noconstantcondition
  • Trailing commas in object expressions
  • Discouraged console use in browser code
  • Multiple spaces in regular expressions
  • Discouraged __iterator__ property use

Remember that you can configure the severity for each rule on the JavaScript settings page, or modify the severity for a specific file by adding an ESLint comment to your file.

Another cool new feature in Orion is the Show Problems action.  Available by right clicking on a file or folder in the navigation pane > Show Problems…  This will run the validator on all of the selected content, displaying the entire list of of issues.  The list can be filtered by text or source file and clicking on any problem will take you directly to the annotation.

problemsview

CSS Validation

Potential problems in your CSS files are found using CSSLint 0.10.0.  You can now configure the severity of each problem on the CSS settings page.

csssettings

You can also configure the severity of problems in each file by adding a csslint embedded ruleset.  There is also now content assist proposals to help you set the severity for specific rules.

csscontentassist

Quickfixes

When hovering over problem annotations in the editor you may see links to resolve the issue.  This is the new quickfix feature.  Quickfixes provide one click solutions to fix problems in your code.

There is no service API to provide quickfixes.  Currently you must provide commands with a scopeID of ‘orion.edit.quickfix’.  The commands will be rendered as links under problem annotations.  In 9.0 we are looking into making quickfixes be contributed through a separate API.

The JavaScript tooling and CSS tooling both provide quickfixes for some problem types and we plan to continue adding more throughout the next release.

jsquickfix

cssquickfix

File Navigation

Quickly searching and navigating between source files is one of the major benefits of coding in an IDE over a simple text editor.  Finding the file referenced in a Node.js or AMD Module dependency can be time consuming.  Orion 8.0 has a number of improvements to make this much easier.

In JavaScript, under the tools menu, you can use the Open Declaration command to jump to the function declaration for your selection (don’t forget that hovering will show you the formatted JSDoc for the function).  The keybinding for this is F3.

We also provide a hover that will link to absolute and workspace relative paths, allowing one click access to your dependencies.

navdefinenavimportscriptsnavrequirenavcss

This feature extends to the CSS and HTML tooling as well allowing you to swiftly move between associated files.

If the tooling isn’t sure which file you are referring to, a list of potential files is displayed.

HTML with embedded scripts and styles

The quality tooling available when editing JavaScript and CSS files is also available in the HTML editor.  When there are embedded scripts and CSS styling in an HTML file content assist, validation, hovers, quickfixes and file navigation are all available.  All of the embedded content is handled as a single unit like the browser will, so you can use tools like Jump to Declaration even if the script is split up in the HTML source.

 

Posted in New & Noteworthy | Comments Off

Orion 8.0 – Language Tooling Enhancements – Part 1

The number of language tooling enhancements added to Orion for the 8.0 release is so large we had to break it up into two parts.  Here is the first list of new and improved features available right now at orionhub.org

Hovers

We have introduced a new orion.edit.hover API to provide tool-tip like hovers in the editor.  The hovers can display detailed information or even provide rich HTML content.  The JS and CSS tooling already implements hovers to provide immediate feedback on what you are looking at.

In the editor:

Hovering over an annotation will provide the complete description of the issue.  You can implement the orion.edit.validator service to add your own translatable problem annotations.  In this screenshot you are also getting a sneak peek at a new feature that we will talk about in Part 2.

undefinedhover

You can provide hovers for any part of the file you hover over, not just existing annotations.  For example, in JavaScript files if you have over a function declaration or expression that has JSDoc attached you can see the formatted documentation.

jsdochover

Speaking of documentation, you can use the keybinding Shift-Alt-J or under the menus at Tools > Generate Element Comment to have the tooling generate your JSDoc comment for you.  Be sure to include the return/param types so that you get accurate content assist proposals based on the types.

generatecomment

In the ruler:

There are many annotations visible in the left and right side rulers when editing.  Hovers can be provided for any of these annotations and different content can be displayed based on which ruler is being hovered over.

Multiple annotations on a line will be displayed in the left hand ruler with a ‘+’ symbol.  Hovering over the icon will display the complete list of problems.  Click on the icon in the ruler to select the first annotation.  You can continue to click to skip through the different problems.  You can also double click in the left ruler to bookmark the line, adding an annotation that can easily be jumped back to after scrolling away.

multiannotations

When using the Git tooling, you can see more detailed blame and diff information when hovering over the colored annotations in the rulers.

blamehover

Occurrences and search results for the entire file are displayed in the right-side ruler.  Hovering over the ruler will display the source of that line.

occurrencesrulerhover

In content assist:

The hover API is also used to provide detailed information on content assist proposals.  The JS tooling provides detailed information for types provided by indexes.

contentassisthover

Rich Content:

The hover API supports plain text and markdown syntax allowing you to style the contents.  For richer content you can also provide HTML content, embedded in an iframe.  The CSS tooling is full of rich hovers to preview what your elements will look like.

Named colors, rgb and hsl values are displayed.

rgbhover

Images are previewed in the hover.

cssimagehoverFont family and font weights can also be displayed.

cssfonthover

What’s next:

In 9.0 we plan to continue expanding our usage of hovers.  We are experimenting with interactive content (color picker, regex assistance) and want the look and feel of hovers to be customizable using themes.

In the next part of this language tooling enhancements list we will talk about validation using ESLint and CSSLint, quicker ways of fixing the found problems and how we use hovers to allow faster navigation inside and between files.

Posted in New & Noteworthy | Comments Off

Strong Orion program for EclipseCon 2015

Next month is EclipseCon 2015, in Burlingame California. Several Orion committers will be there, and there is a great selection of talks on Orion, as part of the Cloud Development track. Here are some of the highlights by day:

Monday

Start your conference with the Introduction to Cloud Developer Tooling tutorial. This session will provide a survey of the major cloud development tooling projects going on at Eclipse: Che, Flux, Orion, and Dirigible.

Tuesday

There are two Orion talks on Tuesday afternoon. Git it Done is about the completely redesigned Git user interface built for Orion in the past few months. This new Git page was built from the ground up to provide a simpler and more intuitive user experience for new users, while retaining all the power options for the Git ninjas out there. The next talk, Building Orion Plug-ins, talks about the experience of building extensions to Orion from the perspective of an Orion adopter.

Finally, on Tuesday evening there will be a contributor Hackathon. Many different Eclipse projects will be part of this event, but there will be a few Orion committers there to help guide people through the process of making their first contribution to Orion.

Wednesday

On Wednesday morning, JavaScript Language Tools in Orion will talk about the state of Orion JavaScript tooling. There has been a massive amount of new feature work in this area for Orion 8.0, and this talk will show what is available, and how it was implemented. After lunch, Adapting JDT to the cloud looks towards the future, showing some early investigation on bringing Java development tools into cloud environments such as Orion.

Thursday

Extending Eclipse Flux will delve into the incubating Eclipse Flux project, which is exploring how to connect development tools between desktop and cloud environments such as Orion. Finally during the afternoon, check out The Making of XRobots. Ok, it’s not really about Orion, but it includes XText, Lego, and robots so how can you go wrong?

Of course the sessions are only a small part of the EclipseCon experience. There are plenty more opportunities to learn new technologies and meet like-minded developers, whether it’s walking the exhibit area, checking out poster sessions, lunch and snack breaks, evening BoF sessions, or the ever popular late nights at Knuckles Bar. So what are you waiting for? Register already!

Posted in General | Comments Off

What’s new in Orion’s Markdown editor

markdownEditorImprovements

We want Orion’s Markdown editor to be the most useful and enjoyable one that’s out there. Here’s what’s improved recently:

  • Content assist

No more need to refer back to the markdown syntax on Daring Fireball, just invoke the Orion editor’s standard content assist (Ctrl+Space) to see the available md and gfm templates.

  • Warning annotations

Warnings are now displayed for the following:

  • Unordered list item within ordered list
  • Ordered list item within unordered list
  • The first item in an ordered list should have index 1
  • Undefined link ID
  • Duplicate link ID definition
  • Link has no URL
  • Link has no text
  • Header level cannot exceed 6

More warning types are under consideration.

  • Generate HTML File command

Outputs the preview pane’s HTML content to a file.

  • All header elements are now generated with anchor id’s
  • New splitter thumb to minimize the preview pane
  • New pane orientation toggle
  • Various bug fixes, particularly in the areas of lists, code blocks and reference links

 
Looking for a reliable place to author your markdown documents? Check out OrionHub!

As always, we also want to hear your Feature Requests and Bug Reports.

Posted in New & Noteworthy | Comments Off

Orion’s new Help system

As was described in the Orion 7.0 release announcement, the Orion Help system has finally gotten the re-write it has long needed. Beyond eliminating our last use of JSPs, the new Help now features:

  • A more integrated look

Orion Help Screenshot

  • A new service point for plug-in contributions: orion.help.pages

A plug-in can contribute a top-level entry to Help’s table of contents by providing a root property representing the root page ({Location: object, Name: string, Directory: boolean}) [example]. Orion Help then invokes functions on the registered service as its page content/sub-pages become needed. This service purposely resembles Orion’s file service (read, and optionally fetchChildren and readBlob), and returns either immediate results or promises [example].

  • Consumption of markdown content

Everyone’s using markdown these days. This is what a plug-in’s read implementation needs to return. You can easily author it in Orion’s markdown editor.

  • Generation of document hierarchy based on markdown headers

A full document tree can be defined in a single markdown stream, no separate sub-pages required.
markdown file headers

Eclipse Help System we knew you well, and wish you all the best on the desktop.

Posted in General, New & Noteworthy | Comments Off

Announcing Orion 7.0

Orion 7.0 is now available! Check it out right now on OrionHub, or download your own server. This release brings some significant changes, including rewriting several parts of the UI and adding capabilities in others. Here is a quick overview of what’s new:

A new Git UI

The evolution of our new Git UI that we began in Orion 6.0 is now complete. All major Git capabilities are consolidated on one page, with a two-pane layout similar to the Orion editor. The left hand side shows a history timeline, and has operations for manipulating branches such as fetch, merge, squash, push, etc. A new Sync button has been added which performs all the most typical operations to get your local clone synchronized with the chosen reference point (merge or rebase, then push). Fetching occurs automatically every time you visit the Git page. The right hand side is used to display commit details, create new commits, and perform operations on commits such as reset, tag, cherry-pick, etc. Overall, this new layout makes much better use of available space, is more touch friendly, and simplifies the most common Git workflow. The underlying implementation has also had some significant performance work, making many operations much snappier than the previous release.

r7-git-ui

A new help system

The 1990’s called and wanted its help system back, so we implemented a brand new one using modern web technologies. The new help system is a simple HTML5 and JavaScript page with overview and detail panes. Help content is authored in Markdown (naturally using the Orion Markdown editor), and rendered into HTML for display. Ditching our last use of JSP technology has also made the Orion Java server lighter and easier to consume.

r7-help-ui

A new global search UI

The separate global search page has been replaced with a fly-out that appears directly in the editor. This reduces context switching and allows you to more seamlessly integrate searching into your editing workflow. All the same search and replace capabilities are available in this new UI. Read more about it here.

r7-search

Language tooling enhancements

Many improvements have been made to CSS and JavaScript language tooling in this release. Read all the details here.

Editor hover help

The Orion editor has initial support for hover help aid in code exploration. If you hover over a function, the rendered documentation for that function is shown. In Orion 8.0 we will hook this more deeply into the static analysis engine to provide hover help in many more places.

r7-hover-help

New authentication types

Support has been added for authenticating with Google+ and GitHub auth. Read more about it here.

Cloud foundry tooling

This release has many new features for developing and deploying for Cloud Foundry. Orion now has a Cloud Foundry manifest editor with syntax highlighting, error and warning reporting, and content assist. The deploy dialog now has support to launch applications with missing or incomplete manifests, with the option to persist missing manifest content during deployment.

r7-cf-editor

Multi-instance server

The Orion Java server has been architected to support multiple concurrent server instances behind a reverse proxy. This architectural change enables scenarios such as fail over, load balancing, and zero downtime upgrades of the server. This work involved more comprehensive use of file locking to avoid contention between server instances, and making sure only one server performs background tasks such as search indexing to avoid work duplication. The server also now always separation of instance-private disk state from content that needs sharing between instances. Stay tuned for more documentation on how to configure and deploy multi-instance Orion clusters.

It has been a busy four months! Our next release, Orion 8.0, will be coming at the end of February, 2015. Until then, enjoy the cloud coding!

Posted in Announcements, New & Noteworthy | Comments Off

Orion 7.0 – Language Tooling Enhancements

The upcoming Orion 7.0 release has many improvements and enhancements in the language tooling, especially for Javascript development. Here is a list of the more notable changes coming in 7.0!

Updated third party libraries

Many third party libraries have been updated in 7.0:

Improved content assist

JavaScript content assist has been improved in many ways, like allowing proposals inside JSDoc-formatted comments,  improved object support from our indexes and improved built-in type detection.

We can help add JSDoc tags:

jsdoc-tag-assist

JSDoc tag assist

We can show assist for parameters:

jsdoc-param-proposal

Function parameter JSDoc assist

We can show assist for type objects:

jsdoc-object-assist

Object JSDoc assist

We can show the actual return type of items from our built-in indexes (rather than simply ‘Object’):

index-type-assist

Correct index object types

We can also show assist for RegExp literals (finally):

regexp-literal-assist

RegExp literal assist

Enhanced ESLint support

Along with the version update to ESLint, we also spent time improving the overall integration support for ESLint. In doing so, we provided new linting rules and some content assist templates / completions to help you craft ESLint directives.

The new no-empty-block rule (off by default) can be used to detect empty code blocks. When an empty block is found you get a pleasant warning in the editor, with a suggestion how to fix it:

empty-block-rule

Empty code block rule

Another new rule, throw-error, will check to make sure that you only throw error-objects from throw statements. If you fail to do so, you will see the helpful reminder:

Throw an error instead

Throw an error instead

With the change to stop using JSLint/JSHint directives and a linting rule in place to warn you about the unsupported usage, we thought it best to add some content assist completions to help you craft correct ESLint directives.

So now we have ESLint directive templates:

eslint-templates

ESLint directive templates

Assist setting up an environment:

eslint-env-assist

ESLint environment assist

Assist disabling / enabling rules:

eslint-rule-assist

ESLint rule assist

Parser improvements

In order to provide content assist inside JSDoc blocks, one of the things that we had to do was add recovery support for unclosed / incomplete comment blocks while parsing your source. The new block comment recovery support will parse and recover all complete statements up to the incomplete comment.

In the following example, the declaration can be recovered, but the if-statement cannot (since the comment is also breaking the if-statement):

recovered-comment

Recovered from an incomplete comment

Support was also improved to report parsing errors that cause a complete failure to parse, where no tokens at all are being returned from the parse. In the following example we now correctly report the bad ` token:

fatal-error-reporting

Bad parse errors properly reported

Improved mark occurrences

A lot of work has gone into improving the accuracy and adding new occurrence support.

We can now show you occurrences of labelled statements:

labelled-statement-occ

Labelled statements

Correctly show occurrences in throw statements:

throw-statement-occ

Throw statement occurrences

Mark occurrences in use-before-define and hoisting scenarios:

hoisting-occ

Use-before-define and hoisting

We even fixed a long standing bug that refused to show occurrences for something that was not defined in the file:

Global occurrences

Global occurrences

Improved web tools

Our support for HTML has been improved with the addition of an HTML outline, which is powered by the htmlparser third party library.

HTML outline

Posted in New & Noteworthy | Comments Off

Orion 7.0 – Inline Global Search Pane

As of Orion 7.0 the stand-alone Orion Search page will be replaced by an inline search pane in the Editor page. There are several reasons for this. First, as a user, immediately before initiating a search, you are almost always browsing or modifying existing files on the Editor page. Second, after obtaining the search results, you almost always return to the Editor in order to browse or modify the file you were looking at or a file you found during the search. Having a separate search page forced you to switch contexts while searching. This created an artificial separation between the tasks of editing/browsing files and the task of searching through them, while in fact, the latter is a secondary task performed to support the former.

With the search inside the Editor page you can now initiate a global file content search without leaving your current tab. Select “Edit” → “Global Search…” from the main menu bar or use the keyboard shortcut Ctrl+Shift+H (Cmd+Shift+H on Mac) to open the inline search pane.

EditMenu

Enter the search parameters and click on the search button to initiate the search. (Tip: Hitting Enter in any of the text input boxes also triggers the search.)

SearchOptions

The search parameters section will collapse and the list of files with matches will appear in the inline pane. You can expand each file in the list to see the lines which contain matches or you can click on the file name to open it in the editor on the right hand side.

SearchResults

To run another search click on the “^ Edit Search” link in the top left corner of the pane. This will expand the search parameters area allowing you to modify your search and run it again.

Search and Replace

As was the case with the stand-alone search page, the inline search pane supports search and replace. To perform a replace operation click on the “Switch to Replace Mode” link below the search term input box. After filling in the parameters click on the “Replace…” button to see a preview allowing you to select specifically which matches to replace and which to ignore. (Note: Clicking on the “Replace…” button will NOT modify any of your files.)

ReplaceOptions

The list of matches will appear in the inline search pane and a preview of each file showing the before and after versions will appear over the editor on the right hand side. A little tab with the word “Preview:” and the name of the file will appear over the editor indicating that this is a preview only. For now this preview is read-only and supports none of the editing or in-file searching functionality.

PreviewReplace

Once you have selected which matches you wish to replace using the check marks next to the inline search pane’s result list click on the “Replace Selected” button, above the result list, to apply the changes to your files. The inline search pane will display the list of files that were modified as well as the number of matches that were modified in each file.

ReplaceReport

Posted in New & Noteworthy | Tagged | Comments Off