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.


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.)


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.


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.)


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.


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.


Posted in New & Noteworthy | Tagged | Comments Off

Orion 7.0 – GitHub and Google+ Authentication

Orion 7.0, coming in late October 2014, will have significant improvements to its authentication infrastructure. Orion will now support OAuth 2.0 providers for authentication, in place of the OpenID and Mozilla Persona authentication methods. Orion 7.0 stable builds can be downloaded now on the Orion download page.

New Authentication Changes

Orion 7.0 allows you to authenticate using your existing OAuth 2.0 accounts. This means if you have an existing Google or GitHub account you will be able to log into Orion 7.0 securely and easily. This gives you multiple options for authentication.

With this update we also removed Mozilla Persona support. For more information on Mozilla Persona visit: https://login.persona.org/

This changes our home page slightly to display 3 methods of authentication:

  • Orion
  • Google+
  • GitHub

Auth Logos

Google Migration

With this update we are also updating the old Google OpenID authentication to the new Google OpenID Connect, based on OAuth 2.0. Soon Google will no longer support the old version so all systems need to updated accordingly. If you have already linked your account with your Google account you will need to update it to the new OAuth 2.0 authentication. Luckily this is quite simple.

All you need to do is try to authenticate to Orion using the Google icon. Then Google will prompt you to accept the new permissions.

Authorize App

That’s it! You will now be in Orion 7.0 and your account will already be updated.

For more information on Google’s authentication migration visit: https://developers.google.com/+/api/auth-migration#timetable

Create a Linked Account

Creating a linked account used to be difficult but we have now changed this to make it relatively painless. There are two ways to create a linked account:

  • Create a new account
  • Link an existing account

New Account

To create a new linked account, simply try to authenticate with the OAuth provider of your choice (GitHub or Google).

If the account does not exist you will be sent to an account creation page.

Create Account

The account you create will automatically be linked to your OAuth account.

Existing Account

To link an existing account to your OAuth account is the same as it used to be. First log into your Orion the account you wish to link. Then go to the Settings Page → User Profile.

Link Account

At the bottom of the page is the Linked Accounts section. Here you can either add/remove your OAuth accounts. You can also remove your old Google OpenID and Mozilla Persona accounts.

What’s Next?

We plan to redo our landing page to make it more inviting and informative for new and existing users. This will explain the basics of what Orion is and how to use it.

We also plan to have more integration with your GitHub account so that if you link your account you no longer need to authenticate again to perform git operations.

Posted in General, New & Noteworthy | Tagged , | Comments Off

Orion 6.0 – Git Page Changes

In an attempt to stream line and improve Git workflows, we have started on a redesign of the Git pages in Orion 6.0

From Many to One

One of our main design goals was to reorganize all of the git functionality from multiple pages down to one. We used to have individual pages or views on pages for:

  • git status
  • git log
  • git repository
  • all git repositories
  • branches
  • tags
  • git configuration options

With the exception of the all git repositories page (which we are in the process of redesigning), all of the other pages have been merged into the current Git page which looks like this (with sections collapsed):


Let’s take a look at what’s in each of these sections. Starting from the very top:

Repo Header

At the very top of the page, we have the name of the repo along with buttons that perform repo-level actions:

  • Apply Patch: brings up a dialog that lets a user select the URL or file that contains the patch
  • Pull: Performs a Pull on the repo (fetch + rebase)
  • Delete: Deletes this repo

Changed Files

This section replaces the old git status page – it will show you the current state of your working directory. With no files changed, the section looks like this:


The top of the section contains the 2 main section buttons:

  • Discard: discard any changes made to selected files and revert the files to their previous committed state
  • Commit: commit selected files with the messaged entered in the message box

Next down comes the message box area which is used to enter a commit message – notice the 2 checkboxes. Amend Previous Commit can be toggled to amend the previous commit (the previous message will be fetched and displayed in the message box). Prepare for Gerrit will add a ChangeId to the commit message.

When files are changed, they appear in a table under the message box:


The files can be expanded to reveal the changes made:


Note that you can also choose to view the diffs side by side or open a compare editor to view the diffs.

You can select the files to include in the commit by using the checkboxes (or the select all checkbox if you want to include all files). As you select files, a number counter at the top of the table changes to match your selected file count.

Once you have selected your files (and typed in a message) you can hit Commit to commit them (or Discard to discard the changes made).

When you have files selected, a Show Patch link appears on the same line with the Commit and Discard buttons. This will create a patch for you out of the files that you have selected.



