Live Preview Overview

State of Live Preview (formerly known as "Live Development") as of January, 2015.

Connecting

Live Preview has been implemented 2 ways:

1. Original implementation uses Chromium Dev Tools Web Socket to connect to browser

   • Remote Debugging Protocol documentation
   • Documentation for Inspector.js for loading and usage of Inspector.json. Inspector.html is a browser viewable version of Inspector.json generated using jsdoc.rb.

2. New Multibrowser implementation uses Injected Scripts to connect to browser

   • Currently disabled and can be switch to with a feature flag
   • Connects to default browser
   • URL can be pasted into any other browser
   • See Live Preview MultiBrowser for details about this implementation.

Implementation used in Brackets is set in LiveDevelopment/main.js `_setImplementation()' method.

Live Preview Server

3 types of server connections:

1. Built-in nodejs server - this is the default connection type.
2. Use local server - this is done by specifying Base URL in Project Settings... dialog.
3. Fallback is file:// protocol.

For more info see Server API and URL Mapping docs.

Interstitial page

Loaded to ensure a connection before starting agents and then navigating to document url.

brackets-shell Native Implementation

• NativeApp.openLiveBrowser() and NativeApp.closeLiveBrowser() defined in appshell/appshell_extensions.js calls operating system specific native OpenLiveBrowser() and CloseLiveBrowser() methods, respectively. Defined in:
  • appshell/appshell_extensions_win.cpp on Windows
  • appshell/appshell_extensions_mac.mm on Mac
  • appshell/appshell_extensions_gtk.cpp on Linux

Toolbar Icon

Used to toggle Live Preview on/off. Can also use File > Live Preview menu item.

Icon shows 3 different states: disconnected, connecting, and connected. Tooltips display more detailed state information. Twipsy is displayed at icon when browser is disconnected for external reasons.

Remote Functions

Agents/RemoteAgent.js injects Agents/RemoteFunctions.js into Live Preview page for:

• Highlighting
• Live HTML
• Live Preview MultiBrowser Connection

Live CSS

Editing

CSS in browser is updated immediately as it is edited, so no need to save to disk:

a. LiveDevelopment.js _styleSheetAdded() creates a CSSDocument for each stylesheet b. Updates trigger CSSDocument.onChange() which sends entire updated stylesheet to browser

Highlighting

All elements that apply to rule being edited are highlighted:

• Can enable/disable with View > Live Preview Highlight menu item
• Implemented using remote function injection & calling

Live HTML

Currently only supported with nodejs server

• Editing HTML

• Highlighting current element

• Kevin's talk at JSConfEU - first ~17 minutes

• Research: HTML DOM Data Structure

All Other File Types

Live Preview is reloaded on File Save in LiveDevelopment.js function _onDocumentSaved().

Live JavaScript has been researched, but has not yet been implemented.

User Docs

• How to Use Brackets: Live Preview
• Troubleshooting Brackets: Live Preview

Other Use Cases:

• Live Preview works for files:

  • When using built-in server: file extensions defined in FileUtils.isStaticHtmlFileExt()
  • When a Base URL is provided for a local server: file extensions defined in FileUtils.isServerHtmlFileExt() will also work.
  • Note: These lists should really be preferences

• When starting Live Preview...

  • if .css or .js file is selected, Brackets searches for nearest index.html
  • if .php is selected and Base URL is not specified, prompt for Base URL

• If Live Preview is running...

  • and another HTML file is selected, it switches to that file
  • and switch to a different project, Live Preview is disconnected

Misc.

• Live Development: lifecycle research and future directions
• experimental flag: very old, so this code probably no longer works. Watch this video to see a few of the original experimental features.