Esprima-based content assist

A new content assist plugin for JavaScript is now available. This plugin uses the Esprima JavaScript parser to provide far more accurate semantic analysis. Notable improvements over Orion’s previous JavaScript content assist include:

Completion on object literal members:

Inferencing of basic variable types:

Simple flow analysis for type inferencing:

Support for certain built-in types:

Type analysis for objects created from constructors:

To install this plugin, simply click Get Plugins in the top banner and select Esprima content assist.

Syntax highlighting of JavaScript number literals

The Orion editor now provides syntax highlighting of number literals in JavaScript source code.

Character level compare

The Orion compare editor can now display differences down to the character level, in addition to coarse-grained blocks. Separate commands are available in the toolbar to navigate to the next or previous block or individual change.

Search highlights all matches

When you perform a search in the Orion editor, all matches are now highlighted. Matches appear both within the text, and in the overview ruler next to the scrollbar. This allows you to see the position of all matches in the file at a glance.

Traverse through file annotations with keyboard

You can now traverse through all annotations such as errors, warnings, and search results using the keyboard. As you traverse to a new annotation, the corresponding tooltip for that annoation will automatically open right below your cursor. This lets you quickly jump to the next error, find out the cause, and fix it without your fingers ever leaving the keyboard.

Drag to import

You can now drag a zip file to import into Orion rather than searching for it in a file dialog. Select Import as Zip as usual in the Navigator page, and then drag a zip file onto the target that appears. Support for importing non-zip files is coming soon!

Manage and launch sites from navigator

You can now create, launch, and modify web sites directly from the Navigator page. Let’s say you have an HTML file in Orion and you want to launch it as a static web site. Simply open the actions menu next to the file and select View On > New Site.

This will automatically create a new site, launch it, and open the site in a new browser tab. The site will have an auto-generated name, but you can always change this later from the Sites tab. Back in the Navigator, you can add additional folders and files to the site with a similar gesture:

Image editing with Pixlr plugin

A new plugin is available for editing images in your Orion projects using Pixlr. Click Get Plugins in the top banner to install the plugin from the catalog. Once installed, go to the Navigator
page and click Open With > Pixlr Image Editor from the actions menu next to an image file. This will take you to an Orion page with the Pixlr image editor embedded within it. When you save the file within Pixlr, you will have the option to save the result back into Orion.

File storage on S3

An experimental plugin is available that lets you store your Orion files on Amazon S3. For complete details, see the Connecting Amazon S3 to Orion blog post.

New page content service

A new service has been introduced, orion.page.content, that allows an Orion plugin to contribute page content. The plugin content is framed by the common Orion banner and equipped with standard Orion page services, such as the related pages menu. The page content itself is rendered in an iframe inside the page. This service was used by the above Pixlr plugin to make the third party Pixlr editor appear like an Orion branded page.

Expanded syntax for specifying links

Plugins that define commands or links that relate to a particular item on a page now have a more expressive way of validating metadata and building complex URI’s from metadata. The validationProperties have been expanded to allow full regular expression matching against metadata properties, as well as accessing multiple properties through piped OR expressions. In addition, the matches on validated properties can be cached in named variables and used in a uriTemplate property, which can build a complex link from metadata. For example, the following validationProperties and uriTemplate can build an eclipse.org git URL from Orion metadata:

validationProperties: [{
	source: "GitUrl",
	match: "git.eclipse.org/gitroot",
	variableName: "EclipseGitLocation",
	variableMatchPosition: "after"
 }],
 uriTemplate: "http://git.eclipse.org/c{EclipseGitLocation}"

Content type validation

Plugins can now use content types to validate file metadata when supplying commands in the navigator or editor. Before, plugins used file name extension patterns to specify what kinds of files they could operate on. Now, a list of content types can be used, which allows the plugin to be validated for multiple file types, as well as simplifying the specification.

Moved to latest Require JS

Orion now includes the latest version of the RequireJS module loader for JavaScript.

API changes

As we move closer to a 1.0 release, we have been taking a hard look at our APIs and cleaning them to be consistent and evolvable in the long term. Refer to the 0.5 API changes wiki page for complete details on what is changing. If you have already implemented plugins for Orion you should keep an eye on this page.

