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. Chromium Dev Tools web socket (original)

   • Remote Debugging Protocol
   • LiveDevelopment/Inspector/Inspector.js

2. New Multibrowser Implementation using Injected scripts

   • 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 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 CSS

Editing

CSS in browser is updated immediately, 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

Reload File on Save

Live JavaScript Research - not yet implemented.

User Docs

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

Other Use Cases:

• 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 most likely no longer works