The commits section has been redesigned with some new sub-sections.


  • Outgoing: this section lists all of the commits that have not been pushed yet to the remote repo
  • Incoming: this sections  lists all of the commits that have not been merged into the local repo
  • History: this section lists all of the commits that the local branch has in common with the remote branch.

Let’s see what happens, when we commit the change from the previous section:


The commit shows up in the Outgoing section. Note that there is a new Undo button that will let you undo the commit and restore the changed files back into your working directory (a soft reset).

Before pushing, you want to be sure that you are caught up to all changes, so you can hit Fetch in the Incoming section to fetch the latest changes. All of the changes that haven’t been merged will show up and you can accept them by hitting Rebase or Merge.


The accepted changes now show up in the History section. You can scroll down to view the the history, or hit the “More commits for <Branch>” to load more entries.


Once you are all up to date with the remote branch, you can Push your changes.

There is also a new button Sync which is combination of Fetch/Rebase/Push.

Changes in a Commit

Expanding any commit in the history will reveal the changed files (this is true for any place a commit is shown on the page) :


Branches and Tags

The branches and tags sections have been merged into one section as well. There are top level items for local branches, remotes and tags. The 2 buttons in this section are:

  • New Remote: brings up a dialog to add a new remote
  • New Branch: brings up a dialog to create a new branch


If you expand the local item, you will see all of the local branches you have for the current repo – you can check a branch out from here.


If you expand the branch – you will see the log for that branch along with all allowable actions next to each commit.


Each remote can be expanded to reveal all of its remote branches along with applicable actions for each entry.


You can see the log for a remote branch by expanding it.

The tags section follows the same pattern – expand the top level item and you are presented with the list of tags along with all available actions for that tag.



The configuration section is now being rendered as a table.


 More to Come

Although the Git page is in a reasonable state right now, we have some future improvements planned that will truly allow for a one page design. Stay tuned for more!

Posted in General, New & Noteworthy | 1 Comment

Orion’s new Markdown editor

Markdown has emerged as a popular authoring format for on-line documentation. The recently released Orion 6.0 includes a new split-pane Markdown editor that previews your generated HTML document as you type. You can try it out now, along with the rest of Orion 6.0, on OrionHub.

Initial editing of a .md file: Features typical Orion editor responsiveness, syntax styling and annotations. The preview pane is auto-scrolled to keep it in sync with the source editor, and its highlighted region reflects the caret position in the editor.

Some editor options you may wish to change (note: to add Word Wrap to this menu go to Settings > Editor and select the little circle beside the Word Wrap option)

Vertical split orientation: The preview pane is still auto-scrolled to keep it in sync with the source editor.

gfm extensions: The editor handles extended markdown syntax supported by the marked library, which includes Git Flavored Markdown. The following screenshot shows a gfm table, fenced code block and strikeout text.

What’s next?

The Markdown editor will continue to improve during the Orion 7.0 timeframe. We have some initial enhancement ideas in mind, including content assist, warning annotations, and various usability tweaks. We’d also really like to hear your enhancement requests and bug reports, to ensure that it’s the best markdown editor out there. Thanks in advance!

Posted in New & Noteworthy | Comments Off

Orion and ESLint 0.6.2

In 7.0 we updated the version of ESLint used in Orion to 0.6.2 which has many improvements over the last version we were using (0.4.2).

There is a catch though.

Since version 0.4.2, ESLint has dropped support for the jslint / jshint directive used in-source to describe your environment.

For example: /*jslint amd:true*/

The new way to do this is to use the eslint-env directive.

For example: /*eslint-env amd, browser*/

Configuring ESLint has the complete rundown on setting up your desired environment(s), but the basics are:

  • Use only the name of the environment to indicate it should be used, i.e. there is no amd:true or amd:false, amd alone means amd:true, leaving it out means amd:false
  • If using more than one environment, they are defined in a comma-separated list like: /*eslint-env amd, browser, mocha, node*/

Just in case you forget all about these directives Orion has a linting rule to remind you to update them….

Unsupported directive warning

Unsupported directive warning


Posted in Integrations, New & Noteworthy, Tips & Tricks | Comments Off

Article on Orion and BeagleBone Black development

There’s a great article by Benjamin Cabé over at Element14 about utilizing Orion to do development on a BeagleBone Black leveraging Node.js, MQTT and all sorts of other Internet of Things technology.

Eclipse Orion, Arduino and BeagleBone Black – Prototyping your Internet of Things

Posted in Integrations, Tips & Tricks | 1 Comment

Orion 6.0 – Language Tooling Enhancements

The upcoming Orion 6.0 release will bring many improvements to your online IDE experience.  Many enhancements and improvements have been added to the language tooling support in Orion, especially for Javascript development.  Here is a list of the more notable changes prepared for 6.0!

