Orion 9.0 Code Edit Widget With Language Tooling

Orion 9.0 was just announced with greatly enhanced javascript language tooling features. In addition to using Orionhub.org as an IDE, developers have been demanding that they can embed the Orion editor into their web pages with all the features that the Orion editor offers. Now Orion 9.0 comes with a new widget called “Code Edit”.

Consuming the Code Edit widget is very simple. You just need to go to the Orion 9.0 download page and download the widget build named built-codeEdit.zip.

download

After downloading the build you can host the unzipped files into your web server and start to consume it in your web page. The Code edit wiki page describes how to consume it but as a quick start you can use the run-able html example to launch it. It only takes you several minutes to do so. We’ve also hosted a demo page where you can try the widget right now!

demo

While Orion 9.0 announcement describes some new tooling features in 9.0, there are existing features like syntax highlighting, problems validation, quick fixes, etc. You can find a quick guide from the feature list on the demo page.

The demo page only demos a javascript file but the widget supports more languages such as css, html and most of the web languages. Refer to the list of supported file types for syntax highlighting. You can also theme the editor’s syntax highlighting and other visual parts. The editor theming  describes more on these.

As the Code Edit widget is part of the Orion build, we are actively adding features and doing bug fixes for the widget. Stay tuned with the post 9.0 stable builds!

As part of the future plan, we will allow users to inject their own plugins to the widget. For example, this will allow users to add new language syntax highlighting, add more editor commands, add their own file systems for multiple file reference on language tooling, etc.

 

Posted in General | Comments Off on Orion 9.0 Code Edit Widget With Language Tooling

Announcing Orion 9.0

With the continuous delivery model of the Orion cloud IDE you may have already tried many of the awesome new features in the latest release.  The official release of Orion 9.0 provides an excellent time to review and promote what the project has been up to.

Try them now at Orionhub.org!

JavaScript front and center

JavaScript tooling was the focus throughout the release.  The plugin back-end was restructured to load faster and run in a web worker.  The engine powering content assist and hover information was replaced with Tern, a code analysis tool running on our existing Esprima based parser.  The front end client got expanded capabilities in tool-tips, context menus, split editors and commands to provide access to all the great new functionality.

Tern in Orion

The single largest change made this release was adding a Tern server for code analysis.  As soon as you start editing code we are feeding Tern information about what you are working on.  Beyond the file you are editing we follow dependencies and add their information to Tern as well.  This includes Node libraries linked through require() calls, AMD modules linked via define() calls and embedded scripts in HTML files.  Further to that, Orion includes Tern readable indexes containing type information for common libraries including ECMAScript, Node.js, Redis, MySQL and others.

Tern performs code analysis on all of the scripts available and returns highly accurate and context specific content assist proposals (Ctrl+Space to activate).  We have a large library of code templates as well to help you code faster.

proposalList

Tern also returns us in-depth descriptions for the types and functions you use.  We deliver this information in the form of tool-tips (hover with the mouse or press F2).  Use tool-tips to help understand the arguments in your API calls.  In many cases we provide a link to the MDN spec where you can continue to learn more.

tooltip1tooltip2tooltip3

Take your IDE a step further by navigating the tree of dependencies.  You can already hover over require/define dependencies to navigate to those files.  Now you can Jump to Declaration (F3 or the Tools menu) from anywhere in your code to immediately navigate to the declaraction of a function or variable.  This includes jumping to other scripts.

Find yourself constantly navigating between files?  Use the split editor view (drop down menu at the top right) to display multiple files on the same page in whatever layout works for you.

split

Use the information Tern has collected to perform some refactoring.  The Rename Element command (Shift+Alt+R or the Tools menu) will let you choose a new name and have Tern figure out all the places needing changes.

rename1

rename2

More to discover

Of course many more enhancements and bug fixes have gone into the release.  New versions of our third party libraries (ESLint 0.15.1, ESTraverse 1.9.0, Esprima 2.0) are included.  New validation rules no-shadow-global, no-proto, no-undef-init, no-with and missing-nls along with new quickfixes have been added.  The editor tool-tips have much smarter placement and sizing logic while allowing scrolling and resizing for large JSDoc entries.  The JavaScript Validation settings are now split up into categories for easier browsing.  You can see what Tern libraries are installed on a settings page as well.  Nearly 200 bug reports were fixed relating to the language tooling.

Don’t wait, use Orion to code, deploy and run in the cloud.

Posted in Announcements, New & Noteworthy | Comments Off on Announcing Orion 9.0

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 New & Noteworthy | Comments Off on Orion’s new look, and split editor

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 on Announcing Orion 8.0

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 on Orion 8.0 – Language Tooling Enhancements – Part 2

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 on Orion 8.0 – Language Tooling Enhancements – Part 1

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 on Strong Orion program for EclipseCon 2015

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 on What’s new in Orion’s Markdown editor

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 on Orion’s new Help system

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 on Announcing Orion 7.0