The features improved upon or new in this release include HTML syntax validation, CodeMirror syntax highlighting, Content Assist for JavaScript and HTML and CSS Lint. A new URI Template model for deeper integration with other web sites. Examples of URI integration include streamlined cloning from GitHub and Plugin installation within Orion. One excellent new feature is the related pages menu. When you have a task focused single page the related page menu offers a method to reference pages within or external to Orion that act on the same set of resources. Also added was the facility to view and cancel background operations operating on your behalf within the Orion server. To ease adoption we’ve added self-service password reset functionality. Work has also started on internationalization and accessibility in 0.4. The editor has been externalized and the majority of the UI tested using screenreader tools such as JAWS.

Overall, the look and feel of the UI has been crafted to reduce the amount of tree style views in favour of a flat representation. There was also a significant amount of trimming and customization done to give more real-estate to the task at hand.

In addition to the great changes which a user would see, the underlying architectural components Orion is built on have been made more consumable. These changes have allowed other projects to integrate Orion pieces within their products. A major announcement during 0.4 development was the use of the editor in the ScratchPad within Firefox 10.

The community around Orion is also growing at an excellent pace. This release saw many new contributors providing features such as the new Settings/Plugin page and Content Assist plugin using Esprima. This increase in community also netted Orion an Open Source Rookie win from Black Duck.

Overall, another excellent release cycle from an ever growing list of participants. As mentioned earlier on PlanetOrion there’s going to be several talks at EclipseCon 2012.

You can always keep up with what’s happening in Orion here, follow the BUZZ on our Wiki and for sure, follow OrionHub at Twitter.

This was just a brief overview of this release, for a more details look you can review our New and Noteworthy lists from our Milestone and end releases.

• Orion 0.4 M1 – New and Noteworthy
• Orion 0.4 M2 – New and Noteworthy
• Orion 0.4 RC3 – New and Noteworthy

If you don’t yet have an OrionHub account, you can request one here then use that account to login to OrionHub. You can also download the latest release and run a local server.

And now back to work on 0.5…

Streamlined workflow for Plugin installation

Installing a plugin in Orion has been reduced to three clicks:

1. Click Get Plugins in the banner at the top of any Orion page. This will take you to an external catalog of available plugins.
2. Click Install next to the plugin you want.
3. Back in Orion, click Submit to complete the installation.

You may not notice, but this process takes you across different web sites. The technology we’re developing to make this sort of workflow happen is some of the most exciting stuff happening in Orion. As with Eclipse, it is starting with development tools but we’re interested in seeing where else our plugin and cross-site linking architecture could be applied. Read Orion committer Susan McCourt’s detailed writeup to learn more about what’s going on under the covers.

Improved header and command presentation

Much of the user interface has received some polish. The rendering of command buttons has changed, and many icons have been improved. The header at the top of each page has had some tweaks too. There is a new spinning progress icon when work is happening to load dynamic content, and a new favorite (star) icon has been introduced to add the current page to your Orion favorites list.

Different Favicons per page

Each of the major Orion pages now has a different Favicon, which is the icon that appears in the browser tab. Different icons help you keep track of what’s what when you have many tabs open.

Keyboard and accessibility improvements

You can now effectively use the Navigator page with a keyboard. Use Right arrow key to expand folders, Spacebar to select, and Enter to traverse the link into a child folder or file. Left arrow on a root entry in the list will go up to the parent folder. You can use Tab to traverse to the context menu next to any file or folder, and use Spacebar to open the menu. Plenty more fixes have gone in under the covers to improve accessibility of Orion using keyboard and screen reader technology.

More related pages entries

The recently introduced Related Pages menu has had some new entries added. In particular, when browsing a Git clone in Orion that originated from either git.eclipse.org or github.com, we provide a back-link to the web site for the remote repository.

Open Commit in Git pages

The Orion git pages now support a new command, Open Commit (Ctrl+Shift+H). This command opens a slideout where you can provide a Git commit sha1 hash. It will then open the Orion Git Commit page for that commit. From that page you can easily review and cherry-pick the change. This greatly simplifies the workflow for a developer accepting patch contributions, because they don’t have to hunt around for the branch containing the change.

Checkout selection in Git Status

You can now select one or more individual unstaged files to checkout in the Git Status page.

Faster page loads