Additional syntax highlighting

Orion now provides syntax highlighting for .c .h. cpp and Arduino (.pde/.ino) files.


Generating JSDoc

A new command has been added to help with creating JSDoc for function declarations and function expressions. It is found in the Tools menu for JavaScript source and is called Generate Element Comment with the key binding Alt+Shift+J (Win / *nix) and Ctrl+Shift+J on Mac OS.

The command:

… will insert JSDoc like this on function expressions:

… and will insert this JSDoc on function declarations:

Javascript tooling inside HTML script blocks

Much of the Orion Javascript Tooling support is now available while working in the HTML editor.  Linting support will now run on Javascript code inside of <script> tags.  Show occurrences will function when variables and functions are selected inside your scripts.


Javascript validation overhaul

The validation/linting support for Javascript in Orion, built on ESLint, has been given an overhaul with new rules, an updated engine and more user flexibility.  The validator will scan your Javascript files (as well as HTML <script> tags) and add errors or warnings to the margin of the editor.  Hovering provides a more detailed explanation of the issue.


Users can now customize the warnings they see on the new validation settings page, Settings > Validation.  Each validation rule can be set to error, warning or ignore.

A large number of rules have been added, warning you of discouraged code styles, missing documentation, unused variables, unreachable code and many other common programming problems.  All of the rules have variable severity which you can set on the Validation settings page.

New code validation rules

There have been a lot of new rules added to ESLint in Orion in 6.0, some of the more notable ones are:

Unused params:

Duplicate object keys:

Unreachable code:

Scoped code templates

When activating content assist (Ctrl-Space) the Orion Javascript Tooling Support provides many code templates for common code patterns and common library usage.  Previously the entire template list would be made available to the content assist proposal list, only being filtering by the characters typed.  Now, the location you are in is used to scope the proposals so that only applicable code patterns are provided.

Unscoped proposals:

Scoped proposals:

Show occurrences of object properties

Selecting a named object property with Show Occurrences turned on will highlight the property definition as well as all references to it within the object expression (via this object).


The outliner has also been improved to list the properties of an object.


ESLint updated

Orion is now using the the latest version of ESLint – 0.4.2

Esprima updated

The Esprima parsing library that underpins much of the Javascript tooling support in Orion has been updated to 1.1.0-dev.

Parser updates

The Orion customized version of the Esprima parser has seen many updates in 6.0, from performance improvements in  the token stream and ESLint integration to improved parser errors that direct users how to correct their code problems.

There have also been a few updates to the parser’s tolerance while parsing code with errors in it. Additional recovery support has been added for the following scenarios:

Missing tokens in call expressions:
Missing tokens in object expressions:
Missing declarations in object properties:
Missing tokens in if statements:
Missing tokens in while statements:
Missing tokens in for statements:

Experimental Web Worker Support

The JavaScript Tools engine can now be hosted in a web worker, off the main browser UI thread. The worker delivers increased responsiveness when editing very large files, as expensive operations like parsing and validation do not block the UI. The worker is turned off by default in the Orion 6.0 release, but users can enable it by doing the following:

  1. Go to Settings > Plugins.
  2. Scroll down to “Orion JavaScript Tool Support” and click the Plugin link.
  3. Click the “Use a web worker” checkbox:
  4. Reload the Orion editor. You won’t see any visual changes, but under the hood, the JS tooling will be super fast.
Posted in New & Noteworthy | Comments Off

Orion 6.0 – Continuous Delivery

It has been a couple of months since any form of new Orion milestone has been announced, so you may be wondering just what the heck is going on with the Orion team! Rest assured there has been a ton of work going on behind the scenes, and OrionHub has even been silently upgraded with new features a few times since the 5.0 release. The Orion 6.0 release will be out at the end of June 2014, and a recent stable build is now available for download.

What’s been happening is that the Orion committers are moving towards a continuous delivery development model. Quick, can you tell me what version of Facebook you are using? When was the last time you upgraded to the latest version of Google Docs? Web applications (and to a lesser extend mobile applications) don’t lend themselves to sudden, drastic feature releases.

Rather than produce a stable build every six weeks with a big bang of new features, we are aiming for a continuous stream of new features, each released on its own schedule when ready for consumption. This is a delivery style that is much better suited for web applications, rather than the milestone process that we inherited by osmosis from the Eclipse release train. The release train rhythm works very well for a project that releases once a year, but quickly lost any meaning to us once we started down a path of continuous delivery.

The Orion team is still working out the best development practices for this sort of delivery model. For now, we are using a form of the Feature Branch pattern, so you can get a sneak peak at our upcoming new features by taking a look at our Git repository:


Each major new feature gets a branch. Once a week (or maybe more), we cut a stable build branch. We use that branch for final integration testing and fixes, declare the stable build, and then start the process over again. We still have a lot more details to work out before we arrive at a process and infrastructure that we are happy with. In particular we need to improve our automated integration testing so that developers can test their topic branches and deliver to master with confidence that they didn’t introduce integration problems. We also need to improve our server architecture to support clustering and instant fail-over, so that continuous delivery doesn’t turn into continuous downtime for those delivering Orion-based web applications.

There is of course one very valuable by-product of the milestone process that we lost along the way. The milestone ritual reminded us to gather up and announce all the big new features we had introduced over the past six weeks. Over the last couple of months we have completely failed to let the community know about all the cool things going on in Orion, which is something we need to fix and integrate into our continuous delivery practices. Expect to see more frequent (but smaller) posts about new Orion features over the coming months. If you have any continuous delivery wisdom to share that can help us, please let us know either here or on the orion-dev mailing list.

Posted in Announcements, New & Noteworthy | 1 Comment

Ken’s Top 5 JavaScript Sessions at EclipseCon 2014

If you’re interested in JavaScript and/or Node.js development this years EclipseCon North America has some great sessions in store for you! It starts off with a Tutorial Monday with the Orion team titled END TO END WEBAPP DEVELOPMENT WITH ORION. We’re going to run through building an application from scratch leveraging Bootstrap and TableTop.js.

You can click on this link for the JavaScript sessions at EclipseCon but if I have to pick a top 5 I’ll go with:

Ariya is well respected in the JavaScript community for his libraries like Esprima and his conference presentations on performance and optimization.

JAVASCRIPT: DON’T BELIEVE THE TYPE! with Manu Sridharan and Simon Kaegi
Manu has worked on language tooling in IBM Research and is now at Samsung carrying on his passion. Simon has been digging deep into core JavaScript design and development for many years (has the scars to prove it).

Andrew is a veteran in the Virtual Machinist space. He lead the IBM J9 Virtual Machine team for many years and is applying that knowledge to porting V8 to IBM Hardware.

If you know nothing about NodeRED you should definitely
attend this session. Imagine wiring the Internet-of-Things with… well visual wiring. A visually compelling palette of connections and ease of use make NodeRED an amazing tool (also, the JS editor is incredible)

MODULAR JAVASCRIPT by Andrew Eisenberg
Andrew is well known in the Eclipse community and has contributed to Orion as part of his work at VMWare. His talk about module loading with respect to large applications in JavaScript should be a great talk!

Ok, kind of a 6th… While not a talk, IBM is hosting a WEB IDE BOF on Weds night with refreshments. Come demo what you’ve been working on or chat about what you like/dislike about the concept or current implementations of Web IDEs.

Hope to bump into you at EclipseCon and if you haven’t registered yet… there’s still 7 days!

Posted in General | 2 Comments

Orion 5.0 – New and Noteworthy

Orion 5.0 is now available! Check it out now on OrionHub, or download your own server. An updated JavaScript implementation of the Orion server is also available from npmjs.org. The following are some of the notable new features and changes in Orion 5.0. Make sure you also check out the 5.0 M1 news for other features added earlier in the 5.0 release.

New Orion look and feel

New Orion users have consistently reported that they found our cluster of iconic Actions and Navigation buttons confusing. Developers often have trouble finding the commands they are familiar with in their old desktop-based tools. So, finally we are caving to user demand and incorporating some familiar navigation elements such as a menu bar and context menus. You can find more details on the various UI changes further down in this post. User feedback has been a tremendously important part of these changes, and we strongly encourage all users to continue providing this feedback as the design evolves. Please don’t hesitate to raise bugs, report feedback on the orion mailing list, or grab us in person at conferences such as EclipseCon.

The old Navigation menu has been replaced by a narrow band on the left hand side with links to all of Orion’s different pages. All links are contextual and will navigate you to the closest corresponding page related to the artifact you are currently viewing. For example when editing a file, navigating to Git Status will show Git status for the repository containing the file you were just editing. Icons in the navigation bar match the page icon in your browser tab, to help you keep things straight. You can collapse the navigation bar at any time by clicking the toggle button in the top left hand corner of each page.

New navigation bar

The Actions menu, and some navigation elements, have been replaced with a more traditional menu bar. The key binding shortcuts have been added to the menu label for all commands that have them. The options to toggle between navigation and outline panels have been moved to the View menu.

Menu bar

Context menu in Navigation pane

