Creating and editing apps

Creating and opening apps

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

Create a new app

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

Open a packaged app

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

Open a hosted app

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

Editing apps

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

The app summary page

When you first open or create an app, the editor pane is occupied by the app summary page, which is as shown below:

You can always get back to the app summary page by clicking on the root of the tree on the left.

Manifest validation

WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

Of course, you can edit the manifest.webapp file right in the project editor as well.

The source editor

WebIDE uses the CodeMirror source editor.

Source editor shortcuts

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.

Code completion

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

To display autocomplete suggestions in JavaScript press Control + Space:

Inline documentation

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

Saving files

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

Removing apps

To remove an app from WebIDE, go to the app summary page and click "Remove Project".