There has been a round of performance improvements on page loading. All new icons have been converted to CSS sprites, and some aspects of page rendering have been made a gazillion times faster. We will keep pushing on this in future releases – we are well aware that performance can make or break a web application.

Editor command extension improvements

The Orion extension point that enables plugins to contribute commands to the Orion editor has had a number of improvements. The commands now have access to the URL of the resource being edited, and can be filtered to only apply on specific file content types. Nothing to see here for end users yet, but we expect to be able to do some neat things with this in our next release.

• Extending Orion, an in-depth tutorial on writing plug-ins for Orion
• Micro Services in JavaScript, a talk about the Orion service model, and how it compares to OSGi services.
• Language Tooling in Orion, an overview of the state of language tooling in Orion, with emphasis on the current and future direction of JavaScript/HTML5/CSS tooling in Orion
• Developing Cloud Apps with Orion, Django and MongoDB – in 30 Minutes or Less, from the RedHat OpenShift team
• An Orion birds of a feather session (BoF) where you can meet and interact with Orion project committers and contributors

There are plenty of other great talks for web developers, from eBay’s free JavaScript tools to Google’s new Dart Programming Language, and a whole track of mobile talks.

Today is the last day for the lowest early registration price, so register now! The Orion team looks forward to seeing you there.

Replace across multiple files

You can now replace matches across multiple files from the Search Results page. After performing a search, click Replace to open a slideout where the replacement text is entered. After entering the text, click Preview Changes to open a preview of all the matches to be replaced. From this page you can check or uncheck individual files or matches, and use next/previous diff buttons in the compare editor to cycle through your changes. Finally, click Commit to perform the replace.

Search results improvements

You can now navigate through search results using the Up and Down arrow keys on your keyboard. Push Right arrow to open a popup showing additional lines surrounding the search result, and Left arrow to close the popup.

Find File dialog improvements

There have been several improvements to the Find File dialog, accessed via Ctrl+Shift+R in the editor or by pressing ‘t’ on other pages:

• When multiple matching files have the same name, the full path of each file is now shown to help you tell them apart.
• Matching favorites now appear at the top of the list
• You can navigate between search results using the Up and Down arrow keys
• Matches are now sorted alphabetically

JavaScript content assist templates

JavaScript content assist in Orion now provides templates for common control structures. Simply invoke content assist with Ctrl+Space, and select from among the available templates that match your current cursor position. Templates have been added for:

• for...in iteration over object properties
• for loop over an array
• while and do/while loops
• if and if/else blocks
• try/catch and try/catch/finally blocks
• switch blocks

Some templates require you to fill in certain variables such as conditions or other values. Use Tab to iterate through the fields to be completed, and Enter to finish the template.

JavaScript content assist variable and argument completion

JavaScript content assist will now propose matching local variables and function arguments from all enclosing functions in the current script.

HTML content assist

Content assist has been added for HTML files. Invoking content assist in an empty file will produce a basic well-formed HTML 5 document. Completion is offered for all elements supported in HTML 5. Closing element tags are inserted where appropriate.

For lists and tables, completion will also insert the first list item or table row for you:

CSS Lint plug-in

Orion CSS Lint integration, previously available as a separate plugin, is now included by default in the set of plug-ins distributed with Orion. In addition, this plug-in now provides an outline view for CSS files.

New settings page

A new Settings page has been introduced. The JavaScript Editor tab allows customization of fonts and colors in the JavaScript editor. Note that changes take effect immediately across all editors you currently have open in the current browser.

The Plugins tab shows the set of installed plugins, and supports adding and removing plugins. This page will evolve to show further details about each plugin as well.

Navigator “Go up” command

A new command has been added to the Navigator page, allowing you to quickly navigate up to the parent of the current folder. Simply click Go Up, or use Alt+Up on your keyboard.

Background progress reporting

Orion can now report progress on multiple background operations at once, and even report progress on operations occurring in other frames and pages. This sounds simple, but anyone who has tried to do this on the web will realize how amazing this is. Click the progress button in the top right corner of the page to drop down a list of current and recent operations. From this list you can also visit a separate page showing a longer operation history.

Related pages menu

A new Related Pages menu has been added to the page header. This allows you to quickly navigate between multiple pages that deal with the same file or folder you are currently viewing. For example, from the editor page you can now quickly jump to the Git Log page showing commits involving that file.

