Creating and opening apps
The sidebar on the left-hand side of the WebIDE enables you to:
- create a new app
- open a packaged app
- 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 three templates, "HelloWorld", "Privileged Empty App" and "Privileged App".
All three 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.
Just to the right of this tree view, there's an editor pane.
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.
| Command | Windows | OS X | Linux |
|---|---|---|---|
| Go to line | Ctrl + J | Cmd + J | Ctrl + J |
| Find in file | Ctrl + F | Cmd + F | Ctrl + F |
| Find again | Ctrl + G | Cmd + G | Ctrl + G |
| Select all | Ctrl + A | Cmd + A | Ctrl + A |
| Cut | Ctrl + X | Cmd + X | Ctrl + X |
| Copy | Ctrl + C | Cmd + C | Ctrl + C |
| Paste | Ctrl + V | Cmd + V | Ctrl + V |
| Undo | Ctrl + Z | Cmd + Z | Ctrl + Z |
| Redo | Ctrl + Shift + Z / Ctrl + Y | Cmd + Shift + Z / Cmd + Y | Ctrl + Shift + Z / Ctrl + Y |
| Indent | Tab | Tab | Tab |
| Unindent | Shift + Tab | Shift + Tab | Shift + Tab |
| Move line(s) up | Alt + Up | Alt + Up | Alt + Up |
| Move line(s) down | Alt + Down | Alt + Down | Alt + Down |
| Comment/uncomment line(s) | Ctrl + / | Cmd + / | Ctrl + / |
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:
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".