Context menus have been added on files and folders in the Navigation pane. In these menus you will find the most common file operations such as copy, paste, rename, compare, etc. You will also find commands for navigating to other pages related to that file or folder.

Context menus

Content assist enhancements

The Orion content assist infrastructure has had a major overhaul. Orion content assist is now:

  • Faster. Computing, loading, and rendering of content assist proposals has been made much snappier.
  • More stylish. The proposals have been styled, so that the value to be inserted is highlighted, and peripheral information such as type information and descriptions are less distinct. Also, template proposals have been moved to a different section with a colored background to separate them from completions inferred from the current context. Highlighting of the current proposal has been improved, and scrollbars now only show when needed.
  • Easier to use. Content assist will now trigger automatically in the places where you most expect it to, such as after typing ‘.’ in JavaScript or opening a tag in HTML. Also, if you invoke content assist and there is only one possible match, it will be inserted automatically. Finally, the Home/End keys can now be used to quickly navigate around the proposal list.

To give you a feel for the overall changes, here is a comparison of content assist in Orion 5.0, versus the previous release:

Improved content assist

Content assist for popular Node.js libraries

Orion has added indexes to support content assist for some of the most popular Node.js libraries. On the database front there is now content assist for Redis, MySQL, Postgres, and MongoDB. Content assist is now also available for the AMQP messaging library, and the Express.js framework. Templates for popular code snippets with these various libraries are also available. Orion plugins can now contribute indexes for other libraries using the orion.core.typedef service.

Fully configurable JavaScript syntax validation

Orion is now almost fully converted over to the fantastic eslint library for JavaScript syntax validation. The only exception is script tags in HTML files, which are still validated with jslint for now. A huge advantage of eslint is its configurability. As a result, we now expose a large selection of lint configuration options on the Validation settings page.


Syntax validation of JSON

Orion now provides syntax validation for JSON files.

JSON syntax validation

Improved Gerrit support

Orion is steadily making progress towards support for Gerrit workflows. In the current release the following features have been added to make it easier to use Orion with Gerrit:

Support to attach a Gerrit change-id to your commits:

Gerrit change id in commit dialog

Git push without tags. When pushing a change to Gerrit for review you don’t want to push tags as well. The Push button now has a drop-down menu on the right that provides a Push Branch option to push commits only.

Push branch without tags

Push for review. When a contributor wants to submit a proposed patch for review in Gerrit, they push to a special branch with the format refs/for/[branchName]. Previously Orion always assumed pushes occurred to heads branches. Now, when you select Push followed by More, you can enter a branch name such as refs/for/master to push a change for review that is intended for the master branch.

Git push to Gerrit for review

New pluggable syntax highlighting system

The Orion editor has adopted a new syntax highlighting framework, designed specifically for Orion. Notable improvements include better performance, and built in support for more languages (currently JavaScript, JSON, XML, CSS, HTML, Java, PHP, Python, Ruby, and YAML). Syntax highlighting for additional languages can be provided by plugins. In addition, the syntax highlighting framework can be used with the standalone Orion editor, which is handy if you want a smaller package for embedding in your web application.

For more details on the new syntax highlighting framework, checkout this recent blog post on Planet Orion.

Filter by folder when searching for files

When using the Orion Find File command, you can now filter the results list based on keywords in the directory path by specifying a second search term in the find box. This is very handy when there are a large number of duplicates of the same file name and you want to quickly narrow down to a particular match.


Edit while comparing files

When you select two files and pick Compare with each other from the context menu, the resulting compare page now allows you to edit both files directly within the compare editor. Unsaved changes are indicated by an asterisk next to the name, and Save buttons appear above each editor. Saving changes on either side will cause the comparisons to be updated immediately.


Last but not least, deploy to Cloud Foundry!

Within the Orion client we’ve enabled being able to push an application directly from Orion to any compatible PaaS provider leveraging the Cloud Foundry APIs. If you already have an OrionHub account, you can click here to clone a simple Cloud Foundry example into a new project. Once you’ve cloned the project, you can see in the readme that you need to setup the deployment information on the Orion Cloud Settings Page. See the readme for a couple of example destinations. Once you’ve done that, you can simply press the Deploy button to push the app. You’ll need to edit your credentials for the PaaS provider and then the app is packaged and delivered just like the terminal cf push command. In the following diagram you can see the Deploy button and the new section regarding deployments including status of the running app and the URL for the resulting App.

Cloud Foundry from Orion

CloudFoundry from Orion

Not all the commands and features in the v6 Cloud Foundry command line are supported but we’ll continually add capabilities throughout the Orion 6.0 timeline and into the future.

Posted in New & Noteworthy | 2 Comments