Revamped Orion header

The header at the top of each Orion page has been overhauled and cleaned up. Highlights include:

1. More static information has been moved to the top of the header, and dynamic information has moved down to be closer to the content.
2. The logo has been moved and shrunk to make more room for the header information you really care about.
3. More room has been created for additional navigation features such as the new Related pages menu.
4. Toolbars have been moved down out of the header into the most appropriate page area. For example the Save button and current line/column information is now in a bar directly above the editor rather than in the global header. One result of this change is that toolbars are still available when the header/footer are collapsed via Ctrl+Shift+M

For more information on the Orion UI design philosophy and direction, see the Orion Page Layout wiki page.

Customized tablet/mobile presentation

Orion styling has been tweaked to work much better on mobile devices. When using a display of 1024 pixels or less, we now pad the checkbox and twistie icons with more hittable breathing room.It is now much easier to check/uncheck boxes and invoke commands on a small touch screen. In addition, an editor problem with automatic uppercasing introduced with a recent iOS update has been addressed. The Orion editor now functions well again on iPad.

Fork me on Orion

Orion now uses URI templates to invoke commands on an Orion page using a URI. These commands are limited to altering the page layout such as opening input fields and dialogs. For example, you can now create a URL to initiate a clone operation on a particular repository. To see this in action, click Fork me on OrionHub to clone the Orion client code in your OrionHub account. Note you still need to manually click “Submit” after visiting the URL before the clone operation actually starts.

New git repository page

A completely new Git Repositories page has been introduced in this milestone. This replaces the previous deep tree structure with a flatter, more web-like presentation. Most basic commands are available at a glance without having to drill down, making the page much easier to use on touch and mobile devices. The Working Directory section shows at a glance what changes you have made that require staging or committing. The Commits sections shows all incoming commits that require merging, and all outgoing commits that have not been pushed to the current branch’s remote repository. There are further sections listing all branches, tags, and remotes for the current repository.

New git commit details page

A new Git Commit page has been introduced to accompany the new repositories page. Simply click on any commit from either the Repositories or Git Log page to open the commit details page. From here you can see all information about the commit, including author/committer, link to parent commit, associated tags, and diffs of all files modified by the commit. You can also tag or cherry-picka commit from this page.

Save and apply Git patches

You can now save unstaged changes as a patch to be reapplied later. From the Git Status page, simply select the files to be saved, and click Save Patch.

Saved patches can be applied later, or by another user, by clicking Apply Patch on the Git Repositories page. A patch can be applied either from an uploaded file, or from a URL (such as a bugzilla attachment).

Remove git tags

Git tags can now be removed. From the Git Repositories page, find the tag you want to remove and click Delete. Tag deletions can be pushed to a remote repository using the Push All command on the same page.

Automatic password reset

You can now associate an email address with your Orion account from your Profile page. Once the address is confirmed, it can be used to automatically reset your Orion password if you forget it in the future.

Server running Jetty 8

We have upgraded the neolithic Jetty version we previously shipped with the Orion Server. We are now running and delivering the most recent Jetty 8.1 from eclipse.org.

Enjoy!

  window.onload = function() {
    var provider = new eclipse.PluginProvider();
    provider.registerServiceProvider("orion.edit.contentAssist",
      new RubyContentAssistProvider(),
      {name: "Ruby content assist", pattern: "\\.(ru|rb)$"});
    provider.connect();
  };

This script registers an implementation of the orion.edit.contentAssist service. The service parameters indicate that it should be associated with filenames ending in “.ru”, or “.rb”. The content assist implementation is found in the RubyContentAssistProvider object defined in a separate script, rubyContentAssist.js. This script defines a service implementation object declaring the computeProposals method. The completion reference for the arguments and return value of this method are provided in the orion.edit.contentAssist documentation.

Example 1: Simple keywords

Let’s start with a simple example that offers completion on a subset of Ruby’s reserved keywords.

function computeProposals(prefix) {
  return ["alias","and","begin", "break","case","class"];
}

We are given a string argument that contains the sequence of word characters immediately preceding the current cursor position. We didn’t use the argument here but we could have used it to only compute the proposals matching that prefix. Since a simple keyword list is trivial to compute we didn’t bother – the Orion content assist implementation will only show proposals matching that prefix anyway. Here’s a shot of our current content assist implementation in action:

Example 2: Advanced completion features

Now let’s look at a more interesting example:

  function computeProposals(prefix, buffer, selection) {
    var proposals = ["alias","and","begin", "break","case","class"];
    var prefixStart = selection.offset - prefix.length;
    var precedingChar = buffer.charAt(prefixStart - 1);
    if (precedingChar === '=' && "begin".indexOf(prefix) === 0) {
      //suggest writing a block comment
      proposals.push({
        proposal: "begin\n\n=end",
        description: "=begin - block comment",
        escapePosition: prefixStart+6
      });
    }
    return proposals;
  }

We have added two more arguments to the computeProposals function: buffer, and selection. These arguments contain the current editor buffer and selection at the time content assist was invoked. We are using this information to check if the user is attempting to create a Ruby block comment, which starts with “=begin”.

Instead of returning a simple string in this example, we are returning a proposal object. This object allows us to provide more details back to the caller such as a description of the proposal, and the cursor position the editor should have after the completion has been inserted. In this case we want the cursor to end up inside the newly created block comment.

Also note that the text of the proposal does not include the equals character. The completion engine will only replace the provided prefix word, which only includes normal word characters (letters, numbers, or the underscore character). We already know that the character immediately before the prefix is an equals character already, so we don’t need to insert another one. Here is a shot of our enhanced content assist in action:

Note that both the begin keyword and the block comment proposal are included here. The description we provided for the block comment proposal helps the user understand the difference in this case. A more complete example could do more sophisticated analysis of the source to rule out the possibility of a keyword appearing at this location, and only show the block comment proposal.

Example 3: Linked mode completion

We’ll use one final example to illustrate Orion’s linked mode completion. This works exactly like some of the content assist in the Eclipse Java development tools, where after selecting a proposal the user uses the tab key to iterate through a set of fields that need to be filled in. Once all the fields are filled in, the user presses enter to finish the insertion process and exit linked mode. In Orion we indicate a linked mode completion by adding a positions property to a returned proposal. This property is an array of position objects indicating the offset and length of each linked region that requires user completion. In this example we use linked mode for an “if block” template where the user must provide the conditional expression:

  function computeProposals(prefix, buffer, selection) {
    var proposals = [];
    var prefixStart = selection.offset - prefix.length;
    if ("if".indexOf(prefix) === 0) {
      //suggest writing a block comment
      proposals.push({
        proposal: "if condition\n\t\nend",
        description: "if - if block",
        positions: [{offset: prefixStart + 3, length: 9}]
        escapePosition: prefixStart+14
      });
    }
    return proposals;
  }

When this proposal is accepted, the proposal text is inserted and the editor selection moves to the first position, which is the “condition” field. Below is a screenshot of what the editor looks like after this proposal has been selected. Note that the message area in the Orion toolbar indicates to the user that they have entered into a linked mode completion.

After editing the condition, the user hits Enter to finish the insertion, and the cursor will move to the indicated escape position. Note that the escapePosition property doesn’t need to account for the fact that the user might add or remove characters in the linked fields before they are done. The content assist engine will automatically adjust this value to account for any typing, so you just need to record the final cursor position under the assumption that the user will not modify any of the linked fields.

This concludes our overview of Orion’s content assist infrastructure. As these examples illustrate, it is very easy to get started with writing your own content assist service for Orion. Writing a truly powerful content assist service requires much more in depth source code analysis, but Orion takes care of all the basic editing infrastructure to let you focus on the language analysis. Check out the complete Ruby editor example and Developer guide for the most up to date details.

• Two team members were talking on the phone about some layout ideas for an Orion preference page. After struggling to verbally explain what he was doing, one participant realized that since his launched “test” application was on the web, he could just send the URL to the other participant to look at it directly. Not only that, his current editor state was also on the web, so he could send a link to his current editor contents, down to the current line position, to his colleague as well. They were then able to tweak the code together and both immediately see the result on the running application.
• One team member got her private Git repository into a funny state where she couldn’t push changes. After some futile attempts to resolve it she pinged some other committers for ideas. Another committer was immediately able to log into her account, poke around with the private repository, and figure out and resolve the problem.
• A team member got a new treadmill, and during his first run he realized the treadmill display was actually driven by a WebKit browser. Before the end of the run he had logged into his Orion account, pulled the latest changes into his workspace, and even attempted some simple code edits.

By themselves these are not world changing examples, and there are certainly existing technologies that could help out in similar situations. You can use a topic branch to share unfinished work with a colleague, and you can use screen sharing or web conference software to show others what you are working on. You could plunk your laptop down next to your treadmill if you really wanted to. The difference is that the existing technologies lack the sense of immediacy, of being able to provision your entire development tool infrastructure to any device within seconds without any kind of advance planning.

Think of how long it can sometimes take to get your development tool environment set up precisely as you want it. All the tools you need, the source code checked out and compiled, the target platform configured just so. Now think of the billion PC’s out there, the billion smart phones, and the hundreds of millions of tablets, car displays, and other browser-enabled devices. Imagine any one of those devices on the planet could be running your exact development tool environment, down to the last character you typed, in the amount of time it takes to type in a password. What kind of tools could we build in such a world? On the Orion team we are only taking the first baby steps into this world, and we have no idea where it will take us, but we can’t wait to find out!

HTML syntax validation

Orion now provides basic HTML syntax validation. Warnings and errors will display for common HTML problems such as malformed elements, missing tags, incorrect element nesting, and duplicate element ids.

CodeMirror syntax highlighting

An Orion plugin is now available that connects CodeMirror syntax highlighting to the Orion editor. This means Orion now provides syntax highlighting for all languages that have CodeMirror modes available, including: C/C++, C#, Clojure, CoffeeScript, Groovy, Pascal, Perl, PHP, Python, Ruby, Scheme, Smalltalk, and many others. Visit the CodeMirror plugin for Orion for a complete list of languages and installation instructions.

CodeMirror mixed mode syntax highlighting

The CodeMirror plugin for Orion also supports syntax highlighting of mixed-mode documents. In particular, JavaScript and PHP embedded in HTML files are now appropriately highlighted.

CodeMirror dynamic syntax validation

Another advantage of the CodeMirror plugin for Orion is highlighting of syntax errors. This has been hooked into the Orion editor’s annotation model to underline syntax errors that occur as you type. For example while editing HTML, there is immediate syntax validation for missing or malformed elements. In the example below, the mismatched heading element, and missing </li> element are highlighted and underlined in red.

New content type service

Orion has introduced a new content type service, orion.file.contenttype. This service allows plugins to introduce new content types, and associate content types with file extensions and MIME types. In addition, some core Orion services have been augmented to support content types over their previous file extension matching. For example, editors can now be associated with content types rather than file extensions. This allows different language tooling to be used for files containing mixed HTML and PHP (“application/x-httpd-php”), versus plain HTML (“text/html”), even when the file extension is the same in both cases. The remaining Orion language tooling services will be reworked to support content types in the following milestone.

Default text editor

A new service, orion.navigate.openWith.default, allows a plugin to declare the default editor to use when opening files whose content-type does not match any known type. The built-in Orion editor now implements this, meaning all text files regardless of extension or content can be opened in the editor.

HTML outliner plugin

A new Orion plugin is available that provides a detailed outline when editing HTML files. Simply install the HTML outline plugin, and then select either Full HTML or Filtered HTML from the drop-down menu in the Outline pane. We are still working on figuring out what level of detail is useful, so please try it out and send feedback. Even better, fork the repository and play around with your own ideas.

Wildcard search

You can now use simple wildcards in global searches. Use ‘*’ for an arbitrary sequence of characters and ‘?’ for a single character.

Pagination of search results

Search results are now delivered in pages rather than all at once. Buttons in the toolbar can be used to navigate to the next or previous page of results.

Changing sorting in search results

Search results are now sorted alphabetically by location, rather than by search rank. You can now also switch to sorting search results by filename via the options menu.

Scope search to a folder

You can now perform searches on particular folders rather than across all your files. On the Navigator page, the search will now be performed only in the current folder, indicated by the breadcrumb in the top banner.

From the search results page, you can adjust the search scope up to a parent folder by clicking that parent folder in the breadcrumb. Click a location in the Location column to repeat the search only within that single folder.

More contextual information in search

To go along with all the new search features this milestone, the search results page now tells you a lot more about what is going on. You can now see what terms you were searching for, in what folders, how many results in total, and what page of results you are currently viewing. Also, when you save a search, the bookmark gives more information about the search scope and terms.

User interface improvements

The user experience for collecting input has been redesigned in this milestone. Most input is now collected in lightweight “slideouts” rather than popup dialogs. Simply type the requested text in the slideout, or press the “…” button to provide more advanced input. Hit the ‘X’ button or the Esc key to dismiss the input.

In addition, the presentation for action buttons within pages has been revamped. These buttons are now always visible rather than only being shown on hover. This makes the actions accessible using your keyboard, and makes it possible to use them on touch interfaces where there is no concept of hover. We will continue to evolve the presentation in future milestones to ensure Orion is fully accessible, and to improve user experience on mobile and touch devices.

Hide header and footer

You can now collapse the header and footer areas on all pages. This is especially handy on mobile or small screen devices where vertical space is at a premium. When you also collapse the Outline slideout, the editor can now fill the entire window. Collapse and expand the header using the Ctrl+Shift+M key sequence (or Cmd+Shift+M on Mac).

Go to last edit location

A new command, Last Edit Location, will jump the cursor to the location of your last modification in the editor. This is handy when you quickly want to refer to another part of the file while editing, and then jump back to where you left off typing. The command is available via Ctrl+Q (or Cmd+Q on Mac). As always, if you forget the key binding for a command, you can hit Ctrl+Shift+L to see a complete list of available commands in the editor.

Editor performance improvements

While the Orion editor is already quite fast and scalable, it was slow and choppy to horizontally scroll very long lines. Horizontal scroll performance has been significantly improved in this milestone, in particular on Firefox and Chrome.

Use spaces for tabs

The Orion editor now supports using spaces instead of tabs for indentation. This is not currently enabled by default, but we are working on providing a preference page for customizing this in the future. Clients who are embedding the Orion editor in their own page can configure this using the expandTab option when configuring the Orion text view widget.

Asynchronous editor creation

The Orion editor can now be created asynchronously, with callbacks provided when editor initialization is complete. For clients embedding the Orion editor in their own page, this allows you to initialize the editor in the background while it is invisible and only display it when fully initialized. See bug 349627 for further details.

Pagination of Git log

The Git Log page now shows log information one page at a time rather than all at once. This improves performance for viewing the history of very large Git repositories. Buttons in the toolbar can be used to navigate between the log pages.

Git apply patch

You can now apply patches to a Git repository in Orion. Go to the Repositories page, and select Apply Patch from the actions menu.

Git Pull command

A Git Pull command has been added in the Repositories page. Although this is equivalent to performing a Fetch followed by a Merge, Pull is a handy shortcut when you know the incoming changes can be applied safely and cleanly.

Enjoy!

1) Sign up for a free OpenShift account.

2) Add a public ssh key to your OpenShift account. Use ssh-keygen to generate new ones or use an existing key pair if you have it.

3) In the Create an app… section of the OpenShift control panel, enter an application name and type. I selected PHP, but you can also use Rails, JBoss, etc.

Creating the application will give you two important bits of information: the Git URL for uploading your application, and the deployed application URL:

4) In Orion, go to the Repositories page, and click Clone Repository. Enter the Git URL obtained in step 3).

5) On the Orion Navigator page, expand your application and browse the contents:

6) Click index.php to open in the Orion editor, and add your HTML and PHP code:

7) Back on the Repositories page, click Git Status next to your repository to open the Orion Git status page. Stage, commit, and push your changes. You will need to paste the private SSH key corresponding to the public key you uploaded to OpenShift in step 2).

Finally, navigate to the deployed application URL provided in step 3) to see your application!

While this was just a trivial example, there are a large number of sample OpenShift applications on GitHub. Examples include popular PHP packages like WordPress, Drupal, and MediaWiki, all of which can be deployed on your free OpenShift domain and edited in Orion. One major drawback is that you can’t configure SQL repositories for your application directly from the OpenShift console. You have to install ugly old command line tools for that part, but hopefully they will add it to the console in the future.

We can see the convergence happening here between development and deployment platforms. As they get closer together, it is becoming possible to author web applications from your browser, and deploy them without having to install a single development tool on your local computer. Exciting times!