From 84f6605a0288e2dcd8936978fbf9038229a661ea Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Tue, 18 Nov 2014 14:23:51 -0300
Subject: [PATCH 01/17] Add multi-browser LiveDevelopment (experimental)

---
 src/LiveDevelopment/LiveDevMultiBrowser.js    | 844 +++++++++++++++++
 .../MultiBrowserImpl/README.md                |  83 ++
 .../documents/LiveCSSDocument.js              | 172 ++++
 .../documents/LiveDocument.js                 | 341 +++++++
 .../documents/LiveHTMLDocument.js             | 308 ++++++
 .../language/HTMLInstrumentation.js           | 876 ++++++++++++++++++
 .../language/HTMLSimpleDOM.js                 | 558 +++++++++++
 src/LiveDevelopment/MultiBrowserImpl/main.js  | 214 +++++
 .../protocol/LiveDevProtocol.js               | 319 +++++++
 .../protocol/remote/DocumentObserver.js       | 309 ++++++
 .../remote/ExtendedRemoteFunctions.js         |  63 ++
 .../protocol/remote/LiveDevProtocolRemote.js  | 283 ++++++
 .../transports/NodeSocketTransport.js         |  89 ++
 .../node/NodeSocketTransportDomain.js         | 249 +++++
 .../transports/node/package.json              |   8 +
 .../remote/NodeSocketTransportRemote.js       | 138 +++
 src/LiveDevelopment/main.js                   |  19 +-
 17 files changed, 4870 insertions(+), 3 deletions(-)
 create mode 100644 src/LiveDevelopment/LiveDevMultiBrowser.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/README.md
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/documents/LiveHTMLDocument.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/language/HTMLSimpleDOM.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/main.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/transports/remote/NodeSocketTransportRemote.js

diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
new file mode 100644
index 00000000000..8988a339df8
--- /dev/null
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -0,0 +1,844 @@
+/*
+ * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets, window, open */
+
+/**
+ * LiveDevelopment allows Brackets to launch a browser with a "live preview" that's
+ * connected to the current editor.
+ *
+ * # STARTING
+ *
+ * To start a session call `open`. This will read the currentDocument from brackets,
+ * launch it in the default browser, and connect to it for live editing.
+ *
+ * # STOPPING
+ *
+ * To stop a session call `close`. This will close the connection to the browser
+ * (but will not close the browser tab).
+ *
+ * # STATUS
+ *
+ * Status updates are dispatched as `statusChange` jQuery events. The status
+ * is passed as the first parameter and the reason for the change as the second
+ * parameter. Currently only the "Inactive" status supports the reason parameter.
+ * The status codes are:
+ *
+ * -1: Error
+ *  0: Inactive
+ *  1: Connecting (waiting for a browser connection)
+ *  2: Active
+ *  3: Out of sync
+ *  4: Sync error
+ *  5: Reloading (after saving JS changes)
+ *  6: Restarting (switching context to a new HTML live doc)
+ *
+ * The reason codes are:
+ * - null (Unknown reason)
+ * - "explicit_close" (LiveDevelopment.close() was called)
+ * - "navigated_away" (The browser changed to a location outside of the project)
+ * - "detached_target_closed" (The tab or window was closed)
+ */
+define(function (require, exports, module) {
+    "use strict";
+
+    // Status Codes
+    var STATUS_ERROR         = exports.STATUS_ERROR          = -1;
+    var STATUS_INACTIVE      = exports.STATUS_INACTIVE       =  0;
+    var STATUS_CONNECTING    = exports.STATUS_CONNECTING     =  1;
+    var STATUS_ACTIVE        = exports.STATUS_ACTIVE         =  2;
+    var STATUS_OUT_OF_SYNC   = exports.STATUS_OUT_OF_SYNC    =  3;
+    var STATUS_SYNC_ERROR    = exports.STATUS_SYNC_ERROR     =  4;
+    var STATUS_RELOADING     = exports.STATUS_RELOADING      =  5;
+    var STATUS_RESTARTING    = exports.STATUS_RESTARTING     =  6;
+
+    var Async                = require("utils/Async"),
+        Dialogs              = require("widgets/Dialogs"),
+        DefaultDialogs       = require("widgets/DefaultDialogs"),
+        DocumentManager      = require("document/DocumentManager"),
+        EditorManager        = require("editor/EditorManager"),
+        ExtensionUtils       = require("utils/ExtensionUtils"),
+        FileSystemError      = require("filesystem/FileSystemError"),
+        FileUtils            = require("file/FileUtils"),
+        PreferencesDialogs   = require("preferences/PreferencesDialogs"),
+        ProjectManager       = require("project/ProjectManager"),
+        Strings              = require("strings"),
+        _                    = require("thirdparty/lodash"),
+        LiveDevServerManager = require("LiveDevelopment/LiveDevServerManager"),
+        NodeSocketTransport  = require("LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport"),
+        LiveDevProtocol      = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
+    
+    // Documents
+    var LiveCSSDocument      = require("LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument"),
+        LiveHTMLDocument     = require("LiveDevelopment/MultiBrowserImpl/documents/LiveHTMLDocument");
+    
+    /** 
+     * @private
+     * The live HTML document for the currently active preview.
+     * @type {LiveHTMLDocument} 
+     */
+    var _liveDocument;
+    
+    /** 
+     * @private
+     * Live documents related to the active HTML document - for example, CSS files
+     * that are used by the document.
+     * @type {Object.<string: {LiveHTMLDocument|LiveCSSDocument}>}
+     */
+    var _relatedDocuments = {};
+    
+    /**
+     * @private
+     * Current transport for communicating with browser instances. See setTransport().
+     * @type {{launch: function(string), send: function(number|Array.<number>, string), close: function(number)}}
+     */
+    var _transport;
+    
+    /**
+     * @private
+     * Protocol handler that provides the actual live development API on top of the current transport.
+     */
+    var _protocol = LiveDevProtocol;
+    
+    /**
+     * @private
+     * Current live preview server
+     * @type {BaseServer}
+     */
+    var _server;
+    
+    /**
+     * @private
+     * Returns true if we think the given extension is for an HTML file.
+     * @param {string} ext The extension to check.
+     * @return {boolean} true if this is an HTML extension
+     */
+    function _isHtmlFileExt(ext) {
+        return (FileUtils.isStaticHtmlFileExt(ext) ||
+                (ProjectManager.getBaseUrl() && FileUtils.isServerHtmlFileExt(ext)));
+    }
+
+    /** 
+     * @private
+     * Determine which live document class should be used for a given document
+     * @param {Document} document The document we want to create a live document for.
+     * @return {function} The constructor for the live document class; will be a subclass of LiveDocument.
+     */
+    function _classForDocument(doc) {
+        if (doc.getLanguage().getId() === "css") {
+            return LiveCSSDocument;
+        }
+
+        if (_isHtmlFileExt(doc.file.fullPath)) {
+            return LiveHTMLDocument;
+        }
+
+        return null;
+    }
+    
+    /**
+     * Returns true if the global Live Development mode is on (might be in the middle of connecting).
+     * @return {boolean}
+     */
+    function isActive() {
+        return exports.status > STATUS_INACTIVE;
+    }
+    
+    /**
+     * Returns the live document for a given path, or null if there is no live document for it.
+     * @param {string} path
+     * @return {?LiveDocument}
+     */
+    function getLiveDocForPath(path) {
+        if (!_server) {
+            return null;
+        }
+        
+        return _server.get(path);
+    }
+    
+    /**
+     * Returns the live document for a given editor, or null if there is no live document for it.
+     * @param {Editor} editor
+     * @return {?LiveDocument}
+     */
+    function getLiveDocForEditor(editor) {
+        if (!editor) {
+            return null;
+        }
+        return getLiveDocForPath(editor.document.file.fullPath);
+    }
+
+    /**
+     * @private
+     * Close a live document.
+     * @param {LiveDocument}
+     */
+    function _closeDocument(liveDocument) {
+        $(liveDocument).off(".livedev");
+        liveDocument.close();
+    }
+    
+    /**
+     * Removes the given CSS/JSDocument from _relatedDocuments. Signals that the
+     * given file is no longer associated with the HTML document that is live (e.g.
+     * if the related file has been deleted on disk).
+     * @param {string} url Absolute URL of the related document
+     */
+    function _handleRelatedDocumentDeleted(url) {
+        var liveDoc = _relatedDocuments[url];
+        if (liveDoc) {
+            delete _relatedDocuments[url];
+        }
+            
+        if (_server) {
+            _server.remove(liveDoc);
+        }
+        _closeDocument(liveDoc);
+    }
+
+    /**
+     * Update the status. Triggers a statusChange event.
+     * @param {number} status new status
+     * @param {?string} closeReason Optional string key suffix to display to
+     *     user when closing the live development connection (see LIVE_DEV_* keys)
+     */
+    function _setStatus(status, closeReason) {
+        // Don't send a notification when the status didn't actually change
+        if (status === exports.status) {
+            return;
+        }
+        
+        exports.status = status;
+        
+        var reason = status === STATUS_INACTIVE ? closeReason : null;
+        $(exports).triggerHandler("statusChange", [status, reason]);
+    }
+
+    /**
+     * @private
+     * Close all live documents.
+     */
+    function _closeDocuments() {
+        if (_liveDocument) {
+            _closeDocument(_liveDocument);
+            _liveDocument = undefined;
+        }
+        
+        Object.keys(_relatedDocuments).forEach(function (url) {
+            _closeDocument(_relatedDocuments[url]);
+            delete _relatedDocuments[url];
+        });
+        
+        // Clear all documents from request filtering
+        if (_server) {
+            _server.clear();
+        }
+    }
+    
+    /**
+     * @private
+     * Returns the URL that we would serve the given path at.
+     * @param {string} path
+     * @return {string}
+     */
+    function _resolveUrl(path) {
+        return _server && _server.pathToUrl(path);
+    }
+
+    /**
+     * @private
+     * Create a LiveDocument for a Brackets editor/document to manage communication between the
+     * editor and the browser.
+     * @param {Document} doc
+     * @param {Editor} editor
+     * @param {roots} roots
+     * @return {?LiveDocument} The live document, or null if this type of file doesn't support live editing.
+     */
+    function _createLiveDocument(doc, editor, roots) {
+        var DocClass = _classForDocument(doc),
+            liveDocument;
+        
+        if (!DocClass) {
+            return null;
+        }
+        
+        liveDocument = new DocClass(_protocol, _resolveUrl, doc, editor, roots);
+
+        $(liveDocument).on("errorStatusChanged.livedev", function (event, hasErrors) {
+            if (isActive()) {
+                _setStatus(hasErrors ? STATUS_SYNC_ERROR : STATUS_ACTIVE);
+            }
+        });
+
+        return liveDocument;
+    }
+
+    /** 
+     * Documents are considered to be out-of-sync if they are dirty and
+     * do not have "update while editing" support
+     * @param {Document} doc
+     * @return {boolean}
+     */
+    function _docIsOutOfSync(doc) {
+        var liveDoc = _server && _server.get(doc.file.fullPath),
+            isLiveEditingEnabled = liveDoc && liveDoc.isLiveEditingEnabled();
+
+        return doc.isDirty && !isLiveEditingEnabled;
+    }
+
+    /**
+     * Handles a notification from the browser that a stylesheet was loaded into
+     * the live HTML document. If the stylesheet maps to a file in the project, then
+     * creates a live document for the stylesheet and adds it to _relatedDocuments.
+     * @param {$.Event} event
+     * @param {string} url The URL of the stylesheet that was added.
+     * @param {array} roots The URLs of the roots of the stylesheet (the css files loaded through <link>)
+     */
+    function _styleSheetAdded(event, url, roots) {
+        var path = _server && _server.urlToPath(url),
+            alreadyAdded = !!_relatedDocuments[url];
+
+        // path may be null if loading an external stylesheet.
+        // Also, the stylesheet may already exist and be reported as added twice
+        // due to Chrome reporting added/removed events after incremental changes
+        // are pushed to the browser
+        if (!path || alreadyAdded) {
+            return;
+        }
+
+        var docPromise = DocumentManager.getDocumentForPath(path);
+
+        docPromise.done(function (doc) {
+            if ((_classForDocument(doc) === LiveCSSDocument) &&
+                    (!_liveDocument || (doc !== _liveDocument.doc))) {
+                var liveDoc = _createLiveDocument(doc, null, roots);
+                if (liveDoc) {
+                    _server.add(liveDoc);
+                    _relatedDocuments[doc.url] = liveDoc;
+                    $(liveDoc).on("updateDoc", function (event, url) {
+                        var path = _server.urlToPath(url),
+                            doc = getLiveDocForPath(path);
+                        doc._updateBrowser();
+                    });
+                }
+            }
+        });
+    }
+
+    /**
+     * @private
+     * Determine an index file that can be used to start Live Development.
+     * This function will inspect all files in a project to find the closest index file
+     * available for currently opened document. We are searching for these files:
+     *  - index.html
+     *  - index.htm
+     * 
+     * If the project is configured with a custom base url for live developmment, then
+     * the list of possible index files is extended to contain these index files too:
+     *  - index.php
+     *  - index.php3
+     *  - index.php4
+     *  - index.php5
+     *  - index.phtm
+     *  - index.phtml
+     *  - index.cfm
+     *  - index.cfml
+     *  - index.asp
+     *  - index.aspx
+     *  - index.jsp
+     *  - index.jspx
+     *  - index.shm
+     *  - index.shml
+     * 
+     * If a file was found, the promise will be resolved with the full path to this file. If no file
+     * was found in the whole project tree, the promise will be resolved with null.
+     * 
+     * @return {jQuery.Promise} A promise that is resolved with a full path
+     * to a file if one could been determined, or null if there was no suitable index
+     * file.
+     */
+    function _getInitialDocFromCurrent() {
+        var doc = DocumentManager.getCurrentDocument(),
+            refPath,
+            i;
+
+        // Is the currently opened document already a file we can use for Live Development?
+        if (doc) {
+            refPath = doc.file.fullPath;
+            if (FileUtils.isStaticHtmlFileExt(refPath) || FileUtils.isServerHtmlFileExt(refPath)) {
+                return new $.Deferred().resolve(doc);
+            }
+        }
+
+        var result = new $.Deferred();
+
+        var baseUrl = ProjectManager.getBaseUrl(),
+            hasOwnServerForLiveDevelopment = (baseUrl && baseUrl.length);
+
+        ProjectManager.getAllFiles().done(function (allFiles) {
+            var projectRoot = ProjectManager.getProjectRoot().fullPath,
+                containingFolder,
+                indexFileFound = false,
+                stillInProjectTree = true;
+            
+            if (refPath) {
+                containingFolder = FileUtils.getDirectoryPath(refPath);
+            } else {
+                containingFolder = projectRoot;
+            }
+            
+            var filteredFiltered = allFiles.filter(function (item) {
+                var parent = FileUtils.getDirectoryPath(item.fullPath);
+                
+                return (containingFolder.indexOf(parent) === 0);
+            });
+            
+            var filterIndexFile = function (fileInfo) {
+                if (fileInfo.fullPath.indexOf(containingFolder) === 0) {
+                    if (FileUtils.getFilenameWithoutExtension(fileInfo.name) === "index") {
+                        if (hasOwnServerForLiveDevelopment) {
+                            if ((FileUtils.isServerHtmlFileExt(fileInfo.name)) ||
+                                    (FileUtils.isStaticHtmlFileExt(fileInfo.name))) {
+                                return true;
+                            }
+                        } else if (FileUtils.isStaticHtmlFileExt(fileInfo.name)) {
+                            return true;
+                        }
+                    } else {
+                        return false;
+                    }
+                }
+            };
+
+            while (!indexFileFound && stillInProjectTree) {
+                i = _.findIndex(filteredFiltered, filterIndexFile);
+
+                // We found no good match
+                if (i === -1) {
+                    // traverse the directory tree up one level
+                    containingFolder = FileUtils.getDirectoryPath(containingFolder);
+                    // Are we still inside the project?
+                    if (containingFolder.indexOf(projectRoot) === -1) {
+                        stillInProjectTree = false;
+                    }
+                } else {
+                    indexFileFound = true;
+                }
+            }
+
+            if (i !== -1) {
+                DocumentManager.getDocumentForPath(filteredFiltered[i].fullPath).then(result.resolve, result.resolve);
+                return;
+            }
+            
+            result.resolve(null);
+        });
+
+        return result.promise();
+    }
+
+    /**
+     * @private
+     * Close the connection and the associated window
+     * @param {boolean} doCloseWindow Use true to close the window/tab in the browser
+     * @param {?string} reason Optional string key suffix to display to user (see LIVE_DEV_* keys)
+     */
+    function _close(doCloseWindow, reason) {
+        if (exports.status !== STATUS_INACTIVE) {
+            // Close live documents 
+            _closeDocuments();
+            // Close all active connections
+            _protocol.closeAllConnections();
+            
+            if (_server) {
+                // Stop listening for requests when disconnected
+                _server.stop();
+
+                // Dispose server
+                _server = null;
+            }
+        }
+
+        // TODO: don't have a way to close windows in the new architecture
+//        if (doCloseWindow) {
+//        }
+        
+        _setStatus(STATUS_INACTIVE, reason || "explicit_close");
+    }
+
+    /**
+     * Close all active connections
+     */
+    function close() {
+        return _close(true);
+    }
+    
+    /**
+     * @private
+     * Displays an error when no HTML file can be found to preview.
+     */
+    function _showWrongDocError() {
+        Dialogs.showModalDialog(
+            DefaultDialogs.DIALOG_ID_ERROR,
+            Strings.LIVE_DEVELOPMENT_ERROR_TITLE,
+            Strings.LIVE_DEV_NEED_HTML_MESSAGE
+        );
+    }
+
+    /**
+     * @private
+     * Displays an error when the server for live development files can't be started.
+     */
+    function _showLiveDevServerNotReadyError() {
+        Dialogs.showModalDialog(
+            DefaultDialogs.DIALOG_ID_ERROR,
+            Strings.LIVE_DEVELOPMENT_ERROR_TITLE,
+            Strings.LIVE_DEV_SERVER_NOT_READY_MESSAGE
+        );
+    }
+
+    /**
+     * @private
+     * Creates the main live document for a given HTML document and notifies the server it exists.
+     * TODO: we should really maintain the list of live documents, not the server.
+     * @param {Document} doc
+     */
+    function _createLiveDocumentForFrame(doc) {
+        // create live document
+        doc._ensureMasterEditor();
+        _liveDocument = _createLiveDocument(doc, doc._masterEditor);
+        _server.add(_liveDocument);
+    }
+    
+    /**
+     * @private
+     * Launches the given document in the browser, given that a live document has already
+     * been created for it. 
+     * @param {Document} doc
+     */
+    function _open(doc) {
+        if (doc && _liveDocument && doc === _liveDocument.doc) {
+            if (_server) {
+                // Launch the URL in the browser. If it's the first one to connect back to us,
+                // our status will transition to ACTIVE once it does so.
+                if (exports.status < STATUS_ACTIVE) {
+                    _protocol.launch(_server.pathToUrl(doc.file.fullPath));
+                }
+                if (exports.status === STATUS_RESTARTING) {
+                    // change page in browser
+                    _protocol.navigate(_server.pathToUrl(doc.file.fullPath));
+                }
+
+                $(_protocol)
+                    // TODO: timeout if we don't get a connection within a certain time
+                    .on("Connection.connect.livedev", function (event, msg) {
+                        // check for the first connection
+                        if (_protocol.getConnectionIds().length === 1) {
+                            var doc = DocumentManager.getCurrentDocument();
+                            // check the page that connection comes from matches the current live document session
+                            if (_liveDocument && (msg.url === _resolveUrl(_liveDocument.doc.file.fullPath))) {
+                                _setStatus(STATUS_ACTIVE);
+                            }
+                        }
+                    })
+                    .on("Connection.close.livedev", function (event, msg) {
+                        // close session when the last connection was closed
+                        if (_protocol.getConnectionIds().length === 0) {
+                            if (exports.status <= STATUS_ACTIVE) {
+                                _close(false, "detached_target_closed");
+                            }
+                        }
+                    })
+                    // extract stylesheets and create related LiveCSSDocument instances
+                    .on("Document.Related.livedev", function (event, msg) {
+                        var relatedDocs = msg.related;
+                        var docs = Object.keys(relatedDocs.stylesheets);
+                        docs.forEach(function (url) {
+                            _styleSheetAdded(null, url, relatedDocs.stylesheets[url]);
+                        });
+                    })
+                    // create new LiveCSSDocument if a new stylesheet is added
+                    .on("Stylesheet.Added.livedev", function (event, msg) {
+                        _styleSheetAdded(null, msg.href, msg.roots);
+                    })
+                    // remove LiveCSSDocument instance when stylesheet is removed
+                    .on("Stylesheet.Removed.livedev", function (event, msg) {
+                        _handleRelatedDocumentDeleted(msg.href);
+                    });
+            } else {
+                console.error("LiveDevelopment._open(): No server active");
+            }
+        } else {
+            // Unlikely that we would get to this state where
+            // a connection is in process but there is no current
+            // document
+            close();
+        }
+    }
+    
+    /**
+     * @private
+     * Creates the live document in preparation for launching the 
+     * preview of the given document, then launches it. (The live document 
+     * must already exist before we launch it so that the server can
+     * ask it for the instrumented version of the document when the browser 
+     * requests it.)
+     * TODO: could probably just consolidate this with _open()
+     * @param {Document} doc
+     */
+    function _doLaunchAfterServerReady(initialDoc) {
+
+        _createLiveDocumentForFrame(initialDoc);
+
+        // start listening for requests
+        _server.start();
+
+        // open browser to the url
+        _open(initialDoc);
+    }
+    
+    /**
+     * @private
+     * Create the server in preparation for opening a live preview.
+     * @param {Document} doc The document we want the server for. Different servers handle
+     * different types of project (a static server for when no app server is configured,
+     * vs. a user server when there is an app server set in File > Project Settings).
+     */
+    function _prepareServer(doc) {
+        var deferred = new $.Deferred(),
+            showBaseUrlPrompt = false;
+        
+        _server = LiveDevServerManager.getServer(doc.file.fullPath);
+
+        // Optionally prompt for a base URL if no server was found but the
+        // file is a known server file extension
+        showBaseUrlPrompt = !_server && FileUtils.isServerHtmlFileExt(doc.file.fullPath);
+
+        if (showBaseUrlPrompt) {
+            // Prompt for a base URL
+            PreferencesDialogs.showProjectPreferencesDialog("", Strings.LIVE_DEV_NEED_BASEURL_MESSAGE)
+                .done(function (id) {
+                    if (id === Dialogs.DIALOG_BTN_OK && ProjectManager.getBaseUrl()) {
+                        // If base url is specifed, then re-invoke _prepareServer() to continue
+                        _prepareServer(doc).then(deferred.resolve, deferred.reject);
+                    } else {
+                        deferred.reject();
+                    }
+                });
+        } else if (_server) {
+            // Startup the server
+            var readyPromise = _server.readyToServe();
+            if (!readyPromise) {
+                _showLiveDevServerNotReadyError();
+                deferred.reject();
+            } else {
+                readyPromise.then(deferred.resolve, function () {
+                    _showLiveDevServerNotReadyError();
+                    deferred.reject();
+                });
+            }
+        } else {
+            // No server found
+            deferred.reject();
+        }
+        
+        return deferred.promise();
+    }
+
+    /**
+     * @private
+     * When switching documents, close the current preview and open a new one.
+     */
+    function _onDocumentChange() {
+        var doc = DocumentManager.getCurrentDocument();
+        if (!isActive() || !doc) {
+            return;
+        }
+        
+        // close the current session and begin a new session
+        var docUrl = _server && _server.pathToUrl(doc.file.fullPath),
+            isViewable = _server && _server.canServe(doc.file.fullPath);
+        
+        if (_liveDocument.doc.url !== docUrl && isViewable) {
+            // clear live doc and related docs
+            _closeDocuments();
+            // create new live doc
+            _createLiveDocumentForFrame(doc);
+            _setStatus(STATUS_RESTARTING);
+            _open(doc);
+
+        }
+    }
+
+    
+    /**
+     * Open a live preview on the current docuemnt.
+     */
+    function open() {
+        // TODO: need to run _onDocumentChange() after load if doc != currentDocument here? Maybe not, since activeEditorChange
+        // doesn't trigger it, while inline editors can still cause edits in doc other than currentDoc...
+        _getInitialDocFromCurrent().done(function (doc) {
+            var prepareServerPromise = (doc && _prepareServer(doc)) || new $.Deferred().reject(),
+                otherDocumentsInWorkingFiles;
+
+            if (doc && !doc._masterEditor) {
+                otherDocumentsInWorkingFiles = DocumentManager.getWorkingSet().length;
+                DocumentManager.addToWorkingSet(doc.file);
+
+                if (!otherDocumentsInWorkingFiles) {
+                    DocumentManager.setCurrentDocument(doc);
+                }
+            }
+
+            // wait for server (StaticServer, Base URL or file:)
+            prepareServerPromise
+                .done(function () {
+                    _setStatus(STATUS_CONNECTING);
+                    _doLaunchAfterServerReady(doc);
+                })
+                .fail(function () {
+                    _showWrongDocError();
+                });
+        });
+    }
+    
+    /**
+     * For files that don't support as-you-type live editing, but are loaded by live HTML documents
+     * (e.g. JS files), we want to reload the full document when they're saved.
+     * @param {$.Event} event
+     * @param {Document} doc
+     */
+    function _onDocumentSaved(event, doc) {
+        if (!isActive() || !_server) {
+            return;
+        }
+        
+        var absolutePath            = doc.file.fullPath,
+            liveDocument            = absolutePath && _server.get(absolutePath),
+            liveEditingEnabled      = liveDocument && liveDocument.isLiveEditingEnabled  && liveDocument.isLiveEditingEnabled();
+        
+        // Skip reload if the saved document has live editing enabled
+        if (liveEditingEnabled) {
+            return;
+        }
+        
+        // reload the page if the given document is a JS file related 
+        // to the current live document.
+        if (_liveDocument.isRelated(absolutePath)) {
+            if (doc.getLanguage().getId() === "javascript") {
+                _setStatus(STATUS_RELOADING);
+                _protocol.reload();
+            }
+        }
+    }
+
+    /** 
+     * For files that don't support as-you-type live editing, but are loaded by live HTML documents
+     * (e.g. JS files), we want to show a dirty indicator on the live development icon when they
+     * have unsaved changes, so the user knows s/he needs to save in order to have the page reload.
+     * @param {$.Event} event
+     * @param {Document} doc
+     */
+    function _onDirtyFlagChange(event, doc) {
+        if (!isActive() || !_server) {
+            return;
+        }
+        
+        var absolutePath = doc.file.fullPath;
+        
+        if (_liveDocument.isRelated(absolutePath)) {
+            // Set status to out of sync if dirty. Otherwise, set it to active status.
+            _setStatus(_docIsOutOfSync(doc) ? STATUS_OUT_OF_SYNC : STATUS_ACTIVE);
+        }
+    }
+
+    /**
+     * Sets the current transport mechanism to be used by the live development protocol
+     * (e.g. socket server, iframe postMessage, etc.)
+     * @param {{launch: function(string), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}} transport
+     *      The low-level transport. Must provide the following methods:
+     *
+     *      launch(url): Opens the url in the target browser.
+     *      send(idOrArray, string): Dispatches the given protocol message (provided as a JSON string) to the given client ID
+     *          or array of client IDs. (See the "connect" message for an explanation of client IDs.)
+     *      close(id): Closes the connection to the given client ID.
+     *      getRemoteScript(): Returns a script that should be injected into the page's HTML in order to handle the remote side
+     *          of the transport. Should include the "<script>" tags. Should return null if no injection is necessary.
+     *
+     *      It must also dispatch the following jQuery events:
+     *
+     *      "connect": When a target browser connects back to the transport. Must provide two parameters: 
+     *          clientID - a unique number representing this connection
+     *          url - the URL of the page in the target browser that's connecting to us
+     *      "message": When a message is received by the transport. Must provide two parameters:
+     *          clientID - the ID of the client sending the message
+     *          message - the text of the message as a JSON string
+     *      "close": When the remote browser closes the connection. Must provide one parameter:
+     *          clientID - the ID of the client closing the connection
+     */
+    function setTransport(transport) {
+        _protocol.setTransport(transport);
+    }
+
+    /**
+     * Initialize the LiveDevelopment module.
+     */
+    function init() {
+        $(DocumentManager).on("currentDocumentChange", _onDocumentChange)
+            .on("documentSaved", _onDocumentSaved)
+            .on("dirtyFlagChange", _onDirtyFlagChange);
+        $(ProjectManager).on("beforeProjectClose beforeAppClose", close);
+        
+        // Default transport for live connection messages - can be changed
+        setTransport(NodeSocketTransport);
+        
+        // Initialize exports.status
+        _setStatus(STATUS_INACTIVE);
+    }
+
+    /**
+     * @private
+     * Returns the base URL of the current server serving the active live document, or null if
+     * there is no active live document.
+     * @return {?string}
+     */
+    function getServerBaseUrl() {
+        return _server && _server.getBaseUrl();
+    }
+    
+    // For unit testing
+    exports._server                   = _server;
+    exports._liveDocument             = _liveDocument;
+    exports._getInitialDocFromCurrent = _getInitialDocFromCurrent;
+
+    // Export public functions
+    exports.open                = open;
+    exports.close               = close;
+    exports.getLiveDocForPath   = getLiveDocForPath;
+    exports.init                = init;
+    exports.isActive            = isActive;
+    exports.getServerBaseUrl    = getServerBaseUrl;
+    exports.setTransport        = setTransport;
+});
diff --git a/src/LiveDevelopment/MultiBrowserImpl/README.md b/src/LiveDevelopment/MultiBrowserImpl/README.md
new file mode 100644
index 00000000000..76494953de8
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/README.md
@@ -0,0 +1,83 @@
+This is an experimental implementation to replace the current live development architecture with something more flexible that isn't tied solely to Chrome Developer Tools. 
+It's based on the current Live Development code in Brackets, both implemenations can be swapped by setting 'livedev.impl' preference:
+ 'livedev.impl' : 'livedev2' - enable livedev2 experimental implementation (replaces current LiveDevelopment impl based on CDT)
+ 'livedev.impl' : 'default' (or not set) - disable livedev2 (keeps curren LiveDevelopment implementation) 
+
+### What's working
+
+If enabled, it will launch will launch the page in your default browser when clicking on the LiveDevelopment icon as it works today. You should then also be able to copy and paste the URL from that browser into any other browser, live edits will then update all connected browsers at once.
+
+This is still an experimental implementation, the basic functionality for CSS/HTML editing is working but there are could be some scenarios that might be partially or entirely not covered yet. Page reload when saving changes on related Javascript files is also working. Documents that are loaded by the current HTML live doc are being tracked by ```DocumentObserver``` at the browser side which relies on DOM MutationObserver for monitoring added/removed stylesheets and Javascript files. 
+
+### Bugs/cleanup/TODO
+
+* Doesn't show an error if the browser never connects back
+* spurious errors when socket is closed
+* hard-coded port number for WebSocket server (might be fine)
+* It doesn't work on IE (need a fix on ```RemoteFunctions``` which has to be included in Brackets core - see #20)
+* Lots of TODOs in the code
+
+#### Unit tests
+
+We would definitely need a good suite of unit tests for the new functionality. I suspect it would be easier to just write entirely new, more granular unit tests than to try to reuse the old LiveDevelopment integration tests (which were fragile anyway).
+
+
+### Basic architecture
+
+The primary difference in this architecture is that communication with the browser is done via an injected script rather than CDT's native remote debugging interface, and the browser connects back to Brackets rather than Brackets connecting to the browser. This makes it so:
+
+* launching a preview, injecting scripts into the HTML, and establishing the connection between the previewed page and Brackets are relatively simple and largely decoupled
+* live preview can work in any browser, not just Chrome
+* multiple browsers can connect to the same live preview session in Brackets
+* browsers could theoretically connect from anywhere on the network that can see Brackets (though right now it's only implemented for localhost)
+* opening dev tools in the browser doesn't break live preview
+
+Communication between Brackets and the browser is factored into three layers:
+
+1. a low-level "transport" layer, which is responsible for launching live preview in the browser and providing a simple textual message bus between the browser and Brackets.
+2. the "protocol" layer, which sits on top of the transport layer and provides the actual semantic behavior (currently just "evaluate in browser")
+3. the injected RemoteFunctions script, which is the same as in today's LiveDevelopment and provides Brackets-specific functionality (highlighting, DOM edit application) on top of the core protocol.
+
+The reason for this factoring is so that the transport layer can be swapped out for different use cases, and so that anything higher-level we need that can be easily built in terms of eval doesn't have to be built into the protocol.
+
+(We could arguably get rid of the distinction between (2) and (3), and basically roll all the Brackets functionality into the "protocol" layer by simply merging the RemoteFunctions script into the protocol remote script. The only reason to keep the protocol layer separate, IMO, is if we want to keep it compatible with CDT, a la RemoteDebug - so it only provides the functionality that CDT does.)
+
+The transport layer currently implemented uses a WebSocket server in Node, coupled with an injected script in the browser that connects back to that server. However, this could easily be swapped out for a different transport layer that supports a preview iframe directly inside Brackets, where the communication is via `postMessage()`.
+
+The protocol layer currently exposes a very simple API that currently just contains specific protocol functions: 
+ * "evaluate"  which evals in the browser
+ * "reload" which reload the page in the browser
+ * "navigate" which allow the browser navigate to a given URL
+ 
+The over-the-wire protocol is a JSON message that more or less looks like the CDT wire protocol, although it's not an exact match right now - again, we could decide to make it exactly mimic CDT if we wanted.
+
+If we want to eventually reintroduce a CDT connection (or hook up to RemoteDebug), we have two choices: we could either just implement it as a separate transport, or we could implement it as a separate protocol impl entirely. Implementing it as a transport would be easier, and would be fine for talking to our own injected script; but it would only make sense for talking to CDT-specific functionality if we were very good about our wire protocol looking like the CDT wire protocol in general. Otherwise, we would probably want to consider swapping out the protocol entirely.
+
+### Explanation of the flow
+
+I've created a [really crappy block diagram](https://raw.githubusercontent.com/wiki/njx/brackets-livedev2/livedev2-block-diagram.png) of how the various bits talk to each other.
+
+Here's a short summary of what happens when the user clicks on the Live Preview button on an HTML page.
+
+1. LiveDevelopment creates a LiveHTMLDocument for the page, passing it the protocol handler (LiveDevProtocol). LiveHTMLDocument manages communication between the editor and the browser for HTML pages.
+2. LiveDevelopment tells StaticServer that this path has a live document. StaticServer is in charge of actually serving the page and associated assets to the browser. (Note: eventually I think we should get rid of this step - StaticServer shouldn't know anything about live documents directly; it should just have a way of request instrumented text for HTML URLs.)
+3. LiveDevelopment tells the protocol to open the page via the StaticServer URL. The protocol just passes this through to the transport (NodeSocketTransport), which first creates a WebSocket server if it hasn't already, then opens the page in the default browser.
+4. The browser requests the page from StaticServer. StaticServer notes that there is a live document for this page, and requests an instrumented version of the page from LiveHTMLDocument. (The current "requestFilterPaths" mechanism for this could be simplified, I think.)
+5. LiveHTMLDocument instruments the page for live editing using the existing HTMLInstrumentation mechanism, and additionally includes remote scripts provided by the protocol (LiveDevProtocolRemote), transport (NodeSocketTransportRemote), remote functions (RemoteFunctions) and document observation (DocumentObserver) which tracks related documents. The transport script includes the URL for the WebSocket server created in step 3.
+6. The instrumented page is sent back to StaticServer, which responds to the browser with the instrumented version. Other files requested by the browser are simply returned directly by StaticServer.
+7. As the browser loads the page, it encounters the injected scripts. The transport script connects back to the NodeSocketTransport's WebSocket server created in step 3 and sends it a "connect" message to tell it what URL has been loaded in the browser. The NodeSocketTransport assigns the socket a client id so it can keep track of which socket is associated with which page instance, then raises a "connect" event.
+8. LivDevProtocol receives the "connect" event and makes a note of the associated client ID updating the current active connections. LiveDevelopment also receives the "connect" event, it checks that the URL that comes on the message matches the current live doc instance and updates session status to STATUS_ACTIVE in case this is the first client connected.
+After the live document is loaded in the browser, DocumentObserver scan related stylesheets and Javascript files and send a message 'Ducment.Related' which contains their URLs. LiveDevelopment receives the message, extract stylesshes and creates a LiveCSSDocument instance per each of them. LiveHTMLDocument listen to the same message and further notifications (added/removed) to keep info about its related docs which is needed by LiveDocument (eg. when saving changes of a JS file).
+9. As the user makes live edits or changes selection, LiveHTMLDocument calls the protocol handler's "evaluate" function to call functions from the injected RemoteFunctions.
+10. The protocol's "evaluate" method packages up the request as a JSON message and sends it via the transport.
+11. The remote transport handler unpacks the message and passes it to the remote protocol handler, which finally interprets it and evals its content.
+12. If another browser loads the same page (from the StaticServer URL), steps 4-8 repeat, with LiveHTMLDocument just adding the new connection's client ID to its list. Future evals are then sent to all the associated client IDs for the page.
+
+
+### Changes from existing LiveDevelopment code
+
+* the existing code for talking to Chrome Developer Tools via the remote debugging interface is gone for now
+* CSSDocument and HTMLDocument were renamed to LiveCSSDocument and LiveHTMLDocument, with a new LiveDocument base class
+* the "agents" are all gone - a lot of them were dead code anyway; other functionality was rolled into LiveDocument
+* communication is factored into transport and protocol layers (see above)
+* HTMLInstrumentation and HTMLSimpleDOM were modified slightly (which is why they're copied into the extension), to make it possible to inject the remote scripts and to fix an issue with re-instrumenting the HTML when a second browser connects to Live Development. The former change is harmless; the latter change would need some review or possibly more work in order to merge into master. 
diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
new file mode 100644
index 00000000000..d7b914b137c
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
@@ -0,0 +1,172 @@
+/*
+ * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets */
+
+/**
+ * LiveCSSDocument manages a single CSS source document
+ *
+ * # EDITING
+ *
+ * Editing the document will cause the style sheet to be reloaded in the browser,
+ * which immediately updates the appearance of the rendered document.
+ *
+ * # HIGHLIGHTING
+ *
+ * DOM nodes corresponding to the rule at the current cursor position are highlighted.
+ *
+ * # EVENTS
+ *
+ * LiveCSSDocument dispatches these events:
+ *  deleted - When the file for the underlying Document has been deleted. The
+ *      2nd argument to the listener will be this LiveCSSDocument.
+ */
+define(function LiveCSSDocumentModule(require, exports, module) {
+    "use strict";
+
+    var _               = require("thirdparty/lodash"),
+        CSSUtils        = require("language/CSSUtils"),
+        EditorManager   = require("editor/EditorManager"),
+        LiveDocument    = require("LiveDevelopment/MultiBrowserImpl/documents/LiveDocument");
+
+    /** 
+     * @constructor
+     * @see LiveDocument
+     * @param {LiveDevProtocol} protocol The protocol to use for communicating with the browser.
+     * @param {function(string): string} urlResolver A function that, given a path on disk, should return
+     *     the URL that Live Development serves that path at.
+     * @param {Document} doc The Brackets document that this live document is connected to.
+     * @param {?Editor} editor If specified, a particular editor that this live document is managing.
+     *     If not specified initially, the LiveDocument will connect to the editor for the given document
+     *     when it next becomes the active editor.
+     */
+    var LiveCSSDocument = function LiveCSSDocument(protocol, urlResolver, doc, editor, roots) {
+        LiveDocument.apply(this, arguments);
+        
+        // Add a ref to the doc since we're listening for change events
+        this.doc.addRef();
+        this.onChange = this.onChange.bind(this);
+        this.onDeleted = this.onDeleted.bind(this);
+
+        $(this.doc).on("change.LiveCSSDocument", this.onChange);
+        $(this.doc).on("deleted.LiveCSSDocument", this.onDeleted);
+    };
+    
+    LiveCSSDocument.prototype = Object.create(LiveDocument.prototype);
+    LiveCSSDocument.prototype.constructor = LiveCSSDocument;
+    LiveCSSDocument.prototype.parentClass = LiveDocument.prototype;
+ 
+    /**
+     * @override
+     * Closes the live document, terminating its connection to the browser.
+     */
+    LiveCSSDocument.prototype.close = function () {
+        $(this.doc).off(".LiveCSSDocument");
+        this.doc.releaseRef();
+        this.parentClass.close.call(this);
+    };
+
+    /**
+     * When the user edits the file, update the stylesheet in the browser and redraw highlights.
+     */
+    LiveCSSDocument.prototype._updateBrowser = function () {
+        var i;
+        for (i = 0; i < this.roots.length; i++) {
+            if (this.doc.url !== this.roots[i]) {
+                // if it's not directly included through <link>,
+                // reload the original doc
+                $(this).triggerHandler("updateDoc", this.roots[i]);
+            } else {
+                this.protocol.evaluate("_LD.reloadCSS(" +
+                                       JSON.stringify(this.doc.url) + ", " +
+                                       JSON.stringify(this.doc.getText()) + ")");
+            }
+        }
+        this.redrawHighlights();
+    };
+
+    /**
+     * @override
+     * Update the highlights in the browser based on the cursor position.
+     */
+    LiveCSSDocument.prototype.updateHighlight = function () {
+        if (this.isHighlightEnabled() && this.editor) {
+            var editor = this.editor,
+                codeMirror = editor._codeMirror,
+                selectors = [];
+            _.each(this.editor.getSelections(), function (sel) {
+                var selector = CSSUtils.findSelectorAtDocumentPos(editor, (sel.reversed ? sel.end : sel.start));
+                if (selector) {
+                    selectors.push(selector);
+                }
+            });
+            if (selectors.length) {
+                this.highlightRule(selectors.join(","));
+            } else {
+                this.hideHighlight();
+            }
+        }
+    };
+    
+    /**
+     * @override
+     * Returns true if document edits appear live in the connected browser.
+     * @return {boolean} 
+     */
+    LiveCSSDocument.prototype.isLiveEditingEnabled = function () {
+        return true;
+    };
+ 
+    /** Event Handlers *******************************************************/
+
+    /**
+     * @private
+     * Handles edits to the document. Updates the stylesheet in the browser.
+     * @param {$.Event} event
+     * @param {Editor} editor
+     * @param {Object} change
+     */
+    LiveCSSDocument.prototype.onChange = function (event, editor, change) {
+        this._updateBrowser();
+    };
+
+    /** 
+     * @private
+     * Handles when the associated CSS document is deleted on disk. Removes the
+     * stylesheet from the browser and shuts down the live document.
+     * @param {$.Event} event
+     */
+    LiveCSSDocument.prototype.onDeleted = function (event) {
+        // TODO Need to add protocol API to remove the stylesheet from the document.
+        //CSSAgent.clearCSSForDocument(this.doc);
+
+        // shut down, since our Document is now dead
+        this.close();
+        $(this).triggerHandler("deleted", [this]);
+    };
+
+    // Export the class
+    module.exports = LiveCSSDocument;
+});
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js
new file mode 100644
index 00000000000..029c58c127e
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveDocument.js
@@ -0,0 +1,341 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets */
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    var EditorManager       = require("editor/EditorManager"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
+        _                   = require("thirdparty/lodash");
+        
+    /**
+     * @const
+     * CSS class to use for live preview errors.
+     * @type {string}
+     */
+    var SYNC_ERROR_CLASS = "live-preview-sync-error";
+
+    /**
+     * @constructor
+     * Base class for managing the connection between a live editor and the browser. Provides functions
+     * for subclasses to highlight relevant nodes in the browser, and to mark errors in the editor.
+     *
+     * Raises these events:
+     *     "connect" - when a browser connects from the URL that maps to this live document. Passes the
+     *          URL as a parameter.
+     *     "errorStatusChanged" - when the status of errors that might prevent live edits from
+     *          working (e.g. HTML syntax errors) has changed. Passes a boolean that's true if there
+     *          are errors, false otherwise.
+     *
+     * @param {LiveDevProtocol} protocol The protocol to use for communicating with the browser.
+     * @param {function(string): string} urlResolver A function that, given a path on disk, should return
+     *     the URL that Live Development serves that path at.
+     * @param {Document} doc The Brackets document that this live document is connected to.
+     * @param {?Editor} editor If specified, a particular editor that this live document is managing.
+     *     If not specified initially, the LiveDocument will connect to the editor for the given document
+     *     when it next becomes the active editor.
+     */
+    function LiveDocument(protocol, urlResolver, doc, editor, roots) {
+        this.protocol = protocol;
+        this.urlResolver = urlResolver;
+        this.doc = doc;
+        this.roots = roots || [];
+        
+        this._onActiveEditorChange = this._onActiveEditorChange.bind(this);
+        this._onCursorActivity = this._onCursorActivity.bind(this);
+        this._onHighlightPrefChange = this._onHighlightPrefChange.bind(this);
+
+        $(EditorManager).on("activeEditorChange", this._onActiveEditorChange);
+
+        PreferencesManager.stateManager.getPreference("livedev.highlight")
+            .on("change", this._onHighlightPrefChange);
+       
+        // Redraw highlights when window gets focus. This ensures that the highlights
+        // will be in sync with any DOM changes that may have occurred.
+        $(window).focus(this._onHighlightPrefChange);
+
+        if (editor) {
+            // Attach now
+            this._attachToEditor(editor);
+        }
+    }
+    
+    /**
+     * Closes the live document, terminating its connection to the browser.
+     */
+    LiveDocument.prototype.close = function () {
+        
+        this._clearErrorDisplay();
+        this._detachFromEditor();
+        $(EditorManager).off("activeEditorChange", this._onActiveEditorChange);
+        PreferencesManager.stateManager.getPreference("livedev.highlight")
+            .off("change", this._onHighlightPrefChange);
+    };
+    
+    /**
+     * Returns true if document edits appear live in the connected browser.
+     * Should be overridden by subclasses.
+     * @return {boolean} 
+     */
+    LiveDocument.prototype.isLiveEditingEnabled = function () {
+        return false;
+    };
+    
+    /**
+     * Called to turn instrumentation on or off for this file. Triggered by being
+     * requested from the browser. Should be implemented by subclasses if instrumentation
+     * is necessary for the subclass's document type.
+     * TODO: this doesn't seem necessary...if we're a live document, we should
+     * always have instrumentation on anyway.
+     * @param {boolean} enabled
+     */
+    LiveDocument.prototype.setInstrumentationEnabled = function (enabled) {
+        // Does nothing in base class.
+    };
+    
+    /**
+     * Returns the instrumented version of the file. By default, just returns
+     * the document text. Should be overridden by subclasses for cases if instrumentation
+     * is necessary for the subclass's document type.
+     * @returns {{body: string}}
+     */
+    LiveDocument.prototype.getResponseData = function (enabled) {
+        return {
+            body: this.doc.getText()
+        };
+    };
+    
+    /**
+     * @private
+     * Handles changes to the "Live Highlight" preference, switching it on/off in the browser as appropriate.
+     */
+    LiveDocument.prototype._onHighlightPrefChange = function () {
+        if (this.isHighlightEnabled()) {
+            this.updateHighlight();
+        } else {
+            this.hideHighlight();
+        }
+    };
+    
+    /**
+     * @private
+     * Handles when the active editor changes, attaching to the new editor if it's for the current document.
+     * @param {$.Event} event
+     * @param {?Editor} newActive
+     * @param {?Editor} oldActive
+     */
+    LiveDocument.prototype._onActiveEditorChange = function (event, newActive, oldActive) {
+ 
+        //FIXME: #7 prevents the page to be reloaded when editing JS files.
+        //       Temporarily disabling this code to make JS editing work.
+//      this._detachFromEditor();
+        
+        if (newActive && newActive.document === this.doc) {
+            this._attachToEditor(newActive);
+        }
+    };
+    
+    /**
+     * @private
+     * Attaches to an editor for our associated document when it becomes active.
+     * @param {Editor} editor
+     */
+    LiveDocument.prototype._attachToEditor = function (editor) {
+        this.editor = editor;
+        
+        if (this.editor) {
+            $(this.editor).on("cursorActivity", this._onCursorActivity);
+            this.updateHighlight();
+        }
+    };
+    
+    /**
+     * @private
+     * Detaches from the current editor.
+     */
+    LiveDocument.prototype._detachFromEditor = function () {
+        if (this.editor) {
+            this.hideHighlight();
+            $(this.editor).off("cursorActivity", this._onCursorActivity);
+            this.editor = null;
+        }
+    };
+
+    /**
+     * @private
+     * Handles a cursor change in our attached editor. Updates the highlight in the browser.
+     * @param {$.Event} event
+     * @param {Editor} editor
+     */
+    LiveDocument.prototype._onCursorActivity = function (event, editor) {
+        if (!this.editor) {
+            return;
+        }
+        this.updateHighlight();
+    };
+    
+    /**
+     * @private
+     * Update errors shown by the live document in the editor. Should be called by subclasses
+     * when the list of errors changes.
+     */
+    LiveDocument.prototype._updateErrorDisplay = function () {
+        var self = this,
+            startLine,
+            endLine,
+            lineInfo,
+            i,
+            lineHandle;
+        
+        if (!this.editor) {
+            return;
+        }
+
+        // Buffer addLineClass DOM changes in a CodeMirror operation
+        this.editor._codeMirror.operation(function () {
+            // Remove existing errors before marking new ones
+            self._clearErrorDisplay();
+            
+            self._errorLineHandles = self._errorLineHandles || [];
+    
+            self.errors.forEach(function (error) {
+                startLine = error.startPos.line;
+                endLine = error.endPos.line;
+                
+                for (i = startLine; i < endLine + 1; i++) {
+                    lineHandle = self.editor._codeMirror.addLineClass(i, "wrap", SYNC_ERROR_CLASS);
+                    self._errorLineHandles.push(lineHandle);
+                }
+            });
+        });
+        
+        $(this).triggerHandler("errorStatusChanged", [!!this.errors.length]);
+    };
+    
+    /**
+     * @private
+     * Clears the errors shown in the attached editor.
+     */
+    LiveDocument.prototype._clearErrorDisplay = function () {
+        var self = this,
+            lineHandle;
+        
+        if (!this.editor ||
+                !this._errorLineHandles ||
+                !this._errorLineHandles.length) {
+            return;
+        }
+        
+        this.editor._codeMirror.operation(function () {
+            while (true) {
+                // Iterate over all lines that were previously marked with an error
+                lineHandle = self._errorLineHandles.pop();
+                
+                if (!lineHandle) {
+                    break;
+                }
+                
+                self.editor._codeMirror.removeLineClass(lineHandle, "wrap", SYNC_ERROR_CLASS);
+            }
+        });
+    };
+    
+    /**
+     * Returns true if we should be highlighting.
+     * @return {boolean}
+     */
+    LiveDocument.prototype.isHighlightEnabled = function () {
+        return PreferencesManager.getViewState("livedev2.highlight");
+    };
+    
+    /**
+     * Called when the highlight in the browser should be updated because the user has
+     * changed the selection. Does nothing in base class, should be implemented by subclasses
+     * that implement highlighting functionality.
+     */
+    LiveDocument.prototype.updateHighlight = function () {
+        // Does nothing in base class
+    };
+    
+    /**
+     * Hides the current highlight in the browser.
+     * @param {boolean=} temporary If true, this isn't a change of state - we're just about
+     *     to re-highlight.
+     */
+    LiveDocument.prototype.hideHighlight = function (temporary) {
+        if (!temporary) {
+            this._lastHighlight = null;
+        }
+        this.protocol.evaluate("_LD.hideHighlight()");
+    };
+
+    /**
+     * Highlight all nodes affected by a CSS rule. Should be called by subclass implementations of
+     * `updateHighlight()`.
+     * @param {string} name The selector whose matched nodes should be highlighted.
+     */
+    LiveDocument.prototype.highlightRule = function (name) {
+        if (this._lastHighlight === name) {
+            return;
+        }
+        this._lastHighlight = name;
+        this.protocol.evaluate("_LD.highlightRule(" + JSON.stringify(name) + ")");
+    };
+    
+    /** 
+     * Highlight all nodes with 'data-brackets-id' value
+     * that matches id, or if id is an array, matches any of the given ids.
+     * Should be called by subclass implementations of
+     * `updateHighlight()`.
+     * @param {string|Array.<string>} value of the 'data-brackets-id' to match,
+     * or an array of such.
+     */
+    LiveDocument.prototype.highlightDomElement = function (ids) {
+        var selector = "";
+        if (!Array.isArray(ids)) {
+            ids = [ids];
+        }
+        _.each(ids, function (id) {
+            if (selector !== "") {
+                selector += ",";
+            }
+            selector += "[data-brackets-id='" + id + "']";
+        });
+        this.highlightRule(selector);
+    };
+    
+    /**
+     * Redraw active highlights.
+     */
+    LiveDocument.prototype.redrawHighlights = function () {
+        if (this.isHighlightEnabled()) {
+            this.protocol.evaluate("_LD.redrawHighlights()");
+        }
+    };
+    
+    module.exports = LiveDocument;
+});
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveHTMLDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveHTMLDocument.js
new file mode 100644
index 00000000000..1703a66f7ad
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveHTMLDocument.js
@@ -0,0 +1,308 @@
+/*
+ * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets */
+
+/**
+ * LiveHTMLDocument manages a single HTML source document. Edits to the HTML are applied live in
+ * the browser, and the DOM node corresponding to the selection is highlighted.
+ *
+ * LiveHTMLDocument relies on HTMLInstrumentation in order to map tags in the HTML source text
+ * to DOM nodes in the browser, so edits can be incrementally applied.
+ */
+define(function (require, exports, module) {
+    "use strict";
+
+    var DocumentManager     = require("document/DocumentManager"),
+        PerfUtils           = require("utils/PerfUtils"),
+        StringUtils         = require("utils/StringUtils"),
+        _                   = require("thirdparty/lodash"),
+        LiveDocument        = require("LiveDevelopment/MultiBrowserImpl/documents/LiveDocument"),
+        HTMLInstrumentation = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation");
+
+
+    /**
+     * @constructor
+     * @see LiveDocument
+     * @param {LiveDevProtocol} protocol The protocol to use for communicating with the browser.
+     * @param {function(string): string} urlResolver A function that, given a path on disk, should return
+     *     the URL that Live Development serves that path at.
+     * @param {Document} doc The Brackets document that this live document is connected to.
+     * @param {?Editor} editor If specified, a particular editor that this live document is managing.
+     *     If not specified initially, the LiveDocument will connect to the editor for the given document
+     *     when it next becomes the active editor.
+     */
+    function LiveHTMLDocument(protocol, urlResolver, doc, editor) {
+        LiveDocument.apply(this, arguments);
+        
+        this._instrumentationEnabled = false;
+        this._relatedDocuments = {
+            stylesheets: {},
+            scripts: {}
+        };
+        
+        this._onChange = this._onChange.bind(this);
+        $(this.doc).on("change", this._onChange);
+        
+        this._onRelated = this._onRelated.bind(this);
+        $(this.protocol).on("Document.Related", this._onRelated);
+        
+        this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
+        $(this.protocol).on("Stylesheet.Added", this._onStylesheetAdded);
+        
+        this._onStylesheetRemoved = this._onStylesheetRemoved.bind(this);
+        $(this.protocol).on("Stylesheet.Removed", this._onStylesheetRemoved);
+        
+        this._onScriptAdded = this._onScriptAdded.bind(this);
+        $(this.protocol).on("Script.Added", this._onScriptAdded);
+        
+        this._onScriptRemoved = this._onScriptRemoved.bind(this);
+        $(this.protocol).on("Script.Removed", this._onScriptRemoved);
+        
+    }
+    
+    LiveHTMLDocument.prototype = Object.create(LiveDocument.prototype);
+    LiveHTMLDocument.prototype.constructor = LiveHTMLDocument;
+    LiveHTMLDocument.prototype.parentClass = LiveDocument.prototype;
+    
+    
+    /**
+     * @override
+     * Returns true if document edits appear live in the connected browser.
+     * @return {boolean} 
+     */
+    LiveHTMLDocument.prototype.isLiveEditingEnabled = function () {
+        return this._instrumentationEnabled;
+    };
+    
+    /**
+     * @override
+     * Called to turn instrumentation on or off for this file. Triggered by being
+     * requested from the browser. 
+     * TODO: this doesn't seem necessary...if we're a live document, we should
+     * always have instrumentation on anyway.
+     * @param {boolean} enabled
+     */
+    LiveHTMLDocument.prototype.setInstrumentationEnabled = function (enabled) {
+        if (!this.editor) {
+            // TODO: error
+            return;
+        }
+        if (enabled && !this._instrumentationEnabled) {
+            // TODO: not clear why we do this here instead of waiting for the next time we want to
+            // generate the instrumented HTML. This won't work if the dom offsets are out of date.
+            HTMLInstrumentation.scanDocument(this.doc);
+            HTMLInstrumentation._markText(this.editor);
+        }
+        
+        this._instrumentationEnabled = enabled;
+    };
+    
+    /**
+     * Returns the instrumented version of the file. 
+     * @returns {{body: string}}
+     */
+    LiveHTMLDocument.prototype.getResponseData = function (enabled) {
+        var body;
+        if (this._instrumentationEnabled) {
+            body = HTMLInstrumentation.generateInstrumentedHTML(this.editor, this.protocol.getRemoteScript());
+        }
+        
+        return {
+            body: body || this.doc.getText()
+        };
+    };
+
+    /**
+     * @override
+     * Closes the live document, terminating its connection to the browser.
+     */
+    LiveHTMLDocument.prototype.close = function () {
+        $(this.doc).off("change", this._onChange);
+        this.parentClass.close.call(this);
+    };
+    
+    /**
+     * @override
+     * Update the highlights in the browser based on the cursor position.
+     */
+    LiveHTMLDocument.prototype.updateHighlight = function () {
+        if (!this.editor || !this.isHighlightEnabled) {
+            return;
+        }
+        var editor = this.editor,
+            codeMirror = editor._codeMirror,
+            ids = [];
+        _.each(this.editor.getSelections(), function (sel) {
+            var tagID = HTMLInstrumentation._getTagIDAtDocumentPos(
+                editor,
+                sel.reversed ? sel.end : sel.start
+            );
+            if (tagID !== -1) {
+                ids.push(tagID);
+            }
+        });
+
+        if (!ids.length) {
+            this.hideHighlight();
+        } else {
+            this.highlightDomElement(ids);
+        }
+    };
+
+    /**
+     * @private
+     * For the given editor change, compare the resulting browser DOM with the
+     * in-editor DOM. If there are any diffs, a warning is logged to the
+     * console along with each diff.
+     * @param {Object} change CodeMirror editor change data
+     */
+    LiveHTMLDocument.prototype._compareWithBrowser = function (change) {
+        // TODO: Not implemented.
+    };
+
+    /**
+     * @private
+     * Handles edits to the document. Determines what's changed in the source and sends DOM diffs to the browser.
+     * @param {$.Event} event
+     * @param {Document} doc
+     * @param {Object} change
+     */
+    LiveHTMLDocument.prototype._onChange = function (event, doc, change) {
+        // Make sure LiveHTML is turned on
+        if (!this._instrumentationEnabled) {
+            return;
+        }
+
+        // Apply DOM edits is async, so previous PerfUtils timer may still be
+        // running. PerfUtils does not support running multiple timers with same
+        // name, so do not start another timer in this case.
+        var perfTimerName   = "LiveHTMLDocument applyDOMEdits",
+            isNestedTimer   = PerfUtils.isActive(perfTimerName);
+        if (!isNestedTimer) {
+            PerfUtils.markStart(perfTimerName);
+        }
+
+        var self                = this,
+            result              = HTMLInstrumentation.getUnappliedEditList(this.editor, change),
+            applyEditsPromise;
+        
+        if (result.edits) {
+            applyEditsPromise = this.protocol.evaluate("_LD.applyDOMEdits(" + JSON.stringify(result.edits) + ")");
+    
+            applyEditsPromise.always(function () {
+                if (!isNestedTimer) {
+                    PerfUtils.addMeasurement(perfTimerName);
+                }
+            });
+        }
+
+        this.errors = result.errors || [];
+        this._updateErrorDisplay();
+        
+        // Debug-only: compare in-memory vs. in-browser DOM
+        // edit this file or set a conditional breakpoint at the top of this function:
+        //     "this._debug = true, false"
+        if (this._debug) {
+            console.log("Edits applied to browser were:");
+            console.log(JSON.stringify(result.edits, null, 2));
+            applyEditsPromise.done(function () {
+                self._compareWithBrowser(change);
+            });
+        }
+    };
+    
+    
+    /**
+     * @private
+     * Handles message Document.Related from the browser.
+     * @param {$.Event} event
+     * @param {Object} msg
+     */
+    LiveHTMLDocument.prototype._onRelated = function (event, msg) {
+        this._relatedDocuments = msg.related;
+        return;
+    };
+    
+    /**
+     * @private
+     * Handles message Stylesheet.Added from the browser.
+     * @param {$.Event} event
+     * @param {Object} msg
+     */
+    LiveHTMLDocument.prototype._onStylesheetAdded = function (event, msg) {
+        this._relatedDocuments.stylesheets[msg.href] = true;
+        return;
+    };
+    
+    /**
+     * @private
+     * Handles message Stylesheet.Removed from the browser.
+     * @param {$.Event} event
+     * @param {Object} msg
+     */
+    LiveHTMLDocument.prototype._onStylesheetRemoved = function (event, msg) {
+        delete (this._relatedDocuments.stylesheets[msg.href]);
+        return;
+    };
+    
+    /**
+     * @private
+     * Handles message Script.Added from the browser.
+     * @param {$.Event} event
+     * @param {Object} msg
+     */
+    LiveHTMLDocument.prototype._onScriptAdded = function (event, msg) {
+        this._relatedDocuments.scripts[msg.src] = true;
+        return;
+    };
+
+     /**
+     * @private
+     * Handles message Script.Removed from the browser.
+     * @param {$.Event} event
+     * @param {Object} msg
+     */
+    LiveHTMLDocument.prototype._onScriptRemoved = function (event, msg) {
+        delete (this._relatedDocuments.scripts[msg.src]);
+        return;
+    };
+    
+     /**
+     * For the given path, check if the document is related to the live HTML document.
+     * Related means that is an external Javascript or CSS file that is included as part of the DOM.
+     * @param {String} fullPath.
+     * @return {boolean} - is related or not.
+     */
+    LiveHTMLDocument.prototype.isRelated = function (fullPath) {
+        return (this._relatedDocuments.scripts[this.urlResolver(fullPath)] || this._relatedDocuments.stylesheets[this.urlResolver(fullPath)]);
+    };
+
+    LiveHTMLDocument.prototype.getRelated = function () {
+        return this._relatedDocuments;
+    };
+    // Export the class
+    module.exports = LiveHTMLDocument;
+});
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation.js b/src/LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation.js
new file mode 100644
index 00000000000..595b3a35154
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation.js
@@ -0,0 +1,876 @@
+/*
+ * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define, $, brackets */
+/*unittests: HTML Instrumentation*/
+
+/**
+ * HTMLInstrumentation
+ *
+ * This module contains functions for "instrumenting" html code so that we can track
+ * the relationship of source code to DOM nodes in the browser. This functionality is
+ * used by both live highlighting and live HTML editing.
+ *
+ * During live HTML development, the HTML source code is parsed to identify tag boundaries.
+ * Each tag is assigned an ID which is stored in markers that are inserted into the editor.
+ * These IDs are also included in "data-brackets-id" attributes that are inserted in the
+ * HTML code that's served to the browser via the Live Development server.
+ *
+ * The primary function for that functionality is generateInstrumentedHTML(). This does just 
+ * what it says - it will read the HTML content in the doc and generate instrumented code by 
+ * injecting "data-brackets-id" attributes. Additionally, it caches the parsed DOM for use
+ * by future updates.
+ *
+ * As the user makes edits in the editor, we determine how the DOM structure should change
+ * based on the edits to the source code; those edits are generated by getUnappliedEditList().
+ * HTMLDocument (in LiveDevelopment) takes those edits and sends them to the browser (via
+ * RemoteFunctions) so that the DOM structure in the live preview can be updated accordingly.
+ *
+ * There are also helper functions for returning the tagID associated with a specified
+ * position in the document--this is used in live highlighting.
+ */
+define(function (require, exports, module) {
+    "use strict";
+
+    var DocumentManager = require("document/DocumentManager"),
+        HTMLDOMDiff     = require("language/HTMLDOMDiff"),
+        PerfUtils       = require("utils/PerfUtils"),
+        HTMLSimpleDOM   = require("LiveDevelopment/MultiBrowserImpl/language/HTMLSimpleDOM");
+    
+    var allowIncremental = true;
+    
+    // Hash of scanned documents. Key is the full path of the doc. Value is an object
+    // with two properties: timestamp and dom. Timestamp is the document timestamp,
+    // dom is the root node of a simple DOM tree.
+    var _cachedValues = {};
+
+    /** 
+     * @private
+     * Removes the cached information (DOM, timestamp, etc.) used by HTMLInstrumentation
+     * for the given document.
+     * @param {$.Event} event (unused)
+     * @param {Document} document The document to clear from the cache.
+     */
+    function _removeDocFromCache(evt, document) {
+        if (_cachedValues.hasOwnProperty(document.file.fullPath)) {
+            delete _cachedValues[document.file.fullPath];
+            $(document).off(".htmlInstrumentation");
+        }
+    }
+    
+    /**
+     * @private
+     * Checks if two CodeMirror-style {line, ch} positions are equal.
+     * @param {{line: number, ch: number}} pos1
+     * @param {{line: number, ch: number}} pos2
+     * @return {boolean} true if pos1 and pos2 are equal. Fails if either of them is falsy.
+     */
+    function _posEq(pos1, pos2) {
+        return pos1 && pos2 && pos1.line === pos2.line && pos1.ch === pos2.ch;
+    }
+    
+    /**
+     * @private
+     * Filters the given marks to find the ones that correspond to instrumented tags,
+     * sorts them by their starting position, and looks up and/or stores their ranges 
+     * in the given markCache.
+     * @param {Array} marks An array of mark objects returned by CodeMirror.
+     * @param {Object} markCache An object that maps tag IDs to {mark, range} objects.
+     *     If a mark in the marks array is already in the cache, we use the cached range info,
+     *     otherwise we look up its range in CodeMirror and store it in the cache.
+     * @return {Array.<{mark: Object, range: {line: number, ch: number}}>} The filtered and
+     *     sorted array of mark info objects (each of which contains the mark and its range,
+     *     so the range doesn't need to be looked up again).
+     */
+    function _getSortedTagMarks(marks, markCache) {
+        marks = marks.filter(function (mark) {
+            return !!mark.tagID;
+        }).map(function (mark) {
+            // All marks should exist since we just got them from CodeMirror.
+            if (!markCache[mark.tagID]) {
+                markCache[mark.tagID] = {mark: mark, range: mark.find()};
+            }
+            return markCache[mark.tagID];
+        });
+        marks.sort(function (mark1, mark2) {
+            return (mark1.range.from.line === mark2.range.from.line ?
+                    mark1.range.from.ch - mark2.range.from.ch :
+                    mark1.range.from.line - mark2.range.from.line);
+        });
+        
+        return marks;
+    }
+    
+    /**
+     * @private
+     * Finds the mark for the DOM node at the given position in the editor.
+     * @param {Editor} editor The editor containing the instrumented document.
+     * @param {{line: number, ch: number}} pos The position to find the DOM marker for.
+     * @param {boolean} preferParent If true, and the pos is at one or the other edge of the
+     *     innermost marked range, return the immediately enclosing mark instead.
+     * @param {Object=} markCache An optional cache to look up positions of existing
+     *     markers. (This avoids calling the find() operation on marks multiple times, 
+     *     which is expensive.)
+     * @return {Object} The CodeMirror mark object that represents the DOM node at the
+     *     given position.
+     */
+    function _getMarkerAtDocumentPos(editor, pos, preferParent, markCache) {
+        var i, marks, match;
+        
+        markCache = markCache || {};
+        marks = _getSortedTagMarks(editor._codeMirror.findMarksAt(pos), markCache);
+        if (!marks.length) {
+            return null;
+        }
+        
+        // The mark with the latest start is the innermost one.
+        match = marks[marks.length - 1];
+        if (preferParent) {
+            // If the match is exactly at the edge of the range and preferParent is set,
+            // we want to pop upwards.
+            if (_posEq(match.range.from, pos) || _posEq(match.range.to, pos)) {
+                if (marks.length > 1) {
+                    match = marks[marks.length - 2];
+                } else {
+                    // We must be outside the root, so there's no containing tag.
+                    match = null;
+                }
+            }
+        }
+        
+        return match.mark;
+    }
+    
+    /**
+     * @private
+     * Dumps the current list of mark ranges for instrumented tags to the console. Used for debugging.
+     * @param {Editor} editor The editor to find the mark ranges for.
+     * @param {Object=} nodeMap If specified, a map of tag IDs to DOM nodes, used so we can indicate which tag name
+     *     the DOM thinks corresponds to the given mark.
+     */
+    function _dumpMarks(editor, nodeMap) {
+        var markCache = {},
+            marks = _getSortedTagMarks(editor._codeMirror.getAllMarks(), markCache);
+        marks.forEach(function (markInfo) {
+            var mark = markInfo.mark,
+                range = markInfo.range;
+            console.log("<" + nodeMap[mark.tagID].tag + "> (" + mark.tagID + ") " +
+                        range.from.line + ":" + range.from.ch + " - " + range.to.line + ":" + range.to.ch);
+        });
+    }
+
+    /**
+     * Get the instrumented tagID at the specified position. Returns -1 if
+     * there are no instrumented tags at the location.
+     * The _markText() function must be called before calling this function.
+     *
+     * NOTE: This function is "private" for now (has a leading underscore), since
+     * the API is likely to change in the future.
+     *
+     * @param {Editor} editor The editor to scan. 
+     * @param {{line: number, ch: number}} pos The position to find the DOM marker for.
+     * @param {Object=} markCache An optional cache to look up positions of existing
+     *     markers. (This avoids calling the find() operation on marks multiple times, 
+     *     which is expensive.)
+     * @return {number} tagID at the specified position, or -1 if there is no tag
+     */
+    function _getTagIDAtDocumentPos(editor, pos, markCache) {
+        var match = _getMarkerAtDocumentPos(editor, pos, false, markCache);
+
+        return (match) ? match.tagID : -1;
+    }
+    
+    /**
+     * Recursively walks the SimpleDOM starting at node and marking
+     * all tags in the CodeMirror instance. The more useful interface
+     * is the _markTextFromDOM function which clears existing marks
+     * before calling this function to create new ones.
+     *
+     * @param {CodeMirror} cm CodeMirror instance in which to mark tags
+     * @param {Object} node SimpleDOM node to use as the root for marking
+     */
+    function _markTags(cm, node) {
+        node.children.forEach(function (childNode) {
+            if (childNode.isElement()) {
+                _markTags(cm, childNode);
+            }
+        });
+        var mark = cm.markText(node.startPos, node.endPos);
+        mark.tagID = node.tagID;
+    }
+    
+    /**
+     * Clears the marks from the document and creates new ones.
+     *
+     * @param {Editor} editor Editor object holding this document
+     * @param {Object} dom SimpleDOM root object that contains the parsed structure
+     */
+    function _markTextFromDOM(editor, dom) {
+        var cm = editor._codeMirror;
+        
+        // Remove existing marks
+        var marks = cm.getAllMarks();
+        cm.operation(function () {
+            marks.forEach(function (mark) {
+                if (mark.hasOwnProperty("tagID")) {
+                    mark.clear();
+                }
+            });
+        });
+                
+        // Mark
+        _markTags(cm, dom);
+    }
+    
+    /**
+     * @constructor
+     * Subclass of HTMLSimpleDOM.Builder that builds an updated DOM after changes have been made,
+     * and maps nodes from the new DOM to the old DOM by tag ID. For non-structural edits, avoids reparsing
+     * the whole editor. Also updates marks in the editor based on the new DOM state.
+     *
+     * @param {Object} previousDOM The root of the HTMLSimpleDOM tree representing a previous state of the DOM.
+     * @param {Editor} editor The editor containing the instrumented HTML.
+     * @param {Array=} changeList An optional array of CodeMirror change records representing the
+     *     edits the user made in the editor since previousDOM was built. If provided, and the
+     *     edits are not structural, DOMUpdater will do a fast incremental reparse. If not provided,
+     *     or if one of the edits changes the DOM structure, DOMUpdater will reparse the whole DOM.
+     */
+    function DOMUpdater(previousDOM, editor, changeList) {
+        var text, startOffset = 0, startOffsetPos;
+
+        this.isIncremental = false;
+        
+        function isDangerousEdit(text) {
+            // We don't consider & dangerous since entities only affect text content, not
+            // overall DOM structure.
+            return (/[<>\/=\"\']/).test(text);
+        }
+        
+        // If there's more than one change, be conservative and assume we have to do a full reparse.
+        if (changeList && changeList.length === 1) {
+            // If the inserted or removed text doesn't have any characters that could change the
+            // structure of the DOM (e.g. by adding or removing a tag boundary), then we can do
+            // an incremental reparse of just the parent tag containing the edit. This should just
+            // be the marked range that contains the beginning of the edit range, since that position
+            // isn't changed by the edit.
+            var change = changeList[0];
+            if (!isDangerousEdit(change.text) && !isDangerousEdit(change.removed)) {
+                // If the edit is right at the beginning or end of a tag, we want to be conservative
+                // and use the parent as the edit range.
+                var startMark = _getMarkerAtDocumentPos(editor, change.from, true);
+                if (startMark) {
+                    var range = startMark.find();
+                    if (range) {
+                        text = editor._codeMirror.getRange(range.from, range.to);
+                        this.changedTagID = startMark.tagID;
+                        startOffsetPos = range.from;
+                        startOffset = editor._codeMirror.indexFromPos(startOffsetPos);
+                        this.isIncremental = true;
+                    }
+                }
+            }
+        }
+        
+        if (!this.changedTagID) {
+            // We weren't able to incrementally update, so just rebuild and diff everything.
+            text = editor.document.getText();
+        }
+        
+        HTMLSimpleDOM.Builder.call(this, text, startOffset, startOffsetPos);
+        this.editor = editor;
+        this.cm = editor._codeMirror;
+        this.previousDOM = previousDOM;
+    }
+    
+    DOMUpdater.prototype = Object.create(HTMLSimpleDOM.Builder.prototype);
+    
+    /**
+     * @private
+     * Returns true if the given node has an ancestor whose tagID is the given ID.
+     * @param {Object} node A node from an HTMLSimpleDOM structure.
+     * @param {number} id The ID of the tag to check for.
+     * @return {boolean} true if the node has an ancestor with that ID.
+     */
+    function _hasAncestorWithID(node, id) {
+        var ancestor = node.parent;
+        while (ancestor && ancestor.tagID !== id) {
+            ancestor = ancestor.parent;
+        }
+        return !!ancestor;
+    }
+    
+    /**
+     * Overrides the `getID` method to return the tag ID from the document. If a viable tag
+     * ID cannot be found in the document marks, then a new ID is returned. This will also
+     * assign a new ID if the tag changed between the previous and current versions of this
+     * node.
+     *
+     * @param {Object} newTag tag object for the current element
+     * @return {int} best ID
+     */
+    DOMUpdater.prototype.getID = function (newTag, markCache) {
+        // Get the mark at the start of the tagname (not before the beginning of the tag, because that's
+        // actually inside the parent).
+        var currentTagID = _getTagIDAtDocumentPos(this.editor, HTMLSimpleDOM._offsetPos(newTag.startPos, 1), markCache);
+        
+        // If the new tag is in an unmarked range, or the marked range actually corresponds to an
+        // ancestor tag, then this must be a newly inserted tag, so give it a new tag ID.
+        if (currentTagID === -1 || _hasAncestorWithID(newTag, currentTagID)) {
+            currentTagID = this.getNewID();
+        } else {
+            // If the tag has changed between the previous DOM and the new one, we assign a new ID
+            // so that the old tag will be deleted and the new one inserted.
+            var oldNode = this.previousDOM.nodeMap[currentTagID];
+            if (!oldNode || oldNode.tag !== newTag.tag) {
+                currentTagID = this.getNewID();
+            }
+        }
+        return currentTagID;
+    };
+    
+    /**
+     * Updates the CodeMirror marks in the editor to reflect the new bounds of nodes in
+     * the given nodeMap.
+     * @param {Object} nodeMap The node map from the new DOM.
+     * @param {Object} markCache The cache of existing mark ranges built during the latest parse.
+     */
+    DOMUpdater.prototype._updateMarkedRanges = function (nodeMap, markCache) {
+        // FUTURE: this is somewhat inefficient (getting all the marks involves passing linearly through
+        // the document once), but it doesn't seem to be a hotspot right now.
+        var updateIDs = Object.keys(nodeMap),
+            cm = this.cm,
+            marks = cm.getAllMarks();
+        
+        cm.operation(function () {
+            marks.forEach(function (mark) {
+                if (mark.hasOwnProperty("tagID") && nodeMap[mark.tagID]) {
+                    var node = nodeMap[mark.tagID],
+                        markInfo = markCache[mark.tagID];
+                    // If the mark's bounds already match, avoid destroying and recreating the mark,
+                    // since that incurs some overhead.
+                    if (!(markInfo && _posEq(markInfo.range.from, node.startPos) && _posEq(markInfo.range.to, node.endPos))) {
+                        mark.clear();
+                        mark = cm.markText(node.startPos, node.endPos);
+                        mark.tagID = node.tagID;
+                    }
+                    updateIDs.splice(updateIDs.indexOf(String(node.tagID)), 1);
+                }
+            });
+            
+            // Any remaining updateIDs are new.
+            updateIDs.forEach(function (id) {
+                var node = nodeMap[id], mark;
+                if (node.isElement()) {
+                    mark = cm.markText(node.startPos, node.endPos);
+                    mark.tagID = Number(id);
+                }
+            });
+        });
+    };
+    
+    /**
+     * @private
+     * Creates a map from tagIDs to nodes in the given HTMLSimpleDOM subtree and
+     * stores it on the root.
+     * @param {Object} root The root of an HTMLSimpleDOM tree.
+     */
+    DOMUpdater.prototype._buildNodeMap = function (root) {
+        var nodeMap = {};
+        
+        function walk(node) {
+            if (node.tagID) {
+                nodeMap[node.tagID] = node;
+            }
+            if (node.isElement()) {
+                node.children.forEach(walk);
+            }
+        }
+        
+        walk(root);
+        root.nodeMap = nodeMap;
+    };
+    
+    /**
+     * @private
+     * Removes all nodes deleted between the oldSubtree and the newSubtree from the given nodeMap,
+     * and clears marks associated with those nodes.
+     * @param {Object} nodeMap The nodeMap to update to remove deleted items.
+     * @param {Object} oldSubtreeMap The nodeMap for the original subtree (which should be a subset of the
+     *     first nodeMap).
+     * @param {Object} newSubtreeMap The nodeMap for the new subtree.
+     */
+    DOMUpdater.prototype._handleDeletions = function (nodeMap, oldSubtreeMap, newSubtreeMap) {
+        var deletedIDs = [];
+        Object.keys(oldSubtreeMap).forEach(function (key) {
+            if (!newSubtreeMap.hasOwnProperty(key)) {
+                deletedIDs.push(key);
+                delete nodeMap[key];
+            }
+        });
+        
+        if (deletedIDs.length) {
+            // FUTURE: would be better to cache the mark for each node. Also, could
+            // conceivably combine this with _updateMarkedRanges().
+            var marks = this.cm.getAllMarks();
+            marks.forEach(function (mark) {
+                if (mark.hasOwnProperty("tagID") && deletedIDs.indexOf(mark.tagID) !== -1) {
+                    mark.clear();
+                }
+            });
+        }
+    };
+    
+    /**
+     * Reparses the document (or a portion of it if we can do it incrementally).
+     * Note that in an incremental update, the old DOM is actually mutated (the new
+     * subtree is swapped in for the old subtree).
+     * @return {?{newDOM: Object, oldSubtree: Object, newSubtree: Object}} newDOM is
+     *      the full new DOM. For a full update, oldSubtree is the full old DOM 
+     *      and newSubtree is the same as newDOM; for an incremental update,
+     *      oldSubtree is the portion of the old tree that was reparsed,
+     *      newSubtree is the updated version, and newDOM is actually the same
+     *      as the original DOM (with newSubtree swapped in for oldSubtree).
+     *      If the document can't be parsed due to invalid HTML, returns null.
+     */
+    DOMUpdater.prototype.update = function () {
+        var markCache = {},
+            newSubtree = this.build(true, markCache),
+            result = {
+                // default result if we didn't identify a changed portion
+                newDOM: newSubtree,
+                oldSubtree: this.previousDOM,
+                newSubtree: newSubtree
+            };
+        
+        if (!newSubtree) {
+            return null;
+        }
+
+        if (this.changedTagID) {
+            // Find the old subtree that's going to get swapped out.
+            var oldSubtree = this.previousDOM.nodeMap[this.changedTagID],
+                parent = oldSubtree.parent;
+            
+            // If we didn't have a parent, then the whole tree changed anyway, so
+            // we'll just return the default result.
+            if (parent) {
+                var childIndex = parent.children.indexOf(oldSubtree);
+                if (childIndex === -1) {
+                    // This should never happen...
+                    console.error("DOMUpdater.update(): couldn't locate old subtree in tree");
+                } else {
+                    // Swap the new subtree in place of the old subtree.
+                    oldSubtree.parent = null;
+                    newSubtree.parent = parent;
+                    parent.children[childIndex] = newSubtree;
+                    
+                    // Overwrite any node mappings in the parent DOM with the
+                    // mappings for the new subtree. We keep the nodeMap around
+                    // on the new subtree so that the differ can use it later.
+                    $.extend(this.previousDOM.nodeMap, newSubtree.nodeMap);
+                    
+                    // Update marked ranges for all items in the new subtree.
+                    this._updateMarkedRanges(newSubtree.nodeMap, markCache);
+                    
+                    // Build a local nodeMap for the old subtree so the differ can
+                    // use it.
+                    this._buildNodeMap(oldSubtree);
+                    
+                    // Clean up the info for any deleted nodes that are no longer in
+                    // the new tree.
+                    this._handleDeletions(this.previousDOM.nodeMap, oldSubtree.nodeMap, newSubtree.nodeMap);
+                    
+                    // Update the signatures for all parents of the new subtree.
+                    var curParent = parent;
+                    while (curParent) {
+                        curParent.update();
+                        curParent = curParent.parent;
+                    }
+                    
+                    result.newDOM = this.previousDOM;
+                    result.oldSubtree = oldSubtree;
+                }
+            }
+        } else {
+            _markTextFromDOM(this.editor, result.newDOM);
+        }
+        
+        return result;
+    };
+    
+    /**
+     * @private
+     * Builds a new DOM for the current state of the editor, diffs it against the
+     * previous DOM, and generates a DOM edit list that can be used to replay the
+     * diffs in the browser.
+     * @param {Object} previousDOM The HTMLSimpleDOM corresponding to the previous state of the editor.
+     *     Note that in the case of an incremental edit, this will be mutated to create the new DOM
+     *     (by swapping out the subtree corresponding to the changed portion).
+     * @param {Editor} editor The editor containing the instrumented HTML.
+     * @param {Array=} changeList If specified, a CodeMirror changelist reflecting all the
+     *     text changes in the editor since previousDOM was built. If specified, we will
+     *     attempt to do an incremental update (although we might fall back to a full update
+     *     in various cases). If not specified, we will always do a full update.
+     * @return {{dom: Object, edits: Array}} The new DOM representing the current state of the
+     *     editor, and an array of edits that can be applied to update the browser (see
+     *     HTMLDOMDiff for more information on the edit format).
+     */
+    function _updateDOM(previousDOM, editor, changeList) {
+        if (!allowIncremental) {
+            changeList = undefined;
+        }
+        var updater = new DOMUpdater(previousDOM, editor, changeList);
+        var result = updater.update();
+        if (!result) {
+            return { errors: updater.errors };
+        }
+        
+        var edits = HTMLDOMDiff.domdiff(result.oldSubtree, result.newSubtree);
+        
+        // We're done with the nodeMap that was added to the subtree by the updater.
+        if (result.newSubtree !== result.newDOM) {
+            delete result.newSubtree.nodeMap;
+        }
+        
+        return {
+            dom: result.newDOM,
+            edits: edits,
+            _wasIncremental: updater.isIncremental // for unit tests only
+        };
+    }
+    
+    /**
+     * Calculates the DOM edits that are needed to update the browser from the state the
+     * editor was in the last time that scanDocument(), getInstrumentedHTML(), or
+     * getUnappliedEditList() was called (whichever is most recent). Caches this state so
+     * it can be used as the base state for the next getUnappliedEditList().
+     *
+     * For simple text edits, this update is done quickly and incrementally. For structural
+     * edits (edits that change the DOM structure or add/remove attributes), the update
+     * requires a full reparse. 
+     *
+     * If the document currently contains invalid HTML, no edits will be generated until 
+     * getUnappliedEditList() is called when the document is valid, at which point the edits 
+     * will reflect all the changes needed to catch the browser up with all the edits 
+     * made while the document was invalid.
+     *
+     * @param {Editor} editor The editor containing the instrumented HTML
+     * @param {Array} changeList A CodeMirror change list describing the text changes made
+     *     in the editor since the last update. If specified, we will attempt to do an
+     *     incremental update.
+     * @return {Array} edits A list of edits to apply in the browser. See HTMLDOMDiff for
+     *     more information on the format of these edits.
+     */
+    function getUnappliedEditList(editor, changeList) {
+        var cachedValue = _cachedValues[editor.document.file.fullPath];
+        
+        // We might not have a previous DOM if the document was empty before this edit.
+        if (!cachedValue || !cachedValue.dom || _cachedValues[editor.document.file.fullPath].invalid) {
+            // We were in an invalid state, so do a full rebuild.
+            changeList = null;
+        }
+        
+        var result = _updateDOM(cachedValue && cachedValue.dom, editor, changeList);
+        
+        if (!result.errors) {
+            _cachedValues[editor.document.file.fullPath] = {
+                timestamp: editor.document.diskTimestamp,
+                dom: result.dom,
+                dirty: false
+            };
+            // Since this was an incremental update, we can't rely on the node start/end offsets
+            // in the dom (because nodes after the updated portion didn't have their offsets
+            // updated); the marks in the editor are more accurate.
+            // TODO: should we consider ripping through the dom and fixing up other offsets?
+            result.dom.fullBuild = false;
+            return { edits: result.edits };
+        } else {
+            if (cachedValue) {
+                cachedValue.invalid = true;
+            }
+            return { errors: result.errors };
+        }
+    }
+    
+    /**
+     * @private
+     * Add SimpleDOMBuilder metadata to browser DOM tree JSON representation
+     * @param {Object} root
+     */
+    function _processBrowserSimpleDOM(browserRoot, editorRootTagID) {
+        var nodeMap         = {},
+            root;
+        
+        function _processElement(elem) {
+            elem.tagID = elem.attributes["data-brackets-id"];
+            
+            // remove data-brackets-id attribute for diff
+            delete elem.attributes["data-brackets-id"];
+            
+            elem.children.forEach(function (child) {
+                // set parent
+                child.parent = elem;
+                
+                if (child.isElement()) {
+                    _processElement(child);
+                } else if (child.isText()) {
+                    child.update();
+                    child.tagID = HTMLSimpleDOM.getTextNodeID(child);
+                    
+                    nodeMap[child.tagID] = child;
+                }
+            });
+            
+            elem.update();
+            
+            nodeMap[elem.tagID] = elem;
+
+            // Choose the root element based on the root tag in the editor.
+            // The browser may insert html, head and body elements if missing.
+            if (elem.tagID === editorRootTagID) {
+                root = elem;
+            }
+        }
+        
+        _processElement(browserRoot);
+
+        root = root || browserRoot;
+        root.nodeMap = nodeMap;
+
+        return root;
+    }
+    
+    /**
+     * @private
+     * Diff the browser DOM with the in-editor DOM
+     * @param {Editor} editor
+     * @param {Object} browserSimpleDOM
+     */
+    function _getBrowserDiff(editor, browserSimpleDOM) {
+        var cachedValue = _cachedValues[editor.document.file.fullPath],
+            editorRoot  = cachedValue.dom,
+            browserRoot;
+        
+        browserRoot = _processBrowserSimpleDOM(browserSimpleDOM, editorRoot.tagID);
+        
+        return {
+            diff    : HTMLDOMDiff.domdiff(editorRoot, browserRoot),
+            browser : browserRoot,
+            editor  : editorRoot
+        };
+    }
+    
+    $(DocumentManager).on("beforeDocumentDelete", _removeDocFromCache);
+    
+    /**
+     * Parses the document, returning an HTMLSimpleDOM structure and caching it as the
+     * initial state of the document. Will return a cached copy of the DOM if the
+     * document hasn't changed since the last time scanDocument was called.
+     *
+     * This is called by generateInstrumentedHTML(), but it can be useful to call it
+     * ahead of time so the DOM is cached and doesn't need to be rescanned when the
+     * instrumented HTML is requested by the browser.
+     *
+     * @param {Document} doc The doc to scan. 
+     * @return {Object} Root DOM node of the document.
+     */
+    function scanDocument(doc) {
+        if (!_cachedValues.hasOwnProperty(doc.file.fullPath)) {
+            // TODO: this doesn't seem to be correct any more. The DOM should never be "dirty" (i.e., out of sync
+            // with the editor) unless the doc is invalid.
+//            $(doc).on("change.htmlInstrumentation", function () {
+//                if (_cachedValues[doc.file.fullPath]) {
+//                    _cachedValues[doc.file.fullPath].dirty = true;
+//                }
+//            });
+            
+            // Assign to cache, but don't set a value yet
+            _cachedValues[doc.file.fullPath] = null;
+        }
+        
+        var cachedValue = _cachedValues[doc.file.fullPath];
+        // TODO: No longer look at doc or cached value "dirty" settings, because even if the doc is dirty, the dom
+        // should generally be up to date unless the HTML is invalid. (However, the node offsets will be dirty of
+        // the dom was incrementally updated - we should note that somewhere.)
+        if (cachedValue && !cachedValue.invalid && cachedValue.timestamp === doc.diskTimestamp) {
+            return cachedValue.dom;
+        }
+        
+        var text = doc.getText(),
+            dom = HTMLSimpleDOM.build(text);
+        
+        if (dom) {
+            // Cache results
+            _cachedValues[doc.file.fullPath] = {
+                timestamp: doc.diskTimestamp,
+                dom: dom,
+                dirty: false
+            };
+            // Note that this was a full build, so we know that we can trust the node start/end offsets.
+            dom.fullBuild = true;
+        }
+        
+        return dom;
+    }
+    
+    /**
+     * Generate instrumented HTML for the specified editor's document, and mark the associated tag 
+     * ranges in the editor. Each tag has a "data-brackets-id" attribute with a unique ID for its 
+     * value. For example, "<div>" becomes something like "<div data-brackets-id='45'>". The attribute 
+     * value is just a number that is guaranteed to be unique. 
+     *
+     * Also stores marks in the given editor that correspond to the tag ranges. These marks are used
+     * to track the DOM structure for in-browser highlighting and live HTML updating.
+     *
+     * This only needs to be done once on load of a document. As the document is edited in memory,
+     * the instrumentation is kept up to date via the diffs and edits that are generated on change
+     * events. Call this again only if you want to do a full re-sync of the editor's DOM state.
+     *
+     * @param {Editor} editor The editor whose document we're instrumenting, and which we should
+     *     mark ranges in.
+     * @return {string} instrumented html content
+     */
+    function generateInstrumentedHTML(editor, remoteScript) {
+        var doc = editor.document,
+            dom = scanDocument(doc),
+            orig = doc.getText(),
+            gen = "",
+            lastIndex = 0,
+            markCache;
+        
+        if (!dom) {
+            return null;
+        }
+        
+        // Ensure that the marks in the editor are up to date with respect to the given DOM.
+        // (But only do this if the dom we got back from scanDocument() was a full rebuild. Otherwise,
+        // rely on the marks in the editor.)
+        if (dom.fullBuild) {
+            _markTextFromDOM(editor, dom);
+        } else {
+            markCache = {};
+            editor._codeMirror.getAllMarks().forEach(function (mark) {
+                if (mark.tagID) {
+                    markCache[mark.tagID] = { mark: mark, range: mark.find() };
+                }
+            });
+        }
+        
+        // Walk through the dom nodes and insert the 'data-brackets-id' attribute at the
+        // end of the open tag        
+        function walk(node) {
+            if (node.tag) {
+                var attrText = " data-brackets-id='" + node.tagID + "'";
+                
+                // If the dom was fully rebuilt, use its offsets. Otherwise, use the marks in the
+                // associated editor, since they'll be more up to date.
+                var startOffset;
+                if (dom.fullBuild) {
+                    startOffset = node.start;
+                } else {
+                    var mark = markCache[node.tagID];
+                    if (mark) {
+                        startOffset = editor._codeMirror.indexFromPos(mark.range.from);
+                    } else {
+                        console.warn("generateInstrumentedHTML(): couldn't find existing mark for tagID " + node.tagID);
+                        startOffset = node.start;
+                    }
+                }
+                
+                // Insert the attribute as the first attribute in the tag.
+                var insertIndex = startOffset + node.tag.length + 1;
+                gen += orig.substr(lastIndex, insertIndex - lastIndex) + attrText;
+                lastIndex = insertIndex;
+                
+                // If we have a script to inject and this is the head tag, inject it immediately
+                // after the open tag.
+                // TODO: handle cases where explicit html/head are missing
+                if (remoteScript && node.tag === "head") {
+                    insertIndex = node.openEnd;
+                    gen += orig.substr(lastIndex, insertIndex - lastIndex) + remoteScript;
+                    lastIndex = insertIndex;
+                }
+            }
+            
+            if (node.isElement()) {
+                node.children.forEach(walk);
+            }
+        }
+        
+        walk(dom);
+        gen += orig.substr(lastIndex);
+        
+        return gen;
+    }
+    
+    /**
+     * Mark the text for the specified editor. Either scanDocument() or 
+     * generateInstrumentedHTML() must be called before this function
+     * is called.
+     *
+     * NOTE: This function is "private" for now (has a leading underscore), since
+     * the API is likely to change in the future.
+     *
+     * @param {Editor} editor The editor whose text should be marked.
+     * @return none
+     */
+    function _markText(editor) {
+        var cache = _cachedValues[editor.document.file.fullPath],
+            dom = cache && cache.dom;
+        
+        if (!dom) {
+            console.error("Couldn't find the dom for " + editor.document.file.fullPath);
+            return;
+        } else if (!dom.fullBuild) {
+            console.error("Tried to mark text from a stale DOM for " + editor.document.file.fullPath);
+            return;
+        }
+        
+        _markTextFromDOM(editor, dom);
+    }
+    
+    /**
+     * @private
+     * Clear the DOM cache. For unit testing only.
+     */
+    function _resetCache() {
+        _cachedValues = {};
+    }
+
+    // private methods
+    exports._markText                   = _markText;
+    exports._getMarkerAtDocumentPos     = _getMarkerAtDocumentPos;
+    exports._getTagIDAtDocumentPos      = _getTagIDAtDocumentPos;
+    exports._markTextFromDOM            = _markTextFromDOM;
+    exports._updateDOM                  = _updateDOM;
+    exports._allowIncremental           = allowIncremental;
+    exports._getBrowserDiff             = _getBrowserDiff;
+    exports._resetCache                 = _resetCache;
+    
+    // public API
+    exports.scanDocument                = scanDocument;
+    exports.generateInstrumentedHTML    = generateInstrumentedHTML;
+    exports.getUnappliedEditList        = getUnappliedEditList;
+});
diff --git a/src/LiveDevelopment/MultiBrowserImpl/language/HTMLSimpleDOM.js b/src/LiveDevelopment/MultiBrowserImpl/language/HTMLSimpleDOM.js
new file mode 100644
index 00000000000..bf607d6ae13
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/language/HTMLSimpleDOM.js
@@ -0,0 +1,558 @@
+/*
+ * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define, $, brackets */
+/*unittests: HTML Instrumentation*/
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    var DocumentManager = require("document/DocumentManager"),
+        Tokenizer       = require("language/HTMLTokenizer").Tokenizer,
+        MurmurHash3     = require("thirdparty/murmurhash3_gc"),
+        PerfUtils       = require("utils/PerfUtils");
+    
+    var seed = Math.floor(Math.random() * 65535);
+    
+    var tagID = 1;
+    
+    /**
+     * A list of tags whose start causes any of a given set of immediate parent
+     * tags to close. This mostly comes from the HTML5 spec section on omitted close tags:
+     * http://www.w3.org/html/wg/drafts/html/master/syntax.html#optional-tags
+     * This doesn't handle general content model violations.
+     */
+    var openImpliesClose = {
+        li      : { li: true },
+        dt      : { dd: true, dt: true },
+        dd      : { dd: true, dt: true },
+        address : { p: true },
+        article : { p: true },
+        aside   : { p: true },
+        blockquote : { p: true },
+        dir     : { p: true },
+        div     : { p: true },
+        dl      : { p: true },
+        fieldset: { p: true },
+        footer  : { p: true },
+        form    : { p: true },
+        h1      : { p: true },
+        h2      : { p: true },
+        h3      : { p: true },
+        h4      : { p: true },
+        h5      : { p: true },
+        h6      : { p: true },
+        header  : { p: true },
+        hgroup  : { p: true },
+        hr      : { p: true },
+        main    : { p: true },
+        menu    : { p: true },
+        nav     : { p: true },
+        ol      : { p: true },
+        p       : { p: true },
+        pre     : { p: true },
+        section : { p: true },
+        table   : { p: true },
+        ul      : { p: true },
+        rt      : { rp: true, rt: true },
+        rp      : { rp: true, rt: true },
+        optgroup: { optgroup: true, option: true },
+        option  : { option: true },
+        tbody   : { thead: true, tbody: true, tfoot: true },
+        tfoot   : { tbody: true },
+        tr      : { tr: true, th: true, td: true },
+        th      : { th: true, td: true },
+        td      : { thead: true, th: true, td: true },
+        body    : { head: true, link: true, script: true }
+    };
+
+    /**
+     * A list of tags that are self-closing (do not contain other elements).
+     * Mostly taken from http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements
+     */
+    var voidElements = {
+        area: true,
+        base: true,
+        basefont: true,
+        br: true,
+        col: true,
+        command: true,
+        embed: true,
+        frame: true,
+        hr: true,
+        img: true,
+        input: true,
+        isindex: true,
+        keygen: true,
+        link: true,
+        menuitem: true,
+        meta: true,
+        param: true,
+        source: true,
+        track: true,
+        wbr: true
+    };
+    
+    /**
+     * @constructor
+     *
+     * A SimpleNode represents one node in a SimpleDOM tree. Each node can have
+     * any set of properties on it, though there are a couple of assumptions made.
+     * Elements will have `children` and `attributes` properties. Text nodes will have a `content`
+     * property. All Elements will have a `tagID` and text nodes *can* have one.
+     *
+     * @param {Object} properties the properties provided will be set on the new object.
+     */
+    function SimpleNode(properties) {
+        $.extend(this, properties);
+    }
+    
+    SimpleNode.prototype = {
+        
+        /**
+         * Updates signatures used to optimize the number of comparisons done during
+         * diffing. This is important to call if you change:
+         *
+         * * children
+         * * child node attributes
+         * * text content of a text node
+         * * child node text
+         */
+        update: function () {
+            if (this.isElement()) {
+                var i,
+                    subtreeHashes = "",
+                    childHashes = "",
+                    child;
+                for (i = 0; i < this.children.length; i++) {
+                    child = this.children[i];
+                    if (child.isElement()) {
+                        childHashes += String(child.tagID);
+                        subtreeHashes += String(child.tagID) + child.attributeSignature + child.subtreeSignature;
+                    } else {
+                        childHashes += child.textSignature;
+                        subtreeHashes += child.textSignature;
+                    }
+                }
+                this.childSignature = MurmurHash3.hashString(childHashes, childHashes.length, seed);
+                this.subtreeSignature = MurmurHash3.hashString(subtreeHashes, subtreeHashes.length, seed);
+            } else {
+                this.textSignature = MurmurHash3.hashString(this.content, this.content.length, seed);
+            }
+        },
+        
+        /**
+         * Updates the signature of this node's attributes. Call this after making attribute changes.
+         */
+        updateAttributeSignature: function () {
+            var attributeString = JSON.stringify(this.attributes);
+            this.attributeSignature = MurmurHash3.hashString(attributeString, attributeString.length, seed);
+        },
+        
+        /**
+         * Is this node an element node?
+         *
+         * @return {bool} true if it is an element
+         */
+        isElement: function () {
+            return !!this.children;
+        },
+        
+        /**
+         * Is this node a text node?
+         *
+         * @return {bool} true if it is text
+         */
+        isText: function () {
+            return !this.children;
+        }
+    };
+    
+    /**
+     * @private
+     *
+     * Generates a synthetic ID for text nodes. These IDs are only used
+     * for convenience when reading a SimpleDOM that is dumped to the console.
+     *
+     * @param {Object} textNode new node for which we are generating an ID
+     * @return {string} ID for the node
+     */
+    function getTextNodeID(textNode) {
+        var childIndex = textNode.parent.children.indexOf(textNode);
+        if (childIndex === 0) {
+            return textNode.parent.tagID + ".0";
+        }
+        return textNode.parent.children[childIndex - 1].tagID + "t";
+    }
+    
+    /**
+     * @private
+     *
+     * Adds two {line, ch}-style positions, returning a new pos.
+     */
+    function _addPos(pos1, pos2) {
+        return {line: pos1.line + pos2.line, ch: (pos2.line === 0 ? pos1.ch + pos2.ch : pos2.ch)};
+    }
+    
+    /**
+     * @private
+     *
+     * Offsets the character offset of the given {line, ch} pos by the given amount and returns a new
+     * pos. Not for general purpose use as it does not account for line boundaries.
+     */
+    function _offsetPos(pos, offset) {
+        return {line: pos.line, ch: pos.ch + offset};
+    }
+    
+    /**
+     * @constructor
+     *
+     * A Builder creates a SimpleDOM tree of SimpleNode objects representing the
+     * "important" contents of an HTML document. It does not include things like comments.
+     * The nodes include information about their position in the text provided.
+     * 
+     * @param {string} text The text to parse
+     * @param {?int} startOffset starting offset in the text
+     * @param {?{line: int, ch: int}} startOffsetPos line/ch position in the text
+     */
+    function Builder(text, startOffset, startOffsetPos) {
+        this.stack = [];
+        this.text = text;
+        this.t = new Tokenizer(text);
+        this.currentTag = null;
+        this.startOffset = startOffset || 0;
+        this.startOffsetPos = startOffsetPos || {line: 0, ch: 0};
+    }
+
+    Builder.prototype._logError = function (token) {
+        var error       = { token: token },
+            startPos    = token ? (token.startPos || token.endPos) : this.startOffsetPos,
+            endPos      = token ? token.endPos : this.startOffsetPos;
+        
+        error.startPos = _addPos(this.startOffsetPos, startPos);
+        error.endPos = _addPos(this.startOffsetPos, endPos);
+
+        if (!this.errors) {
+            this.errors = [];
+        }
+
+        this.errors.push(error);
+    };
+    
+    /**
+     * Builds the SimpleDOM.
+     *
+     * @param {?bool} strict if errors are detected, halt and return null
+     * @param {?Object} markCache a cache that can be used in ID generation (is passed to `getID`)
+     * @return {SimpleNode} root of tree or null if parsing failed
+     */
+    Builder.prototype.build = function (strict, markCache) {
+        var self = this;
+        var token, lastClosedTag, lastTextNode, lastIndex = 0;
+        var stack = this.stack;
+        var attributeName = null;
+        var nodeMap = {};
+                
+        markCache = markCache || {};
+        
+        // Start timers for building full and partial DOMs.
+        // Appropriate timer is used, and the other is discarded.
+        var timerBuildFull = "HTMLInstr. Build DOM Full";
+        var timerBuildPart = "HTMLInstr. Build DOM Partial";
+        PerfUtils.markStart([timerBuildFull, timerBuildPart]);
+        
+        function closeTag(endIndex, endPos) {
+            lastClosedTag = stack[stack.length - 1];
+            stack.pop();
+            lastClosedTag.update();
+            
+            lastClosedTag.end = self.startOffset + endIndex;
+            lastClosedTag.endPos = _addPos(self.startOffsetPos, endPos);
+        }
+        
+        while ((token = this.t.nextToken()) !== null) {
+            // lastTextNode is used to glue text nodes together
+            // If the last node we saw was text but this one is not, then we're done gluing.
+            // If this node is a comment, we might still encounter more text.
+            if (token.type !== "text" && token.type !== "comment" && lastTextNode) {
+                lastTextNode = null;
+            }
+            
+            if (token.type === "error") {
+                PerfUtils.finalizeMeasurement(timerBuildFull);  // discard
+                PerfUtils.addMeasurement(timerBuildPart);       // use
+                this._logError(token);
+                return null;
+            } else if (token.type === "opentagname") {
+                var newTagName = token.contents.toLowerCase(),
+                    newTag;
+                
+                if (openImpliesClose.hasOwnProperty(newTagName)) {
+                    var closable = openImpliesClose[newTagName];
+                    while (stack.length > 0 && closable.hasOwnProperty(stack[stack.length - 1].tag)) {
+                        // Close the previous tag at the start of this tag.
+                        // Adjust backwards for the < before the tag name.
+                        closeTag(token.start - 1, _offsetPos(token.startPos, -1));
+                    }
+                }
+                
+                newTag = new SimpleNode({
+                    tag: token.contents.toLowerCase(),
+                    children: [],
+                    attributes: {},
+                    parent: (stack.length ? stack[stack.length - 1] : null),
+                    start: this.startOffset + token.start - 1,
+                    startPos: _addPos(this.startOffsetPos, _offsetPos(token.startPos, -1)) // ok because we know the previous char was a "<"
+                });
+                newTag.tagID = this.getID(newTag, markCache);
+                
+                // During undo in particular, it's possible that tag IDs may be reused and
+                // the marks in the document may be misleading. If a tag ID has been reused,
+                // we apply a new tag ID to ensure that our edits come out correctly.
+                if (nodeMap[newTag.tagID]) {
+                    newTag.tagID = this.getNewID();
+                }
+                
+                nodeMap[newTag.tagID] = newTag;
+                if (newTag.parent) {
+                    newTag.parent.children.push(newTag);
+                }
+                this.currentTag = newTag;
+                
+                if (voidElements.hasOwnProperty(newTag.tag)) {
+                    // This is a self-closing element.
+                    newTag.update();
+                } else {
+                    stack.push(newTag);
+                }
+            } else if (token.type === "opentagend" || token.type === "selfclosingtag") {
+                // TODO: disallow <p/>?
+                if (this.currentTag) {
+                    if (token.type === "selfclosingtag" && stack.length && stack[stack.length - 1] === this.currentTag) {
+                        // This must have been a self-closing tag that we didn't identify as a void element
+                        // (e.g. an SVG tag). Pop it off the stack as if we had encountered its close tag.
+                        closeTag(token.end, token.endPos);
+                    } else {
+                        // We're ending an open tag. Record the end of the open tag as the end of the
+                        // range. (If we later find a close tag for this tag, the end will get overwritten
+                        // with the end of the close tag. In the case of a self-closing tag, we should never
+                        // encounter that.)
+                        // Note that we don't need to update the signature here because the signature only
+                        // relies on the tag name and ID, and isn't affected by the tag's attributes, so
+                        // the signature we calculated when creating the tag is still the same. If we later
+                        // find a close tag for this tag, we'll update the signature to account for its
+                        // children at that point (in the next "else" case).
+                        this.currentTag.openEnd = this.currentTag.end = this.startOffset + token.end;
+                        this.currentTag.endPos = _addPos(this.startOffsetPos, token.endPos);
+                        lastClosedTag = this.currentTag;
+                        this.currentTag.updateAttributeSignature();
+                        this.currentTag = null;
+                    }
+                }
+            } else if (token.type === "closetag") {
+                // If this is a self-closing element, ignore the close tag.
+                var closeTagName = token.contents.toLowerCase();
+                if (!voidElements.hasOwnProperty(closeTagName)) {
+                    // Find the topmost item on the stack that matches. If we can't find one, assume
+                    // this is just a dangling closing tag and ignore it.
+                    var i;
+                    for (i = stack.length - 1; i >= 0; i--) {
+                        if (stack[i].tag === closeTagName) {
+                            break;
+                        }
+                    }
+                    if (strict && i !== stack.length - 1) {
+                        // If we're in strict mode, treat unbalanced tags as invalid.
+                        PerfUtils.finalizeMeasurement(timerBuildFull);
+                        PerfUtils.addMeasurement(timerBuildPart);
+                        this._logError(token);
+                        return null;
+                    }
+                    if (i >= 0) {
+                        do {
+                            // For all tags we're implicitly closing (before we hit the matching tag), we want the
+                            // implied end to be the beginning of the close tag (which is two characters, "</", before
+                            // the start of the tagname). For the actual tag we're explicitly closing, we want the
+                            // implied end to be the end of the close tag (which is one character, ">", after the end of
+                            // the tagname).
+                            if (stack.length === i + 1) {
+                                closeTag(token.end + 1, _offsetPos(token.endPos, 1));
+                            } else {
+                                closeTag(token.start - 2, _offsetPos(token.startPos, -2));
+                            }
+                        } while (stack.length > i);
+                    } else {
+                        // If we're in strict mode, treat unmatched close tags as invalid. Otherwise
+                        // we just silently ignore them.
+                        if (strict) {
+                            PerfUtils.finalizeMeasurement(timerBuildFull);
+                            PerfUtils.addMeasurement(timerBuildPart);
+                            this._logError(token);
+                            return null;
+                        }
+                    }
+                }
+            } else if (token.type === "attribname") {
+                attributeName = token.contents.toLowerCase();
+                // Set the value to the empty string in case this is an empty attribute. If it's not,
+                // it will get overwritten by the attribvalue later.
+                this.currentTag.attributes[attributeName] = "";
+            } else if (token.type === "attribvalue" && attributeName !== null) {
+                this.currentTag.attributes[attributeName] = token.contents;
+                attributeName = null;
+            } else if (token.type === "text") {
+                if (stack.length) {
+                    var parent = stack[stack.length - 1];
+                    var newNode;
+                    
+                    // Check to see if we're continuing a previous text.
+                    if (lastTextNode) {
+                        newNode = lastTextNode;
+                        newNode.content += token.contents;
+                    } else {
+                        newNode = new SimpleNode({
+                            parent: stack[stack.length - 1],
+                            content: token.contents
+                        });
+                        parent.children.push(newNode);
+                        newNode.tagID = getTextNodeID(newNode);
+                        nodeMap[newNode.tagID] = newNode;
+                        lastTextNode = newNode;
+                    }
+                    
+                    newNode.update();
+                }
+            }
+            lastIndex = token.end;
+        }
+        
+        // If we have any tags hanging open (e.g. html or body), fail the parse if we're in strict mode,
+        // otherwise close them at the end of the document.
+        if (stack.length) {
+            if (strict) {
+                PerfUtils.finalizeMeasurement(timerBuildFull);
+                PerfUtils.addMeasurement(timerBuildPart);
+                this._logError(token);
+                return null;
+            } else {
+                // Manually compute the position of the end of the text (we can't rely on the
+                // tokenizer for this since it may not get to the very end)
+                // TODO: should probably make the tokenizer get to the end...
+                var lines = this.text.split("\n"),
+                    lastPos = {line: lines.length - 1, ch: lines[lines.length - 1].length};
+                while (stack.length) {
+                    closeTag(this.text.length, lastPos);
+                }
+            }
+        }
+        
+        var dom = lastClosedTag;
+        if (!dom) {
+            // This can happen if the document has no nontrivial content, or if the user tries to
+            // have something at the root other than the HTML tag. In all such cases, we treat the
+            // document as invalid.
+            this._logError(token);
+            return null;
+        }
+        
+        dom.nodeMap = nodeMap;
+        PerfUtils.addMeasurement(timerBuildFull);       // use
+        PerfUtils.finalizeMeasurement(timerBuildPart);  // discard
+        
+        return dom;
+    };
+    
+    /**
+     * Returns a new tag ID.
+     *
+     * @return {int} unique tag ID
+     */
+    Builder.prototype.getNewID = function () {
+        return tagID++;
+    };
+    
+    /**
+     * Returns the best tag ID for the new tag object given. 
+     * The default implementation just calls `getNewID`
+     * and returns a unique ID.
+     *
+     * @param {Object} newTag tag object to potentially inspect to choose an ID
+     * @return {int} unique tag ID
+     */
+    Builder.prototype.getID = Builder.prototype.getNewID;
+    
+    /**
+     * Builds a SimpleDOM from the text provided. If `strict` mode is true, parsing
+     * will halt as soon as any error is seen and null will be returned.
+     *
+     * @param {string} text Text of document to parse
+     * @param {bool} strict True for strict parsing
+     * @return {SimpleNode} root of tree or null if strict failed
+     */
+    function build(text, strict) {
+        var builder = new Builder(text);
+        return builder.build(strict);
+    }
+    
+    /**
+     * @private
+     *
+     * Generates a string version of a SimpleDOM for debugging purposes.
+     *
+     * @param {SimpleNode} root root of the tree
+     * @return {string} Text version of the tree.
+     */
+    function _dumpDOM(root) {
+        var result = "",
+            indent = "";
+        
+        function walk(node) {
+            if (node.tag) {
+                result += indent + "TAG " + node.tagID + " " + node.tag + " " + JSON.stringify(node.attributes) + "\n";
+            } else {
+                result += indent + "TEXT " + (node.tagID || "- ") + node.content + "\n";
+            }
+            if (node.isElement()) {
+                indent += "  ";
+                node.children.forEach(walk);
+                indent = indent.slice(2);
+            }
+        }
+        walk(root);
+        
+        return result;
+    }
+    
+    // Public API
+    exports.build                       = build;
+    exports.Builder                     = Builder;
+    exports.SimpleNode                  = SimpleNode;
+    
+    // Private API
+    exports._dumpDOM                    = _dumpDOM;
+    exports._offsetPos                  = _offsetPos;
+    exports._getTextNodeID              = getTextNodeID;
+    exports._seed                       = seed;
+});
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/main.js b/src/LiveDevelopment/MultiBrowserImpl/main.js
new file mode 100644
index 00000000000..91299f28827
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/main.js
@@ -0,0 +1,214 @@
+/*
+ * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"),
+ * to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the
+ * Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+ * DEALINGS IN THE SOFTWARE.
+ *
+ */
+
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global brackets, define, $, less, window */
+
+/**
+ * main integrates LiveDevelopment into Brackets
+ *
+ * This module creates two menu items:
+ *
+ *  "Go Live": open or close a Live Development session and visualize the status
+ *  "Highlight": toggle source highlighting
+ *
+ * @require DocumentManager
+ */
+define(function main(require, exports, module) {
+    "use strict";
+
+    var DocumentManager     = require("document/DocumentManager"),
+        Commands            = require("command/Commands"),
+        AppInit             = require("utils/AppInit"),
+        CommandManager      = require("command/CommandManager"),
+        PreferencesManager  = require("preferences/PreferencesManager"),
+        Dialogs             = require("widgets/Dialogs"),
+        DefaultDialogs      = require("widgets/DefaultDialogs"),
+        UrlParams           = require("utils/UrlParams").UrlParams,
+        Strings             = require("strings"),
+        ExtensionUtils      = require("utils/ExtensionUtils"),
+        StringUtils         = require("utils/StringUtils"),
+        Menus               = require("command/Menus"),
+        LiveDevelopment     = require("LiveDevelopment/MultiBrowserImpl/LiveDevelopment");
+
+    var params = new UrlParams();
+
+    // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
+    var _statusTooltip = [
+        Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
+        Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
+        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
+        Strings.LIVE_DEV_STATUS_TIP_CONNECTED,
+        Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
+        Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR,
+        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
+        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1
+    ];
+
+    var _statusStyle = ["warning", "", "info", "success", "out-of-sync", "sync-error", "info", "info"];  // Status indicator's CSS class
+    var _allStatusStyles = _statusStyle.join(" ");
+
+    var _$btnGoLive; // reference to the GoLive button
+    var _$btnHighlight; // reference to the HighlightButton
+
+    /**
+     * Change the appearance of a button. Omit text to remove any extra text; omit style to return to default styling;
+     * omit tooltip to leave tooltip unchanged.
+     */
+    function _setLabel($btn, text, style, tooltip) {
+        // Clear text/styles from previous status
+        $("span", $btn).remove();
+        $btn.removeClass(_allStatusStyles);
+
+        // Set text/styles for new status
+        if (text && text.length > 0) {
+            $("<span class=\"label\">")
+                .addClass(style)
+                .text(text)
+                .appendTo($btn);
+        } else {
+            $btn.addClass(style);
+        }
+
+        if (tooltip) {
+            $btn.attr("title", tooltip);
+        }
+    }
+
+    /**
+     * Toggles LiveDevelopment and synchronizes the state of UI elements that reports LiveDevelopment status
+     *
+     * Stop Live Dev when in an active state (ACTIVE, OUT_OF_SYNC, SYNC_ERROR).
+     * Start Live Dev when in an inactive state (ERROR, INACTIVE).
+     * Do nothing when in a connecting state (CONNECTING, LOADING_AGENTS).
+     */
+    function _handleGoLiveCommand() {
+        if (LiveDevelopment.status >= LiveDevelopment.STATUS_ACTIVE) {
+            LiveDevelopment.close();
+        } else if (LiveDevelopment.status <= LiveDevelopment.STATUS_INACTIVE) {
+            if (!params.get("skipLiveDevelopmentInfo") && !PreferencesManager.getViewState("livedev2.afterFirstLaunch")) {
+                PreferencesManager.setViewState("livedev2.afterFirstLaunch", "true");
+                Dialogs.showModalDialog(
+                    DefaultDialogs.DIALOG_ID_INFO,
+                    Strings.LIVE_DEVELOPMENT_INFO_TITLE,
+                    Strings.LIVE_DEVELOPMENT_INFO_MESSAGE
+                ).done(function (id) {
+                    LiveDevelopment.open();
+                });
+            } else {
+                LiveDevelopment.open();
+            }
+        }
+    }
+
+    /** Called on status change */
+    function _showStatusChangeReason(reason) {
+        // Destroy the previous twipsy (options are not updated otherwise)
+        _$btnGoLive.twipsy("hide").removeData("twipsy");
+        
+        // If there was no reason or the action was an explicit request by the user, don't show a twipsy
+        if (!reason || reason === "explicit_close") {
+            return;
+        }
+
+        // Translate the reason
+        var translatedReason = Strings["LIVE_DEV_" + reason.toUpperCase()];
+        if (!translatedReason) {
+            translatedReason = StringUtils.format(Strings.LIVE_DEV_CLOSED_UNKNOWN_REASON, reason);
+        }
+        
+        // Configure the twipsy
+        var options = {
+            placement: "left",
+            trigger: "manual",
+            autoHideDelay: 5000,
+            title: function () {
+                return translatedReason;
+            }
+        };
+
+        // Show the twipsy with the explanation
+        _$btnGoLive.twipsy(options).twipsy("show");
+    }
+    
+    /** Create the menu item "Go Live" */
+    function _setupGoLiveButton() {
+        _$btnGoLive = _$btnGoLive = $("#toolbar-go-live");
+        _$btnGoLive.click(function onGoLive() {
+            _handleGoLiveCommand();
+        });
+        $(LiveDevelopment).on("statusChange", function statusChange(event, status, reason) {
+            // status starts at -1 (error), so add one when looking up name and style
+            // See the comments at the top of LiveDevelopment.js for details on the
+            // various status codes.
+            _setLabel(_$btnGoLive, null, _statusStyle[status + 1], _statusTooltip[status + 1]);
+            _showStatusChangeReason(reason);
+        });
+
+        // Initialize tooltip for 'not connected' state
+        _setLabel(_$btnGoLive, null, _statusStyle[1], _statusTooltip[1]);
+    }
+    
+    /** Maintains state of the Live Preview menu item */
+    function _setupGoLiveMenu() {
+        $(LiveDevelopment).on("statusChange", function statusChange(event, status) {
+            // Update the checkmark next to 'Live Preview' menu item
+            // Add checkmark when status is STATUS_ACTIVE; otherwise remove it
+            CommandManager.get("file.previewHighlight").setEnabled(status === LiveDevelopment.STATUS_INACTIVE);
+        });
+    }
+
+    function _updateHighlightCheckmark() {
+        CommandManager.get("file.previewHighlight").setChecked(PreferencesManager.getViewState("file.previewHighlight"));
+    }
+    
+    function _handlePreviewHighlightCommand() {
+        PreferencesManager.setViewState("file.previewHighlight", !PreferencesManager.getViewState("file.previewHighlight"));
+    }
+    
+    /** Initialize LiveDevelopment */
+    function init() {
+        params.parse();
+
+        LiveDevelopment.init();
+        _setupGoLiveButton();
+        _setupGoLiveMenu();
+
+        _updateHighlightCheckmark();
+    }
+    
+    // init prefs
+    PreferencesManager.stateManager.definePreference("file.previewHighlight", "boolean", true)
+        .on("change", function () {
+            _updateHighlightCheckmark();
+        });
+    
+    // init commands
+    CommandManager.register(Strings.CMD_LIVE_FILE_PREVIEW,  Commands.FILE_LIVE_FILE_PREVIEW, _handleGoLiveCommand);
+    CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, _handlePreviewHighlightCommand);
+    CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setEnabled(false);
+    
+    // Export public functions
+    exports.init = init;
+});
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
new file mode 100644
index 00000000000..b3491ea041e
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -0,0 +1,319 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets, window, open, _ */
+
+/**
+ * Provides the protocol that Brackets uses to talk to a browser instance for live development.
+ * Protocol methods are converted to a JSON message format, which is then sent over a provided
+ * low-level transport and interpreted in the browser. For messages that expect a response, the
+ * response is returned through a promise as an object. Scripts that implement remote logic are
+ * provided during the instrumentation stage by "getRemoteFunctions()".
+ *
+ * Events raised by the remote browser are dispatched as jQuery events which type is equal to the 'method' 
+ * property. The received message object is dispatched as the first parameter and enriched with a 
+ * 'clientId' property being the client ID of the remote browser.
+ *
+ * It keeps active connections which are  updated when receiving "connect" and "close" from the 
+ * underlying transport. Events "Connection.connect"/"Connection.close" are triggered as 
+ * propagation of transport's "connect"/"close". Also proxies "launch" command to transport.
+ * 
+ */
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    // Text of the script we'll inject into the browser that handles protocol requests.
+    var LiveDevProtocolRemote = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js"),
+        DocumentObserver = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js"),
+        AddedRemoteFunctions = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js"),
+        RemoteFunctions = require("text!LiveDevelopment/Agents/RemoteFunctions.js");
+    
+    /**
+     * @private
+     * Active connections.
+     * @type {Object}
+     */
+    var _connections = {};
+    
+    /**
+     * @private
+     * The low-level transport we're communicating over, set by `setTransport()`.
+     * @type {{launch: function(string), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}}
+     */
+    var _transport = null;
+    
+    /**
+     * @private
+     * A unique message serial number, used to match up responses with request messages.
+     * @type {number}
+     */
+    var _nextMsgId = 1;
+    
+    /**
+     * @private
+     * A map of response IDs to deferreds, for messages that are awaiting responses.
+     * @type {Object}
+     */
+    var _responseDeferreds = {};
+    
+    /**
+     * Returns an array of the client IDs that are being managed by this live document.
+     * @return {Array.<number>}
+     */
+    function getConnectionIds() {
+        return Object.keys(_connections);
+    }
+    
+    /**
+     * @private
+     * Handles a message received from the remote protocol handler via the transport.
+     * If the message has an `id` field, it's assumed to be a response to a previous
+     * request, and will be passed along to the original promise returned by `_send()`.
+     * Otherwise, it's treated as an event and dispatched.
+     * TODO: we should probably have a way of returning the results from all clients, not just the first?
+     *
+     * @param {number} clientId ID of the client that sent the message
+     * @param {string} msg The message that was sent, in JSON string format
+     */
+    function _receive(clientId, msgStr) {
+        var msg = JSON.parse(msgStr),
+            event = msg.method || "event",
+            deferred;
+        if (msg.id) {
+            deferred = _responseDeferreds[msg.id];
+            if (deferred) {
+                delete _responseDeferreds[msg.id];
+                if (msg.error) {
+                    deferred.reject(msg);
+                } else {
+                    deferred.resolve(msg);
+                }
+            }
+        } else {
+            // enrich received message with clientId
+            msg.clientId = clientId;
+            $(exports).triggerHandler(event, msg);
+        }
+    }
+    
+    /**
+     * @private
+     * Dispatches a message to the remote protocol handler via the transport.
+     *
+     * @param {Object} msg The message to send.
+     * @param {number|Array.<number>} idOrArray ID or IDs of the client(s) that should
+     *     receive the message.
+     * @return {$.Promise} A promise that's fulfilled when the response to the message is received.
+     */
+    function _send(msg, clients) {
+        var id = _nextMsgId++,
+            result = new $.Deferred();
+        
+        // broadcast if there are no specific clients
+        clients = clients || getConnectionIds();
+        msg.id = id;
+        _responseDeferreds[id] = result;
+        _transport.send(clients, JSON.stringify(msg));
+        return result.promise();
+    }
+    
+     /**
+     * @private
+     * Handles when a connection is made to the live development protocol handler.
+     * Injects the RemoteFunctions script in order to provide highlighting and live DOM editing functionality.
+     * Records the connection's client ID and triggers the "Coonnection.connect" event.
+     * @param {number} clientId
+     * @param {string} url
+     */
+    function _connect(clientId, url) {
+        // add new connections
+        // TODO: check URL
+        _connections[clientId] = true;
+
+        $(exports).triggerHandler("Connection.connect", {
+            clientId: clientId,
+            url: url
+        });
+    }
+    
+    /**
+     * @private
+     * Handles when a connection is closed.
+     * @param {number} clientId
+     */
+    function _close(clientId) {
+        delete _connections[clientId];
+        $(exports).triggerHandler("Connection.close", {
+            clientId: clientId
+        });
+    }
+    
+    
+    /**
+     * Sets the transport that should be used by the protocol. See `LiveDevelopment.setTransport()`
+     * for more detail on the transport.
+     * @param {{launch: function(string), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}} transport
+     */
+    function setTransport(transport) {
+        if (_transport) {
+            $(_transport).off(".livedev");
+        }
+        _transport = transport;
+        $(_transport)
+            .on("connect.livedev", function (event, clientId, url) {
+                _connect(clientId, url);
+            })
+            .on("message.livedev", function (event, clientId, msg) {
+                _receive(clientId, msg);
+            })
+            .on("close.livedev", function (event, clientId) {
+                _close(clientId);
+            });
+    }
+    
+    
+    /**
+     * Returns a script that should be injected into the HTML that's launched in the
+     * browser in order to implement remote commands that handle protocol requests. 
+     * Includes the <script> tags.
+     * @return {string}
+     */
+    function getRemoteFunctionsScript() {
+        var script = "";
+        // Inject DocumentObserver into the browser (tracks related documents)
+        script += DocumentObserver;
+        // Inject remote functions into the browser.
+        script += "window._LD=" + AddedRemoteFunctions + "(" + RemoteFunctions + "())";
+        return "<script>\n" + script + "</script>\n";
+    }
+    
+    /**
+     * Returns a script that should be injected into the HTML that's launched in the
+     * browser in order to handle protocol requests. Includes the <script> tags.
+     * This script will also include the script required by the transport, if any.
+     * @return {string}
+     */
+    function getRemoteScript() {
+        var transportScript = _transport.getRemoteScript() || "";
+        var remoteFunctionsScript = getRemoteFunctionsScript() || "";
+        return transportScript +
+            "<script>\n" + LiveDevProtocolRemote + "</script>\n" +
+            remoteFunctionsScript;
+            
+    }
+    
+    /**
+     * Launches the given URL in the browser. Proxies to the transport.
+     * @param {string} url
+     */
+    function launch(url) {
+        _transport.launch(url);
+    }
+    
+    /**
+     * Protocol method. Evaluates the given script in the browser (in global context), and returns a promise
+     * that will be fulfilled with the result of the script, if any.
+     * @param {number|Array.<number>} clients A client ID or array of client IDs that should evaluate
+     *      the script.
+     * @param {string} script The script to evalute.
+     * @return {$.Promise} A promise that's resolved with the return value from the first client that responds
+     *      to the evaluation.
+     */
+    function evaluate(script, clients) {
+        return _send(
+            {
+                method: "Runtime.evaluate",
+                params: {
+                    expression: script
+                }
+            },
+            clients
+        );
+    }
+    
+    /**
+     * Protocol method. Reloads the page that is currently loaded into the browser, optionally ignoring cache.
+     * @param {number|Array.<number>} clients A client ID or array of client IDs that should reload the page.
+     * @param {boolean} ignoreCache If true, browser cache is ignored.
+     * @return {$.Promise} A promise that's resolved with the return value from the first client that responds
+     *      to the method.
+     */
+    function reload(ignoreCache, clients) {
+        return _send(
+            {
+                method: "Page.reload",
+                params: {
+                    ignoreCache: true
+                }
+            },
+            clients
+        );
+    }
+    
+    /**
+     * Protocol method. Navigates current page to the given URL. 
+     * @param {number|Array.<number>} clients A client ID or array of client IDs that should navigate to the given URL.
+     * @param {string} url URL to navigate the page to.
+     * @return {$.Promise} A promise that's resolved with the return value from the first client that responds
+     *      to the method.
+     */
+    function navigate(url, clients) {
+        return _send(
+            {
+                method: "Page.navigate",
+                params: {
+                    url: url
+                }
+            },
+            clients
+        );
+    }
+    
+    /**
+     * Closes the connection to the given client. Proxies to the transport.
+     * @param {number} clientId
+     */
+    function close(clientId) {
+        _transport.close(clientId);
+    }
+    
+    function closeAllConnections() {
+        getConnectionIds().forEach(function (clientId) {
+            close(clientId);
+        });
+        _connections = {};
+    }
+    
+    // public API
+    exports.setTransport = setTransport;
+    exports.getRemoteScript = getRemoteScript;
+    exports.launch = launch;
+    exports.evaluate = evaluate;
+    exports.reload = reload;
+    exports.navigate = navigate;
+    exports.close = close;
+    exports.getConnectionIds = getConnectionIds;
+    exports.closeAllConnections = closeAllConnections;
+});
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js
new file mode 100644
index 00000000000..254c6e3d7e6
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js
@@ -0,0 +1,309 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+(function (global) {
+    "use strict";
+    
+    var ProtocolManager = global._Brackets_LiveDev_ProtocolManager;
+    
+    var _document = null;
+    var _transport;
+
+    
+    /**
+     * Common functions.
+     */
+    var Utils = {
+        
+        isExternalStylesheet: function (node) {
+            return (node.nodeName.toUpperCase() === "LINK" && node.rel === "stylesheet" && node.href);
+        },
+        isExternalScript: function (node) {
+            return (node.nodeName.toUpperCase() === "SCRIPT" && node.src);
+        }
+    };
+    
+    /**
+     * CSS related commands and notifications
+     */
+    var CSS = {
+        
+            /**
+            * Maintains a map of stylesheets loaded thorugh @import rules and their parents.
+            * Populated by extractImports, consumed by notifyImportsAdded / notifyImportsRemoved.
+            * @type {
+            */
+            stylesheets : {},
+        
+            /**
+             * Check the stylesheet that was just added be really loaded 
+             * to be able to extract potential import-ed stylesheets.
+             * It invokes notifyStylesheetAdded once the sheet is loaded.
+             * @param  {string} href Absolute URL of the stylesheet.
+             */
+            checkForStylesheetLoaded : function (href) {
+                var self = this;
+  
+
+                // Inspect CSSRules for @imports:
+                // styleSheet obejct is required to scan CSSImportRules but
+                // browsers differ on the implementation of MutationObserver interface.
+                // Webkit triggers notifications before stylesheets are loaded, 
+                // Firefox does it after loading.
+                // There are also differences on when 'load' event is triggered for 
+                // the 'link' nodes. Webkit triggers it before stylesheet is loaded.
+                // Some references to check:
+                //      http://www.phpied.com/when-is-a-stylesheet-really-loaded/
+                //      http://stackoverflow.com/questions/17747616/webkit-dynamically-created-stylesheet-when-does-it-really-load
+                //        http://stackoverflow.com/questions/11425209/are-dom-mutation-observers-slower-than-dom-mutation-events      
+                //
+                // TODO: This is just a temporary 'cross-browser' solution, it needs optimization.
+                var loadInterval = setInterval(function () {
+                    var i;
+                    for (i = 0; i < document.styleSheets.length; i++) {
+                        if (document.styleSheets[i].href === href) {
+                            //clear interval
+                            clearInterval(loadInterval);
+                            // notify stylesheets added
+                            self.notifyStylesheetAdded(href);
+                            break;
+                        }
+                    }
+                }, 50);
+            },
+            /**
+             * Send a notification for the stylesheet added and  
+             * its import-ed styleshets based on document.stylesheets diff
+             * from previous status. It also updates stylesheets status. 
+             */
+            notifyStylesheetAdded : function () {
+                var i,
+                    added = {},
+                    current,
+                    newStatus;
+                
+                current = this.stylesheets;
+                newStatus = related().stylesheets;
+                
+                Object.keys(newStatus).forEach(function (v, i) {
+                    if (!current[v]) {
+                        added[v] = newStatus[v];
+                    }
+                });
+                              
+                Object.keys(added).forEach(function (v, i) {
+                    _transport.send(JSON.stringify({
+                        method: "Stylesheet.Added",
+                        href: v,
+                        roots: added[v]
+                    }));
+                });
+                
+                this.stylesheets = newStatus;
+            },
+        
+            /**
+             * Send a notification for the removed stylesheet and  
+             * its import-ed styleshets based on document.stylesheets diff
+             * from previous status. It also updates stylesheets status.
+             */
+            notifyStylesheetRemoved : function () {
+                var i,
+                    removed = {},
+                    newStatus,
+                    current;
+                
+                current = this.stylesheets;
+                newStatus = related().stylesheets;
+                
+                Object.keys(current).forEach(function (v, i) {
+                    if (!newStatus[v]) {
+                        removed[v] = current[v];
+                    }
+                });
+                
+                Object.keys(removed).forEach(function (v, i) {
+                    _transport.send(JSON.stringify({
+                        method: "Stylesheet.Removed",
+                        href: v,
+                        roots: removed[v]
+                    }));
+                });
+                
+                this.stylesheets = newStatus;
+            }
+        };
+
+    
+    /* process related docs added */
+    function _onNodesAdded(nodes) {
+        var i;
+        for (i = 0; i < nodes.length; i++) {
+            //check for Javascript files
+            if (Utils.isExternalScript(nodes[i])) {
+                _transport.send(JSON.stringify({
+                    method: 'Script.Added',
+                    src: nodes[i].src
+                }));
+            }
+            //check for stylesheets
+            if (Utils.isExternalStylesheet(nodes[i])) {
+                CSS.checkForStylesheetLoaded(nodes[i].href);
+            }
+        }
+    }
+    /* process related docs removed */
+    function _onNodesRemoved(nodes) {
+        var i;
+        //iterate on removed nodes
+        for (i = 0; i < nodes.length; i++) {
+            
+            // check for external JS files
+            if (Utils.isExternalScript(nodes[i])) {
+                _transport.send(JSON.stringify({
+                    method: 'Script.Removed',
+                    src: nodes[i].src
+                }));
+            }
+            //check for external StyleSheets
+            if (Utils.isExternalStylesheet(nodes[i])) {
+                CSS.notifyStylesheetRemoved(nodes[i].href);
+            }
+        }
+    }
+
+    function _enableListeners() {
+        // enable MutationOberver if it's supported
+        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+        if (MutationObserver) {
+            var observer = new MutationObserver(function (mutations) {
+                mutations.forEach(function (mutation) {
+                    if (mutation.addedNodes.length > 0) {
+                        _onNodesAdded(mutation.addedNodes);
+                    }
+                    if (mutation.removedNodes.length > 0) {
+                        _onNodesRemoved(mutation.removedNodes);
+                    }
+                });
+            });
+            observer.observe(_document, {
+                childList: true,
+                subtree: true
+            });
+        } else {
+            // use MutationEvents as fallback 
+            document.addEventListener('DOMNodeInserted', function niLstnr(e) {
+                _onNodesAdded([e.target]);
+            });
+            document.addEventListener('DOMNodeRemoved', function nrLstnr(e) {
+                _onNodesRemoved([e.target]);
+            });
+        }
+    }
+    
+    /**
+     * Retrieves related documents (external CSS and JS files)
+     * 
+     * @return {{scripts: object, stylesheets: object}} Related scripts and stylesheets
+     */
+    function related() {
+
+        var rel = {
+            scripts: {},
+            stylesheets: {}
+        };
+        var i;
+        // iterate on document scripts (HTMLCollection doesn't provide forEach iterator).
+        for (i = 0; i < _document.scripts.length; i++) {
+            // add only external scripts
+            if (_document.scripts[i].src) {
+                rel.scripts[_document.scripts[i].src] = true;
+            }
+        }
+          
+        var s, j;
+        //traverse @import rules
+        var traverseRules = function _traverseRules(sheet, base) {
+            var i;
+            if (sheet.href && sheet.cssRules) {
+                if (rel.stylesheets[sheet.href] === undefined) {
+                    rel.stylesheets[sheet.href] = [];
+                }
+                rel.stylesheets[sheet.href].push(base);
+                
+                
+                for (i = 0; i < sheet.cssRules.length; i++) {
+                    if (sheet.cssRules[i].href) {
+                        traverseRules(sheet.cssRules[i].styleSheet, base);
+                    }
+                }
+            }
+        };
+        //iterate on document.stylesheets (StyleSheetList doesn't provide forEach iterator).
+        for (j = 0; j < document.styleSheets.length; j++) {
+            s = document.styleSheets[j];
+            traverseRules(s, s.href);
+        }
+        return rel;
+    }
+    
+    /**
+     * Start listening for events and send initial related documents message.
+     * 
+     * @param {HTMLDocument} document
+     * @param {object} transport Live development transport connection
+     */
+    function start(document, transport) {
+        _transport = transport;
+        _document = document;
+        // start listening to node changes
+        _enableListeners();
+        
+        var rel = related();
+        
+        // send the current status of related docs. 
+        _transport.send(JSON.stringify({
+            method: "Document.Related",
+            related: rel
+        }));
+        // initialize stylesheets with current status for further notifications.
+        CSS.stylesheets = rel.stylesheets;
+    }
+    
+    /**
+     * Stop listening.
+     * TODO currently a no-op.
+     */
+    function stop() {
+    
+    }
+
+    var DocumentObserver = {
+        start: start,
+        stop: stop,
+        related: related
+    };
+    
+    ProtocolManager.setDocumentObserver(DocumentObserver);
+    
+}(this));
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js
new file mode 100644
index 00000000000..8ca1671595b
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js
@@ -0,0 +1,63 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+
+/*jslint vars: true, plusplus: true, browser: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, window, navigator, Node, console */
+
+/**
+ * ExtendRemoteFunctions defines the addtional functions to be executed in the browser. 
+ */
+function ExtendRemoteFunctions(obj) {
+    "use strict";
+
+    var ExtendedObj = function () {};
+    ExtendedObj.prototype = obj;
+
+    ExtendedObj.prototype.reloadCSS = function reloadCSS(url, text) {
+        var i,
+            node;
+
+        var head = document.getElementsByTagName('head')[0];
+        // create an style element to replace the one loaded with <link>
+        var s = document.createElement('style');
+        s.type = 'text/css';
+        s.appendChild(document.createTextNode(text));
+
+        for (i = 0; i < document.styleSheets.length; i++) {
+            node = document.styleSheets[i];
+            if (node.ownerNode.id === url) {
+                head.insertBefore(s, node.ownerNode); // insert the style element here
+                // now can remove the style element previously created (if any)
+                node.ownerNode.parentNode.removeChild(node.ownerNode);
+            } else if (node.href === url  && !node.disabled) {
+                // if the link element to change 
+                head.insertBefore(s, node.ownerNode); // insert the style element here
+                node.disabled = true;
+                i++; // since we have just inserted a stylesheet
+            }
+        }
+        s.id = url;
+    };
+    return new ExtendedObj();
+}
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
new file mode 100644
index 00000000000..b7a5e08fae1
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
@@ -0,0 +1,283 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint evil: true */
+
+// This is the script that Brackets live development injects into HTML pages in order to
+// establish and maintain the live development socket connection. Note that Brackets may
+// also inject other scripts via "evaluate" once this has connected back to Brackets.
+
+(function (global) {
+    "use strict";
+    
+    // This protocol handler assumes that there is also an injected transport script that
+    // has the following methods:
+    //     setCallbacks(obj) - a method that takes an object with a "message" callback that
+    //         will be called with the message string whenever a message is received by the transport.
+    //     send(msgStr) - sends the given message string over the transport.
+    var transport = global._Brackets_LiveDev_Transport;
+    
+
+    /**
+     * Manage messaging between Editor and Browser at the protocol layer.
+     * Handle messages that arrives through the current transport and dispatch them 
+     * to subscribers. Subscribers are handlers that implements remote commands/functions.
+     * Property 'method' of messages body is used as the 'key' to identify message types.   
+     * Provide a 'send' operation that allows remote commands sending messages to the Editor.
+     */
+    var MessageBroker = {
+                
+        /**
+         * Collection of handlers (subscribers) per each method.
+         * To be pushed by 'on' and consumed by 'trigger' stored this way: 
+         *      handlers[method] = [handler1, handler2, ...]
+         */
+        handlers: {},
+        
+         /**
+          * Dispatch messages to handlers according to msg.method value.
+          * @param {Object} msg Message to be dispatched.
+          */
+        trigger: function (msg) {
+            var msgHandlers;
+            if (!msg.method) {
+                // no message type, ignoring it
+                // TODO: should we trigger a generic event?
+                console.log("[Brackets LiveDev] Received message without method.");
+                return;
+            }
+            // get handlers for msg.method
+            msgHandlers = this.handlers[msg.method];
+            
+            if (msgHandlers && msgHandlers.length > 0) {
+                // invoke handlers with the received message
+                msgHandlers.forEach(function (handler) {
+                    try {
+                        // TODO: check which context should be used to call handlers here.
+                        handler(msg);
+                        return;
+                    } catch (e) {
+                        console.log("[Brackets LiveDev] Error executing a handler for " + msg.method);
+                        console.log(e.stack);
+                        return;
+                    }
+                });
+            } else {
+                // no subscribers, ignore it.
+                // TODO: any other default handling? (eg. specific respond, trigger as a generic event, etc.);
+                console.log("[Brackets LiveDev] No subscribers for message " + msg.method);
+                return;
+            }
+        },
+        
+        /**
+         * Send a response of a particular message to the Editor.
+         * Original message must provide an 'id' property
+         * @param {Object} orig Original message.
+         * @param {Object} response Message to be sent as the response.
+         */
+        respond: function (orig, response) {
+            if (!orig.id) {
+                console.log("[Brackets LiveDev] Trying to send a response for a message with no ID");
+                return;
+            }
+            response.id = orig.id;
+            this.send(JSON.stringify(response));
+        },
+        
+        /**
+         * Subscribe handlers to specific messages.
+         * @param {string} method Message type.
+         * @param {function} handler.
+         * TODO: add handler name or any identification mechanism to then implement 'off'?
+         */
+        on: function (method, handler) {
+            if (!method || !handler) {
+                return;
+            }
+            if (!this.handlers[method]) {
+                //initialize array
+                this.handlers[method] = [];
+            }
+            // add handler to the stack
+            this.handlers[method].push(handler);
+        },
+        
+        /**
+         * Send a message to the Editor.
+         * @param {string} msgStr Message to be sent.
+         */
+        send: function (msgStr) {
+            transport.send(JSON.stringify(msgStr));
+        }
+    };
+    
+    /**
+     * Runtime Domain. Implements remote commands for "Runtime.*"
+     */
+    var Runtime = {
+        /**
+         * Evaluate an expresion and return its result.
+         */
+        evaluate: function (msg) {
+            console.log("Runtime.evaluate");
+            var result = eval(msg.params.expression);
+            MessageBroker.respond(msg, {
+                result: JSON.stringify(result) // TODO: in original protocol this is an object handle
+            });
+        }
+    };
+    
+    // subscribe handler to method Runtime.evaluate
+    MessageBroker.on("Runtime.evaluate", Runtime.evaluate);
+    
+    /**
+     * Page Domain.
+     */
+    var Page = {
+        /**
+         * Reload the current page optionally ignoring cache.
+         * @param {Object} msg
+         */
+        reload: function (msg) {
+            // just reload the page
+            window.location.reload(msg.params.ignoreCache);
+        },
+        
+        /**
+         * Navigate to a different page.
+         * @param {Object} msg
+         */
+        navigate: function (msg) {
+            if (msg.params.url) {
+                // navigate to a new page.
+                window.location.replace(msg.params.url);
+            }
+        }
+    };
+         
+    // subscribe handler to method Page.reload
+    MessageBroker.on("Page.reload", Page.reload);
+    MessageBroker.on("Page.navigate", Page.navigate);
+    MessageBroker.on("Connection.close", Page.close);
+        
+    
+    
+    // By the time this executes, there must already be an active transport.
+    if (!transport) {
+        console.error("[Brackets LiveDev] No transport set");
+        return;
+    }
+    
+    var ProtocolManager = {
+        
+        _documentObserver: {},
+        
+        _protocolHandler: {},
+        
+        enable: function () {
+            transport.setCallbacks(this._protocolHandler);
+            transport.enable();
+        },
+        
+        onConnect: function () {
+            this._documentObserver.start(window.document, transport);
+        },
+        
+        onClose: function () {
+            // TODO: This is absolutely temporary solution. It shows a message 
+            // when the connection has been closed. UX decision to be taken on what to do when 
+            // the session is explicitly closed from the Editor side. If the browser can't be closed,
+            // this could be an alternative. A better alternative to this could be a redirection
+            // to a custom static page being served by StaticServer 
+            var body = document.getElementsByTagName("body")[0];
+            body.style.opacity = 0.5;
+            var status = document.createElement("div");
+            status.textContent = "Live Development Session has Ended";
+            status.style.width = "100%";
+            status.style.color = "#fff";
+            status.style.backgroundColor = "#ff0000";
+            status.style.position = "absolute";
+            status.style.top = 0;
+            status.style.left = 0;
+            status.style.padding = "0.2em";
+            status.style.zIndex = 2227;
+            body.appendChild(status);
+        },
+        
+        setDocumentObserver: function (documentOberver) {
+            if (!documentOberver) {
+                return;
+            }
+            this._documentObserver = documentOberver;
+        },
+        
+        setProtocolHandler: function (protocolHandler) {
+            if (!protocolHandler) {
+                return;
+            }
+            this._protocolHandler = protocolHandler;
+        }
+    };
+    
+    // exposing ProtocolManager
+    global._Brackets_LiveDev_ProtocolManager = ProtocolManager;
+        
+    /**
+     * The remote handler for the protocol.
+     */
+    var ProtocolHandler = {
+        /**
+         * Handles a message from the transport. Parses it as JSON and delegates
+         * to MessageBroker who is in charge of routing them to handlers.
+         * @param {string} msgStr The protocol message as stringified JSON.
+         */
+        message: function (msgStr) {
+            var msg;
+            try {
+                msg = JSON.parse(msgStr);
+            } catch (e) {
+                console.log("[Brackets LiveDev] Invalid Message Received");
+                // TODO: we should probably send back an error message here?
+                return;
+            }
+            // delegates handling/routing to MessageBroker.
+            MessageBroker.trigger(msg);
+        },
+        
+        close: function (evt) {
+            ProtocolManager.onClose();
+        },
+        
+        connect: function (evt) {
+            ProtocolManager.onConnect();
+        }
+    };
+    
+    ProtocolManager.setProtocolHandler(ProtocolHandler);
+    
+    window.addEventListener('load', function () {
+        ProtocolManager.enable();
+    });
+    
+}(this));
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js b/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js
new file mode 100644
index 00000000000..c4d6e39ca96
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets, window, open */
+
+// This transport provides a WebSocket connection between Brackets and a live browser preview.
+// This is just a thin wrapper around the Node extension (NodeSocketTransportDomain) that actually
+// provides the WebSocket server and handles the communication. We also rely on an injected script in
+// the browser for the other end of the transport.
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    var FileUtils = require("file/FileUtils"),
+        NodeDomain = require("utils/NodeDomain");
+    
+    // The script that will be injected into the previewed HTML to handle the other side of the socket connection.
+    var NodeSocketTransportRemote = require("text!LiveDevelopment/MultiBrowserImpl/transports/remote/NodeSocketTransportRemote.js");
+
+    // The node extension that actually provides the WebSocket server.
+    
+    var domainPath = FileUtils.getNativeBracketsDirectoryPath() + "/" + FileUtils.getNativeModuleDirectoryPath(module) + "/node/NodeSocketTransportDomain";
+    
+    var NodeSocketTransportDomain = new NodeDomain("nodeSocketTransport", domainPath);
+    
+    // This must match the port declared in NodeSocketTransportDomain.js.
+    // TODO: randomize this?
+    var SOCKET_PORT = 8123;
+    
+    /**
+     * Returns the script that should be injected into the browser to handle the other end of the transport.
+     * @return {string}
+     */
+    function getRemoteScript() {
+        return "<script>\n" +
+            NodeSocketTransportRemote +
+            "this._Brackets_LiveDev_Socket_Transport_URL = 'ws://localhost:" + SOCKET_PORT + "';\n" +
+            "</script>\n";
+    }
+
+    // Events
+    
+    // We can simply retrigger the events we receive from the node domain directly, since they're in
+    // the same format expected by clients of the transport.
+    ["connect", "message", "close"].forEach(function (type) {
+        $(NodeSocketTransportDomain).on(type, function () {
+            console.log("NodeSocketTransport - event - " + type + " - " + JSON.stringify(Array.prototype.slice.call(arguments, 1)));
+            // Remove the event object from the argument list.
+            $(exports).triggerHandler(type, Array.prototype.slice.call(arguments, 1));
+        });
+    });
+    
+    // Exports
+    
+    exports.getRemoteScript = getRemoteScript;
+    
+    // Proxy the node domain methods directly through, since they have exactly the same
+    // signatures as the ones we're supposed to provide.
+    ["launch", "send", "close"].forEach(function (method) {
+        exports[method] = function () {
+            var args = Array.prototype.slice.call(arguments);
+            args.unshift(method);
+            console.log("NodeSocketTransport - " + args);
+            NodeSocketTransportDomain.exec.apply(NodeSocketTransportDomain, args);
+        };
+    });
+
+});
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js b/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js
new file mode 100644
index 00000000000..33c22c78cba
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js
@@ -0,0 +1,249 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50, node: true */
+
+(function () {
+    "use strict";
+    
+    var WebSocketServer = require("ws").Server,
+        open = require("open"),
+        _ = require("lodash");
+    
+    /**
+     * @private
+     * The WebSocket server we listen for incoming connections on.
+     * @type {?WebSocketServer}
+     */
+    var _wsServer;
+    
+    /**
+     * @private
+     * The Brackets domain manager for registering node extensions.
+     * @type {?DomainManager}
+     */
+    var _domainManager;
+    
+    /**
+     * @private
+     * The ID that should be allocated to the next client that connects to the transport.
+     * @type {number}
+     */
+    var _nextClientId = 1;
+    
+    /**
+     * @private
+     * A map of client IDs to the URL and WebSocket for the given ID.
+     * @type {Object.<number, {id: number, url: string, socket: WebSocket}>}
+     */
+    var _clients = {};
+    
+    // This must match the port declared in NodeSocketTransport.js.
+    // TODO: randomize this?
+    var SOCKET_PORT = 8123;
+
+    /**
+     * @private
+     * Returns the client info for a given WebSocket, or null if that socket isn't registered.
+     * @param {WebSocket} ws
+     * @return {?{id: number, url: string, socket: WebSocket}}
+     */
+    function _clientForSocket(ws) {
+        return _.find(_clients, function (client) {
+            return (client.socket === ws);
+        });
+    }
+    
+    /**
+     * @private
+     * Creates the WebSocketServer and handles incoming connections.
+     */
+    function _createServer() {
+        if (!_wsServer) {
+            // TODO: make port configurable, or use random port
+            _wsServer = new WebSocketServer({port: SOCKET_PORT});
+            _wsServer.on("connection", function (ws) {
+                ws.on("message", function (msg) {
+                    console.log("WebSocketServer - received - " + msg);
+                    var msgObj;
+                    try {
+                        msgObj = JSON.parse(msg);
+                    } catch (e) {
+                        console.error("nodeSocketTransport: Error parsing message: " + msg);
+                        return;
+                    }
+                    
+                    // See the comment in NodeSocketTransportRemote.connect() for why we have an extra
+                    // layer of transport-layer message objects surrounding the protocol messaging.
+
+                    if (msgObj.type === "connect") {
+                        if (!msgObj.url) {
+                            console.error("nodeSocketTransport: Malformed connect message: " + msg);
+                            return;
+                        }
+                        var clientId = _nextClientId++;
+                        _clients[clientId] = {
+                            id: clientId,
+                            url: msgObj.url,
+                            socket: ws
+                        };
+                        console.log("emitting connect event");
+                        _domainManager.emitEvent("nodeSocketTransport", "connect", [clientId, msgObj.url]);
+                    } else if (msgObj.type === "message") {
+                        var client = _clientForSocket(ws);
+                        if (client) {
+                            _domainManager.emitEvent("nodeSocketTransport", "message", [client.id, msgObj.message]);
+                        } else {
+                            console.error("nodeSocketTransport: Couldn't locate client for message: " + msg);
+                        }
+                    } else {
+                        console.error("nodeSocketTransport: Got bad socket message type: " + msg);
+                    }
+                }).on("error", function (e) {
+                    // TODO: emit error event
+                    var client = _clientForSocket(ws);
+                    console.error("nodeSocketTransport: Error on socket for client " + JSON.stringify(client) + ": " + e);
+                }).on("close", function () {
+                    var client = _clientForSocket(ws);
+                    if (client) {
+                        _domainManager.emitEvent("nodeSocketTransport", "close", [client.id]);
+                        delete _clients[client.id];
+                    } else {
+                        console.error("nodeSocketTransport: Socket closed, but couldn't locate client");
+                    }
+                });
+            });
+        }
+    }
+    
+    /**
+     * Initializes the socket server, then launches the given URL in the system default browser.
+     * @param {string} url
+     */
+    function _cmdLaunch(url) {
+        _createServer();
+        open(url);
+    }
+    
+    /**
+     * Sends a transport-layer message over the socket.
+     * @param {number|Array.<number>} idOrArray A client ID or array of client IDs to send the message to.
+     * @param {string} msgStr The message to send as a JSON string.
+     */
+    function _cmdSend(idOrArray, msgStr) {
+        if (!Array.isArray(idOrArray)) {
+            idOrArray = [idOrArray];
+        }
+        idOrArray.forEach(function (id) {
+            var client = _clients[id];
+            if (!client) {
+                console.error("nodeSocketTransport: Couldn't find client ID: " + id);
+            } else {
+                client.socket.send(msgStr);
+            }
+        });
+    }
+    
+    /**
+     * Closes the connection for a given client ID.
+     * @param {number} clientId
+     */
+    function _cmdClose(clientId) {
+        var client = _clients[clientId];
+        if (client) {
+            client.socket.close();
+            delete _clients[clientId];
+        }
+    }
+    
+    /**
+     * Initializes the domain and registers commands.
+     * @param {DomainManager} domainManager The DomainManager for the server
+     */
+    function init(domainManager) {
+        _domainManager = domainManager;
+        if (!domainManager.hasDomain("nodeSocketTransport")) {
+            domainManager.registerDomain("nodeSocketTransport", {major: 0, minor: 1});
+        }
+        domainManager.registerCommand(
+            "nodeSocketTransport",      // domain name
+            "launch",       // command name
+            _cmdLaunch,     // command handler function
+            false,          // this command is synchronous in Node
+            "Launches a given HTML file in the browser for live development",
+            [{name: "url", // parameters
+                type: "string",
+                description: "file:// url to the HTML file"}],
+            []
+        );
+        domainManager.registerCommand(
+            "nodeSocketTransport",      // domain name
+            "send",         // command name
+            _cmdSend,       // command handler function
+            false,          // this command is synchronous in Node
+            "Sends a message to a given client or list of clients",
+            [
+                {name: "idOrArray", type: "number|Array.<number>", description: "id or array of ids to send the message to"},
+                {name: "message", type: "string", description: "JSON message to send"}
+            ],
+            []
+        );
+        domainManager.registerCommand(
+            "nodeSocketTransport",      // domain name
+            "close",         // command name
+            _cmdClose,       // command handler function
+            false,          // this command is synchronous in Node
+            "Closes the connection to a given client",
+            [
+                {name: "id", type: "number", description: "id of connection to close"}
+            ],
+            []
+        );
+        domainManager.registerEvent(
+            "nodeSocketTransport",
+            "connect",
+            [
+                {name: "clientID", type: "number", description: "ID of live preview page connecting to live development"},
+                {name: "url", type: "string", description: "URL of page that live preview is connecting from"}
+            ]
+        );
+        domainManager.registerEvent(
+            "nodeSocketTransport",
+            "message",
+            [
+                {name: "clientID", type: "number", description: "ID of live preview page sending message"},
+                {name: "msg", type: "string", description: "JSON message from client page"}
+            ]
+        );
+        domainManager.registerEvent(
+            "nodeSocketTransport",
+            "close",
+            [
+                {name: "clientID", type: "number", description: "ID of live preview page being closed"}
+            ]
+        );
+    }
+    
+    exports.init = init;
+    
+}());
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json b/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json
new file mode 100644
index 00000000000..17e04631800
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "brackets-livedev2-server",
+  "dependencies": {
+    "ws": "~0.4.31",
+    "open": "0.0.4",
+    "lodash": "~2.4.1"
+  }
+}
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/remote/NodeSocketTransportRemote.js b/src/LiveDevelopment/MultiBrowserImpl/transports/remote/NodeSocketTransportRemote.js
new file mode 100644
index 00000000000..02b2dacad50
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/remote/NodeSocketTransportRemote.js
@@ -0,0 +1,138 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint browser: true, vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global WebSocket */
+
+// This is a transport injected into the browser via a script that handles the low
+// level communication between the live development protocol handlers on both sides.
+// This transport provides a web socket mechanism. It's injected separately from the
+// protocol handler so that the transport can be changed separately.
+
+(function (global) {
+    "use strict";
+    
+    var WebSocketTransport = {
+        /**
+         * @private
+         * The WebSocket that we communicate with Brackets over.
+         * @type {?WebSocket}
+         */
+        _ws: null,
+        
+        /**
+         * @private
+         * An object that contains callbacks to handle various transport events. See `setCallbacks()`.
+         * @type {?{connect: ?function, message: ?function(string), close: ?function}}
+         */
+        _callbacks: null,
+        
+        /**
+         * Sets the callbacks that should be called when various transport events occur. All callbacks
+         * are optional, but you should at least implement "message" or nothing interesting will happen :)
+         * @param {?{connect: ?function, message: ?function(string), close: ?function}} callbacks
+         *      The callbacks to set.
+         *      connect - called when a connection is established to Brackets
+         *      message(msgStr) - called with a string message sent from Brackets
+         *      close - called when Brackets closes the connection
+         */
+        setCallbacks: function (callbacks) {
+            if (!global._Brackets_LiveDev_Socket_Transport_URL) {
+                console.error("[Brackets LiveDev] No socket transport URL injected");
+            } else {
+                this._callbacks = callbacks;
+            }
+        },
+        
+        /**
+         * Connects to the NodeSocketTransport in Brackets at the given WebSocket URL.
+         * @param {string} url
+         */
+        connect: function (url) {
+            var self = this;
+            this._ws = new WebSocket(url);
+            
+            // One potential source of confusion: the transport sends two "types" of messages -
+            // these are distinct from the protocol's own messages. This is because this transport
+            // needs to send an initial "connect" message telling the Brackets side of the transport
+            // the URL of the page that it's connecting from, distinct from the actual protocol 
+            // message traffic. Actual protocol messages are sent as a JSON payload in a message of
+            // type "message".
+            //
+            // Other transports might not need to do this - for example, a transport that simply
+            // talks to an iframe within the same process already knows what URL that iframe is
+            // pointing to, so the only comunication that needs to happen via postMessage() is the
+            // actual protocol message strings, and no extra wrapping is necessary.
+            
+            this._ws.onopen = function (event) {
+                // Send the initial "connect" message to tell the other end what URL we're from.
+                self._ws.send(JSON.stringify({
+                    type: "connect",
+                    url: global.location.href
+                }));
+                console.log("[Brackets LiveDev] Connected to Brackets at " + url);
+                if (self._callbacks && self._callbacks.connect) {
+                    self._callbacks.connect();
+                }
+            };
+            this._ws.onmessage = function (event) {
+                console.log("[Brackets LiveDev] Got message: " + event.data);
+                if (self._callbacks && self._callbacks.message) {
+                    self._callbacks.message(event.data);
+                }
+            };
+            this._ws.onclose = function (event) {
+                self._ws = null;
+                if (self._callbacks && self._callbacks.close) {
+                    self._callbacks.close();
+                }
+            };
+            // TODO: onerror
+        },
+        
+        /**
+         * Sends a message over the transport.
+         * @param {string} msgStr The message to send.
+         */
+        send: function (msgStr) {
+            if (this._ws) {
+                // See comment in `connect()` above about why we wrap the message in a transport message
+                // object.
+                this._ws.send(JSON.stringify({
+                    type: "message",
+                    message: msgStr
+                }));
+            } else {
+                console.log("[Brackets LiveDev] Tried to send message over closed connection: " + msgStr);
+            }
+        },
+        
+        /** 
+         * Establish web socket connection.
+         */
+        enable: function() {
+            this.connect(global._Brackets_LiveDev_Socket_Transport_URL);
+        }
+    };
+    global._Brackets_LiveDev_Transport = WebSocketTransport;
+}(this));
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 0c8c7f68eb0..19590df92a3 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -49,10 +49,14 @@ define(function main(require, exports, module) {
         Strings             = require("strings"),
         ExtensionUtils      = require("utils/ExtensionUtils"),
         StringUtils         = require("utils/StringUtils");
+    
+    // expermiental multi-browser implementation
+    var MultiBrowserLiveDev = require("LiveDevelopment/LiveDevMultiBrowser");
 
     var params = new UrlParams();
     var config = {
         experimental: false, // enable experimental features
+        multiBrowser: false, // enable experimental multi-browser implementation
         debug: true, // enable debug output and helpers
         autoconnect: false, // go live automatically after startup?
         highlight: true, // enable highlighting?
@@ -233,10 +237,19 @@ define(function main(require, exports, module) {
 
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
+        
         params.parse();
-
-        Inspector.init(config);
-        LiveDevelopment.init(config);
+        
+        if (!config.multiBrowser) { 
+            // init LiveDevelopment
+            Inspector.init(config);
+            LiveDevelopment.init(config);
+        } else {
+            // init experimental multi-browser implementation
+            LiveDevelopment = MultiBrowserLiveDev;
+            LiveDevelopment.init(config);
+        }
+        
         _loadStyles();
         _setupGoLiveButton();
         _setupGoLiveMenu();

From 3b96b2df80b762d3cd1694b2c526d61682819d77 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Tue, 18 Nov 2014 16:04:27 -0300
Subject: [PATCH 02/17] remove main.js from MultiBrowserImpl

---
 src/LiveDevelopment/MultiBrowserImpl/main.js | 214 -------------------
 1 file changed, 214 deletions(-)
 delete mode 100644 src/LiveDevelopment/MultiBrowserImpl/main.js

diff --git a/src/LiveDevelopment/MultiBrowserImpl/main.js b/src/LiveDevelopment/MultiBrowserImpl/main.js
deleted file mode 100644
index 91299f28827..00000000000
--- a/src/LiveDevelopment/MultiBrowserImpl/main.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/*
- * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"),
- * to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the
- * Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
- * DEALINGS IN THE SOFTWARE.
- *
- */
-
-
-/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
-/*global brackets, define, $, less, window */
-
-/**
- * main integrates LiveDevelopment into Brackets
- *
- * This module creates two menu items:
- *
- *  "Go Live": open or close a Live Development session and visualize the status
- *  "Highlight": toggle source highlighting
- *
- * @require DocumentManager
- */
-define(function main(require, exports, module) {
-    "use strict";
-
-    var DocumentManager     = require("document/DocumentManager"),
-        Commands            = require("command/Commands"),
-        AppInit             = require("utils/AppInit"),
-        CommandManager      = require("command/CommandManager"),
-        PreferencesManager  = require("preferences/PreferencesManager"),
-        Dialogs             = require("widgets/Dialogs"),
-        DefaultDialogs      = require("widgets/DefaultDialogs"),
-        UrlParams           = require("utils/UrlParams").UrlParams,
-        Strings             = require("strings"),
-        ExtensionUtils      = require("utils/ExtensionUtils"),
-        StringUtils         = require("utils/StringUtils"),
-        Menus               = require("command/Menus"),
-        LiveDevelopment     = require("LiveDevelopment/MultiBrowserImpl/LiveDevelopment");
-
-    var params = new UrlParams();
-
-    // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
-    var _statusTooltip = [
-        Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
-        Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
-        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
-        Strings.LIVE_DEV_STATUS_TIP_CONNECTED,
-        Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
-        Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR,
-        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
-        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1
-    ];
-
-    var _statusStyle = ["warning", "", "info", "success", "out-of-sync", "sync-error", "info", "info"];  // Status indicator's CSS class
-    var _allStatusStyles = _statusStyle.join(" ");
-
-    var _$btnGoLive; // reference to the GoLive button
-    var _$btnHighlight; // reference to the HighlightButton
-
-    /**
-     * Change the appearance of a button. Omit text to remove any extra text; omit style to return to default styling;
-     * omit tooltip to leave tooltip unchanged.
-     */
-    function _setLabel($btn, text, style, tooltip) {
-        // Clear text/styles from previous status
-        $("span", $btn).remove();
-        $btn.removeClass(_allStatusStyles);
-
-        // Set text/styles for new status
-        if (text && text.length > 0) {
-            $("<span class=\"label\">")
-                .addClass(style)
-                .text(text)
-                .appendTo($btn);
-        } else {
-            $btn.addClass(style);
-        }
-
-        if (tooltip) {
-            $btn.attr("title", tooltip);
-        }
-    }
-
-    /**
-     * Toggles LiveDevelopment and synchronizes the state of UI elements that reports LiveDevelopment status
-     *
-     * Stop Live Dev when in an active state (ACTIVE, OUT_OF_SYNC, SYNC_ERROR).
-     * Start Live Dev when in an inactive state (ERROR, INACTIVE).
-     * Do nothing when in a connecting state (CONNECTING, LOADING_AGENTS).
-     */
-    function _handleGoLiveCommand() {
-        if (LiveDevelopment.status >= LiveDevelopment.STATUS_ACTIVE) {
-            LiveDevelopment.close();
-        } else if (LiveDevelopment.status <= LiveDevelopment.STATUS_INACTIVE) {
-            if (!params.get("skipLiveDevelopmentInfo") && !PreferencesManager.getViewState("livedev2.afterFirstLaunch")) {
-                PreferencesManager.setViewState("livedev2.afterFirstLaunch", "true");
-                Dialogs.showModalDialog(
-                    DefaultDialogs.DIALOG_ID_INFO,
-                    Strings.LIVE_DEVELOPMENT_INFO_TITLE,
-                    Strings.LIVE_DEVELOPMENT_INFO_MESSAGE
-                ).done(function (id) {
-                    LiveDevelopment.open();
-                });
-            } else {
-                LiveDevelopment.open();
-            }
-        }
-    }
-
-    /** Called on status change */
-    function _showStatusChangeReason(reason) {
-        // Destroy the previous twipsy (options are not updated otherwise)
-        _$btnGoLive.twipsy("hide").removeData("twipsy");
-        
-        // If there was no reason or the action was an explicit request by the user, don't show a twipsy
-        if (!reason || reason === "explicit_close") {
-            return;
-        }
-
-        // Translate the reason
-        var translatedReason = Strings["LIVE_DEV_" + reason.toUpperCase()];
-        if (!translatedReason) {
-            translatedReason = StringUtils.format(Strings.LIVE_DEV_CLOSED_UNKNOWN_REASON, reason);
-        }
-        
-        // Configure the twipsy
-        var options = {
-            placement: "left",
-            trigger: "manual",
-            autoHideDelay: 5000,
-            title: function () {
-                return translatedReason;
-            }
-        };
-
-        // Show the twipsy with the explanation
-        _$btnGoLive.twipsy(options).twipsy("show");
-    }
-    
-    /** Create the menu item "Go Live" */
-    function _setupGoLiveButton() {
-        _$btnGoLive = _$btnGoLive = $("#toolbar-go-live");
-        _$btnGoLive.click(function onGoLive() {
-            _handleGoLiveCommand();
-        });
-        $(LiveDevelopment).on("statusChange", function statusChange(event, status, reason) {
-            // status starts at -1 (error), so add one when looking up name and style
-            // See the comments at the top of LiveDevelopment.js for details on the
-            // various status codes.
-            _setLabel(_$btnGoLive, null, _statusStyle[status + 1], _statusTooltip[status + 1]);
-            _showStatusChangeReason(reason);
-        });
-
-        // Initialize tooltip for 'not connected' state
-        _setLabel(_$btnGoLive, null, _statusStyle[1], _statusTooltip[1]);
-    }
-    
-    /** Maintains state of the Live Preview menu item */
-    function _setupGoLiveMenu() {
-        $(LiveDevelopment).on("statusChange", function statusChange(event, status) {
-            // Update the checkmark next to 'Live Preview' menu item
-            // Add checkmark when status is STATUS_ACTIVE; otherwise remove it
-            CommandManager.get("file.previewHighlight").setEnabled(status === LiveDevelopment.STATUS_INACTIVE);
-        });
-    }
-
-    function _updateHighlightCheckmark() {
-        CommandManager.get("file.previewHighlight").setChecked(PreferencesManager.getViewState("file.previewHighlight"));
-    }
-    
-    function _handlePreviewHighlightCommand() {
-        PreferencesManager.setViewState("file.previewHighlight", !PreferencesManager.getViewState("file.previewHighlight"));
-    }
-    
-    /** Initialize LiveDevelopment */
-    function init() {
-        params.parse();
-
-        LiveDevelopment.init();
-        _setupGoLiveButton();
-        _setupGoLiveMenu();
-
-        _updateHighlightCheckmark();
-    }
-    
-    // init prefs
-    PreferencesManager.stateManager.definePreference("file.previewHighlight", "boolean", true)
-        .on("change", function () {
-            _updateHighlightCheckmark();
-        });
-    
-    // init commands
-    CommandManager.register(Strings.CMD_LIVE_FILE_PREVIEW,  Commands.FILE_LIVE_FILE_PREVIEW, _handleGoLiveCommand);
-    CommandManager.register(Strings.CMD_LIVE_HIGHLIGHT, Commands.FILE_LIVE_HIGHLIGHT, _handlePreviewHighlightCommand);
-    CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setEnabled(false);
-    
-    // Export public functions
-    exports.init = init;
-});

From 488296d3539f749bdb3a75810c243b05c9fe433a Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Wed, 19 Nov 2014 17:27:01 -0300
Subject: [PATCH 03/17] add switch based on pref livedev.multibrowser

It now allows switching btw implementations by setting a preference.
livedev.multibrowser set to true enables MultiBrowserImpl.
---
 src/LiveDevelopment/main.js | 69 ++++++++++++++++++++++++++-----------
 1 file changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 19590df92a3..44bd0a89666 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -56,7 +56,6 @@ define(function main(require, exports, module) {
     var params = new UrlParams();
     var config = {
         experimental: false, // enable experimental features
-        multiBrowser: false, // enable experimental multi-browser implementation
         debug: true, // enable debug output and helpers
         autoconnect: false, // go live automatically after startup?
         highlight: true, // enable highlighting?
@@ -83,6 +82,8 @@ define(function main(require, exports, module) {
     var _allStatusStyles = _statusStyle.join(" ");
 
     var _$btnGoLive; // reference to the GoLive button
+    
+    var LiveDevImpl;
 
     /** Load Live Development LESS Style */
     function _loadStyles() {
@@ -127,9 +128,10 @@ define(function main(require, exports, module) {
      * Do nothing when in a connecting state (CONNECTING, LOADING_AGENTS).
      */
     function _handleGoLiveCommand() {
-        if (LiveDevelopment.status >= LiveDevelopment.STATUS_ACTIVE) {
-            LiveDevelopment.close();
-        } else if (LiveDevelopment.status <= LiveDevelopment.STATUS_INACTIVE) {
+        
+        if (LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) {
+            LiveDevImpl.close();
+        } else if (LiveDevImpl.status <= LiveDevImpl.STATUS_INACTIVE) {
             if (!params.get("skipLiveDevelopmentInfo") && !PreferencesManager.getViewState("livedev.afterFirstLaunch")) {
                 PreferencesManager.setViewState("livedev.afterFirstLaunch", "true");
                 Dialogs.showModalDialog(
@@ -137,10 +139,10 @@ define(function main(require, exports, module) {
                     Strings.LIVE_DEVELOPMENT_INFO_TITLE,
                     Strings.LIVE_DEVELOPMENT_INFO_MESSAGE
                 ).done(function (id) {
-                    LiveDevelopment.open();
+                    LiveDevImpl.open();
                 });
             } else {
-                LiveDevelopment.open();
+                LiveDevImpl.open();
             }
         }
     }
@@ -181,7 +183,7 @@ define(function main(require, exports, module) {
         _$btnGoLive.click(function onGoLive() {
             _handleGoLiveCommand();
         });
-        $(LiveDevelopment).on("statusChange", function statusChange(event, status, reason) {
+        $(LiveDevImpl).on("statusChange", function statusChange(event, status, reason) {
             // status starts at -1 (error), so add one when looking up name and style
             // See the comments at the top of LiveDevelopment.js for details on the
             // various status codes.
@@ -198,11 +200,11 @@ define(function main(require, exports, module) {
     
     /** Maintains state of the Live Preview menu item */
     function _setupGoLiveMenu() {
-        $(LiveDevelopment).on("statusChange", function statusChange(event, status) {
+        $(LiveDevImpl).on("statusChange", function statusChange(event, status) {
             // Update the checkmark next to 'Live Preview' menu item
             // Add checkmark when status is STATUS_ACTIVE; otherwise remove it
-            CommandManager.get(Commands.FILE_LIVE_FILE_PREVIEW).setChecked(status === LiveDevelopment.STATUS_ACTIVE);
-            CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setEnabled(status === LiveDevelopment.STATUS_ACTIVE);
+            CommandManager.get(Commands.FILE_LIVE_FILE_PREVIEW).setChecked(status === LiveDevImpl.STATUS_ACTIVE);
+            CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setEnabled(status === LiveDevImpl.STATUS_ACTIVE);
         });
     }
 
@@ -214,13 +216,26 @@ define(function main(require, exports, module) {
         config.highlight = !config.highlight;
         _updateHighlightCheckmark();
         if (config.highlight) {
-            LiveDevelopment.showHighlight();
+            LiveDevImpl.showHighlight();
         } else {
-            LiveDevelopment.hideHighlight();
+            LiveDevImpl.hideHighlight();
         }
         PreferencesManager.setViewState("livedev.highlight", config.highlight);
     }
     
+    
+    // returns MultiBrowserLiveDev module if livedev.multibrowser pref is set to true or 
+    // LiveDevelopment module (default implementation) in other case
+    function _getImplementation() {
+        var impl;
+        if (PreferencesManager.get('livedev.multibrowser')) {
+            impl = MultiBrowserLiveDev;
+        } else {
+            impl = LiveDevelopment;
+        }
+        return impl;
+    }
+    
     /** Setup window references to useful LiveDevelopment modules */
     function _setupDebugHelpers() {
         window.ld = LiveDevelopment;
@@ -239,16 +254,19 @@ define(function main(require, exports, module) {
     AppInit.appReady(function () {
         
         params.parse();
+    
+        // init LiveDevelopment
+        Inspector.init(config);
+        LiveDevelopment.init(config);
         
-        if (!config.multiBrowser) { 
-            // init LiveDevelopment
-            Inspector.init(config);
-            LiveDevelopment.init(config);
-        } else {
-            // init experimental multi-browser implementation
-            LiveDevelopment = MultiBrowserLiveDev;
-            LiveDevelopment.init(config);
-        }
+        // init experimental multi-browser implementation 
+        // it can be enable by setting 'livedev.multibrowser' preference to true.
+        // It has to be initiated at this point in case of dynamically switching 
+        // by changing the preference value.
+        MultiBrowserLiveDev.init(config);
+        
+        // set current active implementation based on pref
+        LiveDevImpl = _getImplementation();
         
         _loadStyles();
         _setupGoLiveButton();
@@ -288,6 +306,15 @@ define(function main(require, exports, module) {
         "afterFirstLaunch": "user livedev.afterFirstLaunch"
     }, true);
     
+    PreferencesManager.definePreference("livedev.multibrowser", "boolean", false)
+        .on("change", function () {
+            // get implementation based on the new value
+            LiveDevImpl = _getImplementation();
+            // restart: it will close the current session and open a
+            // a new session based on the new selected implementation
+            _handleGoLiveCommand();
+        });
+    
     config.highlight = PreferencesManager.getViewState("livedev.highlight");
    
     // init commands

From 05d2601132acca673e54fda283ac75894b079efe Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Wed, 19 Nov 2014 17:48:25 -0300
Subject: [PATCH 04/17] use NativeApp to launch browser

Remove logic for launching browser from transport. It now relies on
NativeApp.openLiveBrowser
---
 .../MultiBrowserImpl/protocol/LiveDevProtocol.js  | 11 +++++++----
 .../transports/NodeSocketTransport.js             |  2 +-
 .../transports/node/NodeSocketTransportDomain.js  | 15 +++++----------
 .../MultiBrowserImpl/transports/node/package.json |  1 -
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
index b3491ea041e..db97317ef3c 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -37,13 +37,15 @@
  *
  * It keeps active connections which are  updated when receiving "connect" and "close" from the 
  * underlying transport. Events "Connection.connect"/"Connection.close" are triggered as 
- * propagation of transport's "connect"/"close". Also proxies "launch" command to transport.
+ * propagation of transport's "connect"/"close".
  * 
  */
 
 define(function (require, exports, module) {
     "use strict";
     
+    var NativeApp = require('utils/NativeApp');
+    
     // Text of the script we'll inject into the browser that handles protocol requests.
     var LiveDevProtocolRemote = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js"),
         DocumentObserver = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js"),
@@ -60,7 +62,7 @@ define(function (require, exports, module) {
     /**
      * @private
      * The low-level transport we're communicating over, set by `setTransport()`.
-     * @type {{launch: function(string), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}}
+     * @type {{start: function(), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}}
      */
     var _transport = null;
     
@@ -191,6 +193,7 @@ define(function (require, exports, module) {
             .on("close.livedev", function (event, clientId) {
                 _close(clientId);
             });
+        _transport.start();
     }
     
     
@@ -225,11 +228,11 @@ define(function (require, exports, module) {
     }
     
     /**
-     * Launches the given URL in the browser. Proxies to the transport.
+     * Launches the given URL in the browser.
      * @param {string} url
      */
     function launch(url) {
-        _transport.launch(url);
+        NativeApp.openLiveBrowser(url, false);
     }
     
     /**
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js b/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js
index c4d6e39ca96..2c72154a289 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport.js
@@ -77,7 +77,7 @@ define(function (require, exports, module) {
     
     // Proxy the node domain methods directly through, since they have exactly the same
     // signatures as the ones we're supposed to provide.
-    ["launch", "send", "close"].forEach(function (method) {
+    ["start", "send", "close"].forEach(function (method) {
         exports[method] = function () {
             var args = Array.prototype.slice.call(arguments);
             args.unshift(method);
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js b/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js
index 33c22c78cba..e98094661d3 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/node/NodeSocketTransportDomain.js
@@ -27,7 +27,6 @@
     "use strict";
     
     var WebSocketServer = require("ws").Server,
-        open = require("open"),
         _ = require("lodash");
     
     /**
@@ -137,12 +136,11 @@
     }
     
     /**
-     * Initializes the socket server, then launches the given URL in the system default browser.
+     * Initializes the socket server.
      * @param {string} url
      */
-    function _cmdLaunch(url) {
+    function _cmdStart(url) {
         _createServer();
-        open(url);
     }
     
     /**
@@ -187,13 +185,10 @@
         }
         domainManager.registerCommand(
             "nodeSocketTransport",      // domain name
-            "launch",       // command name
-            _cmdLaunch,     // command handler function
+            "start",       // command name
+            _cmdStart,     // command handler function
             false,          // this command is synchronous in Node
-            "Launches a given HTML file in the browser for live development",
-            [{name: "url", // parameters
-                type: "string",
-                description: "file:// url to the HTML file"}],
+            "Creates the WS server",
             []
         );
         domainManager.registerCommand(
diff --git a/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json b/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json
index 17e04631800..28aff2810e0 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json
+++ b/src/LiveDevelopment/MultiBrowserImpl/transports/node/package.json
@@ -2,7 +2,6 @@
   "name": "brackets-livedev2-server",
   "dependencies": {
     "ws": "~0.4.31",
-    "open": "0.0.4",
     "lodash": "~2.4.1"
   }
 }

From 3685a214f04cfd41488410bb4ec415fa7ed20164 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Wed, 19 Nov 2014 18:07:49 -0300
Subject: [PATCH 05/17] fix RemoteFunctions to make it work on IE

node.remove() is not supported on IE, using alternative
node.parentNode.removeChild(node) in that case
---
 src/LiveDevelopment/Agents/RemoteFunctions.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/LiveDevelopment/Agents/RemoteFunctions.js b/src/LiveDevelopment/Agents/RemoteFunctions.js
index d09d7a0a736..e89d4591feb 100644
--- a/src/LiveDevelopment/Agents/RemoteFunctions.js
+++ b/src/LiveDevelopment/Agents/RemoteFunctions.js
@@ -660,7 +660,11 @@ function RemoteFunctions(experimental) {
             } else {
                 lastRemovedWasText = isText;
 
-                current.remove();
+                if (current.remove) {
+                    current.remove();
+                } else if (current.parentNode && current.parentNode.removeChild) {
+                    current.parentNode.removeChild(current);
+                }
                 current = next;
             }
         }
@@ -698,7 +702,11 @@ function RemoteFunctions(experimental) {
                 edit.tagIDs.forEach(function (tagID) {
                     var node = self._queryBracketsID(tagID);
                     self.rememberedNodes[tagID] = node;
-                    node.remove();
+                    if (node.remove) {
+                        node.remove();
+                    } else if (node.parentNode && node.parentNode.removeChild) {
+                        node.parentNode.removeChild(node);
+                    }
                 });
                 return;
             }
@@ -720,7 +728,11 @@ function RemoteFunctions(experimental) {
                 targetElement.removeAttribute(edit.attribute);
                 break;
             case "elementDelete":
-                targetElement.remove();
+                if (targetElement.remove) {
+                    targetElement.remove();
+                } else if (targetElement.parentNode && targetElement.parentNode.removeChild) {
+                    targetElement.parentNode.removeChild(targetElement);
+                }
                 break;
             case "elementInsert":
                 childElement = null;

From d0c9981b377155e006385cb406f54aa2a0184ad6 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Thu, 20 Nov 2014 17:25:29 -0300
Subject: [PATCH 06/17] add some tests under livepreview category

Add integration tests for initial connection and related documents.
---
 src/LiveDevelopment/LiveDevMultiBrowser.js    |   6 +-
 src/brackets.js                               |   1 +
 test/UnitTestSuite.js                         |   1 +
 .../import1.css                               |   3 +
 .../simple1.css                               |   6 +
 .../simple1.html                              |  15 ++
 .../simple1.js                                |   0
 .../simpleShared.css                          |   4 +
 test/spec/LiveDevelopmentMultiBrowser-test.js | 227 ++++++++++++++++++
 9 files changed, 262 insertions(+), 1 deletion(-)
 create mode 100644 test/spec/LiveDevelopment-MultiBrowser-test-files/import1.css
 create mode 100644 test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.css
 create mode 100644 test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.html
 create mode 100644 test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.js
 create mode 100644 test/spec/LiveDevelopment-MultiBrowser-test-files/simpleShared.css
 create mode 100644 test/spec/LiveDevelopmentMultiBrowser-test.js

diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
index 8988a339df8..98e077682cb 100644
--- a/src/LiveDevelopment/LiveDevMultiBrowser.js
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -828,9 +828,13 @@ define(function (require, exports, module) {
         return _server && _server.getBaseUrl();
     }
     
+    // for unit testing only
+    function _getCurrentLiveDoc() {
+        return _liveDocument;
+    }
     // For unit testing
     exports._server                   = _server;
-    exports._liveDocument             = _liveDocument;
+    exports._getCurrentLiveDoc        = _getCurrentLiveDoc;
     exports._getInitialDocFromCurrent = _getInitialDocFromCurrent;
 
     // Export public functions
diff --git a/src/brackets.js b/src/brackets.js
index e0d5e728334..1a78a1f5502 100644
--- a/src/brackets.js
+++ b/src/brackets.js
@@ -191,6 +191,7 @@ define(function (require, exports, module) {
             KeyBindingManager       : KeyBindingManager,
             LanguageManager         : LanguageManager,
             LiveDevelopment         : require("LiveDevelopment/LiveDevelopment"),
+            LiveDevMultiBrowser     : require("LiveDevelopment/LiveDevMultiBrowser"),
             LiveDevServerManager    : require("LiveDevelopment/LiveDevServerManager"),
             MainViewManager         : MainViewManager,
             MainViewFactory         : require("view/MainViewFactory"),
diff --git a/test/UnitTestSuite.js b/test/UnitTestSuite.js
index 7d710ef966d..7a867b3dc5e 100644
--- a/test/UnitTestSuite.js
+++ b/test/UnitTestSuite.js
@@ -62,6 +62,7 @@ define(function (require, exports, module) {
     require("spec/KeyBindingManager-test");
     require("spec/LanguageManager-test");
     require("spec/LiveDevelopment-test");
+    require("spec/LiveDevelopmentMultiBrowser-test");
     require("spec/LowLevelFileIO-test");
     require("spec/MainViewFactory-test");
     require("spec/MainViewManager-test");
diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/import1.css b/test/spec/LiveDevelopment-MultiBrowser-test-files/import1.css
new file mode 100644
index 00000000000..9b001e53e6e
--- /dev/null
+++ b/test/spec/LiveDevelopment-MultiBrowser-test-files/import1.css
@@ -0,0 +1,3 @@
+.testClass2 {
+	color: #000;
+}
\ No newline at end of file
diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.css b/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.css
new file mode 100644
index 00000000000..03171114c35
--- /dev/null
+++ b/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.css
@@ -0,0 +1,6 @@
+@import url('import1.css');
+
+.testClass {
+	color: #000;
+}
+
diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.html b/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.html
new file mode 100644
index 00000000000..ac9451e2225
--- /dev/null
+++ b/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Simple Test</title>
+<link rel="stylesheet" href="simpleShared.css">
+<link rel="stylesheet" href="simple1.css">
+<script type="text/javascript" src="simple1.js"></script>
+</head>
+
+<body class="testClass">
+<p id="testId" class="testClass">Brackets is awesome!</p>
+<p id ="testId2" class="testClass2" >Red is bad. Green is good.</p>
+</body>
+</html>
diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.js b/test/spec/LiveDevelopment-MultiBrowser-test-files/simple1.js
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/test/spec/LiveDevelopment-MultiBrowser-test-files/simpleShared.css b/test/spec/LiveDevelopment-MultiBrowser-test-files/simpleShared.css
new file mode 100644
index 00000000000..12f7b219774
--- /dev/null
+++ b/test/spec/LiveDevelopment-MultiBrowser-test-files/simpleShared.css
@@ -0,0 +1,4 @@
+body {
+	background-color: red;
+}
+
diff --git a/test/spec/LiveDevelopmentMultiBrowser-test.js b/test/spec/LiveDevelopmentMultiBrowser-test.js
new file mode 100644
index 00000000000..d6917378f05
--- /dev/null
+++ b/test/spec/LiveDevelopmentMultiBrowser-test.js
@@ -0,0 +1,227 @@
+/*
+ * Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint evil: true */
+
+/*global $, brackets, define, describe, xdescribe, it, xit, expect, beforeEach, afterEach, beforeFirst, afterLast, waitsFor, waitsForDone, runs, window, spyOn, jasmine */
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    var SpecRunnerUtils = require("spec/SpecRunnerUtils");
+
+    describe("MultiBrowser (experimental) - LiveDevelopment", function () {
+    
+        this.category = "livepreview";
+
+        var testWindow,
+            brackets,
+            CommandManager,
+            Commands,
+            EditorManager,
+            DocumentManager,
+            LiveDevelopment,
+            LiveDevProtocol,
+            LiveHTMLDocument,
+            PreferencesManager,
+            editor;
+        
+        var testFolder = SpecRunnerUtils.getTestPath("/spec/LiveDevelopment-MultiBrowser-test-files"),
+            allSpacesRE = /\s+/gi;
+
+        beforeEach(function () {
+            // Create a new window that will be shared by ALL tests in this spec.
+            if (!testWindow) {
+                runs(function () {
+                    SpecRunnerUtils.createTestWindowAndRun(this, function (w) {
+                        testWindow = w;
+                        // Load module instances from brackets.test
+                        brackets = testWindow.brackets;
+                        CommandManager = brackets.test.CommandManager;
+                        Commands = brackets.test.Commands;
+                        EditorManager = brackets.test.EditorManager;
+                        DocumentManager = brackets.test.DocumentManager;
+                        LiveDevelopment = brackets.test.LiveDevMultiBrowser;
+                        LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
+                        PreferencesManager = brackets.test.PreferencesManager;
+                    });
+                });
+
+                runs(function () {
+                    SpecRunnerUtils.loadProjectInTestWindow(testFolder);
+                });
+            }
+        });
+        
+        afterEach(function () {
+            SpecRunnerUtils.closeTestWindow();
+            testWindow = null;
+            brackets = null;
+            LiveDevelopment = null;
+            LiveDevProtocol = null;
+        });
+        
+        function waitsForLiveDevelopmentToOpen() {
+            runs(function () {
+                LiveDevelopment.open();
+            });
+            waitsFor(
+                function isLiveDevelopmentActive() {
+                    return LiveDevelopment.status === LiveDevelopment.STATUS_ACTIVE;
+                },
+                "livedevelopment.done.opened",
+                5000
+            );
+        }
+
+        describe("Init Session", function () {
+            
+            
+            it("should establish a browser connection for an opened html file", function () {
+                //open a file
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+                
+                waitsForLiveDevelopmentToOpen();
+
+                runs(function () {
+                    expect(LiveDevelopment.status).toBe(LiveDevelopment.STATUS_ACTIVE);
+                });
+            });
+            
+            it("should send all external stylesheets as related docs on start-up", function () {
+                var liveDoc;
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+                waitsForLiveDevelopmentToOpen();
+                runs(function () {
+                    liveDoc = LiveDevelopment._getCurrentLiveDoc();
+                });
+                waitsFor(
+                    function relatedDocsReceived() {
+                        return (Object.getOwnPropertyNames(liveDoc.getRelated().stylesheets).length > 0);
+                    },
+                    "relatedDocuments.done.received",
+                    10000
+                );
+                runs(function () {
+                    expect(liveDoc.isRelated(testFolder + "/simple1.css")).toBeTruthy();
+                });
+                runs(function () {
+                    expect(liveDoc.isRelated(testFolder + "/simpleShared.css")).toBeTruthy();
+                });
+            });
+            
+            it("should send all import-ed stylesheets as related docs on start-up", function () {
+                var liveDoc;
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+                waitsForLiveDevelopmentToOpen();
+                runs(function () {
+                    liveDoc = LiveDevelopment._getCurrentLiveDoc();
+                });
+                waitsFor(
+                    function relatedDocsReceived() {
+                        return (Object.getOwnPropertyNames(liveDoc.getRelated().scripts).length > 0);
+                    },
+                    "relatedDocuments.done.received",
+                    10000
+                );
+                runs(function () {
+                    expect(liveDoc.isRelated(testFolder + "/import1.css")).toBeTruthy();
+                });
+            });
+            
+            it("should send all external javascript files as related docs on start-up", function () {
+                var liveDoc;
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+                waitsForLiveDevelopmentToOpen();
+                
+                runs(function () {
+                    liveDoc = LiveDevelopment._getCurrentLiveDoc();
+                });
+                waitsFor(
+                    function relatedDocsReceived() {
+                        return (Object.getOwnPropertyNames(liveDoc.getRelated().scripts).length > 0);
+                    },
+                    "relatedDocuments.done.received",
+                    10000
+                );
+                runs(function () {
+                    expect(liveDoc.isRelated(testFolder + "/simple1.js")).toBeTruthy();
+                });
+            });
+            
+            it("should send notifications for added/removed stylesheets through link nodes", function () {
+                var liveDoc;
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+                waitsForLiveDevelopmentToOpen();
+                
+                runs(function () {
+                    liveDoc = LiveDevelopment._getCurrentLiveDoc();
+                });
+                
+                runs(function () {
+                    var curDoc =  DocumentManager.getCurrentDocument();
+                    curDoc.replaceRange('<link href="simple2.css" rel="stylesheet">\n', {line: 8, ch: 0});
+                });
+                
+                waitsFor(
+                    function relatedDocsReceived() {
+                        return (Object.getOwnPropertyNames(liveDoc.getRelated().stylesheets).length === 4);
+                    },
+                    "relatedDocuments.done.received",
+                    10000
+                );
+                
+                runs(function () {
+                    expect(liveDoc.isRelated(testFolder + "/simple2.css")).toBeTruthy();
+                });
+                
+                runs(function () {
+                    var curDoc =  DocumentManager.getCurrentDocument();
+                    curDoc.replaceRange('', {line: 8, ch: 0}, {line: 8, ch: 50});
+                });
+                
+                waitsFor(
+                    function relatedDocsReceived() {
+                        return (Object.getOwnPropertyNames(liveDoc.getRelated().stylesheets).length === 3);
+                    },
+                    "relatedDocuments.done.received",
+                    10000
+                );
+                
+                runs(function () {
+                    expect(liveDoc.isRelated(testFolder + "/simple2.css")).toBeFalsy();
+                });
+            });
+        });
+    });
+});

From dd6ca829b89f7138d196b69fc8339941cbfae571 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Thu, 20 Nov 2014 17:52:27 -0300
Subject: [PATCH 07/17] Add launch/close browser to LiveDevelopment

- Add close window based on NativeApp.closeLiveBrowser for mac
- Move launch from protocol to LiveDevelopment based since already
relies on NativeApp.openLiveBrowser
---
 src/LiveDevelopment/LiveDevMultiBrowser.js    | 28 +++++++++++++++----
 .../protocol/LiveDevProtocol.js               | 12 +-------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
index 98e077682cb..a9308f79329 100644
--- a/src/LiveDevelopment/LiveDevMultiBrowser.js
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -81,9 +81,11 @@ define(function (require, exports, module) {
         ExtensionUtils       = require("utils/ExtensionUtils"),
         FileSystemError      = require("filesystem/FileSystemError"),
         FileUtils            = require("file/FileUtils"),
+        NativeApp            = require("utils/NativeApp"),
         PreferencesDialogs   = require("preferences/PreferencesDialogs"),
         ProjectManager       = require("project/ProjectManager"),
         Strings              = require("strings"),
+        StringUtils          = require("utils/StringUtils"),
         _                    = require("thirdparty/lodash"),
         LiveDevServerManager = require("LiveDevelopment/LiveDevServerManager"),
         NodeSocketTransport  = require("LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport"),
@@ -480,11 +482,11 @@ define(function (require, exports, module) {
                 _server = null;
             }
         }
-
-        // TODO: don't have a way to close windows in the new architecture
-//        if (doCloseWindow) {
-//        }
-        
+        if (doCloseWindow) {
+            if (brackets.platform === "mac") {
+                NativeApp.closeLiveBrowser();
+            }
+        }
         _setStatus(STATUS_INACTIVE, reason || "explicit_close");
     }
 
@@ -532,6 +534,20 @@ define(function (require, exports, module) {
         _server.add(_liveDocument);
     }
     
+    
+     /**
+     * Launches the given URL in the default browser.
+     * @param {string} url
+     * TODO: launchers for multiple browsers
+     */
+    function _launch(url) {
+        // open default browser
+        // TODO: fail?
+        // 
+        NativeApp.openLiveBrowser(url, false);
+        
+    }
+    
     /**
      * @private
      * Launches the given document in the browser, given that a live document has already
@@ -544,7 +560,7 @@ define(function (require, exports, module) {
                 // Launch the URL in the browser. If it's the first one to connect back to us,
                 // our status will transition to ACTIVE once it does so.
                 if (exports.status < STATUS_ACTIVE) {
-                    _protocol.launch(_server.pathToUrl(doc.file.fullPath));
+                    _launch(_server.pathToUrl(doc.file.fullPath));
                 }
                 if (exports.status === STATUS_RESTARTING) {
                     // change page in browser
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
index db97317ef3c..54ec1309a43 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -176,7 +176,7 @@ define(function (require, exports, module) {
     /**
      * Sets the transport that should be used by the protocol. See `LiveDevelopment.setTransport()`
      * for more detail on the transport.
-     * @param {{launch: function(string), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}} transport
+     * @param {{start: function(string), send: function(number|Array.<number>, string), close: function(number), getRemoteScript: function(): ?string}} transport
      */
     function setTransport(transport) {
         if (_transport) {
@@ -224,15 +224,6 @@ define(function (require, exports, module) {
         return transportScript +
             "<script>\n" + LiveDevProtocolRemote + "</script>\n" +
             remoteFunctionsScript;
-            
-    }
-    
-    /**
-     * Launches the given URL in the browser.
-     * @param {string} url
-     */
-    function launch(url) {
-        NativeApp.openLiveBrowser(url, false);
     }
     
     /**
@@ -312,7 +303,6 @@ define(function (require, exports, module) {
     // public API
     exports.setTransport = setTransport;
     exports.getRemoteScript = getRemoteScript;
-    exports.launch = launch;
     exports.evaluate = evaluate;
     exports.reload = reload;
     exports.navigate = navigate;

From 56db21eb5f5f77f62200d4dd5fbf06ac7c8088f1 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Thu, 20 Nov 2014 20:35:07 -0300
Subject: [PATCH 08/17] unify reloadCSS with remote protocol commands

- move reloadCSS implementation from ExtendedRemoteFunctions to
  LiveDevProtocolremote with the rest of the remote commands
- add method setStylesheetText to protocol to make it more
  representative of the implementation and also align it with CDT name
- align LiveCSSDocument to the new protocol method
---
 .../documents/LiveCSSDocument.js              |  4 +-
 .../protocol/LiveDevProtocol.js               | 16 ++++-
 .../remote/ExtendedRemoteFunctions.js         | 63 -------------------
 .../protocol/remote/LiveDevProtocolRemote.js  | 39 ++++++++++++
 4 files changed, 54 insertions(+), 68 deletions(-)
 delete mode 100644 src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js

diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
index d7b914b137c..7e2a166a420 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
@@ -99,9 +99,7 @@ define(function LiveCSSDocumentModule(require, exports, module) {
                 // reload the original doc
                 $(this).triggerHandler("updateDoc", this.roots[i]);
             } else {
-                this.protocol.evaluate("_LD.reloadCSS(" +
-                                       JSON.stringify(this.doc.url) + ", " +
-                                       JSON.stringify(this.doc.getText()) + ")");
+                this.protocol.setStylesheetText(this.doc.url, this.doc.getText());
             }
         }
         this.redrawHighlights();
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
index 54ec1309a43..2d1135551f4 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -49,7 +49,6 @@ define(function (require, exports, module) {
     // Text of the script we'll inject into the browser that handles protocol requests.
     var LiveDevProtocolRemote = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js"),
         DocumentObserver = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js"),
-        AddedRemoteFunctions = require("text!LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js"),
         RemoteFunctions = require("text!LiveDevelopment/Agents/RemoteFunctions.js");
     
     /**
@@ -208,7 +207,7 @@ define(function (require, exports, module) {
         // Inject DocumentObserver into the browser (tracks related documents)
         script += DocumentObserver;
         // Inject remote functions into the browser.
-        script += "window._LD=" + AddedRemoteFunctions + "(" + RemoteFunctions + "())";
+        script += "window._LD=(" + RemoteFunctions + "())";
         return "<script>\n" + script + "</script>\n";
     }
     
@@ -247,6 +246,18 @@ define(function (require, exports, module) {
         );
     }
     
+    function setStylesheetText(url, text, clients) {
+        return _send(
+            {
+                method: "CSS.setStylesheetText",
+                params: {
+                    url: url,
+                    text: text
+                }
+            }
+        );
+    }
+    
     /**
      * Protocol method. Reloads the page that is currently loaded into the browser, optionally ignoring cache.
      * @param {number|Array.<number>} clients A client ID or array of client IDs that should reload the page.
@@ -304,6 +315,7 @@ define(function (require, exports, module) {
     exports.setTransport = setTransport;
     exports.getRemoteScript = getRemoteScript;
     exports.evaluate = evaluate;
+    exports.setStylesheetText = setStylesheetText;
     exports.reload = reload;
     exports.navigate = navigate;
     exports.close = close;
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js
deleted file mode 100644
index 8ca1671595b..00000000000
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/ExtendedRemoteFunctions.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
- *  
- * Permission is hereby granted, free of charge, to any person obtaining a
- * copy of this software and associated documentation files (the "Software"), 
- * to deal in the Software without restriction, including without limitation 
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
- * and/or sell copies of the Software, and to permit persons to whom the 
- * Software is furnished to do so, subject to the following conditions:
- *  
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *  
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
- * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
- * DEALINGS IN THE SOFTWARE.
- * 
- */
-
-
-/*jslint vars: true, plusplus: true, browser: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
-/*global define, $, window, navigator, Node, console */
-
-/**
- * ExtendRemoteFunctions defines the addtional functions to be executed in the browser. 
- */
-function ExtendRemoteFunctions(obj) {
-    "use strict";
-
-    var ExtendedObj = function () {};
-    ExtendedObj.prototype = obj;
-
-    ExtendedObj.prototype.reloadCSS = function reloadCSS(url, text) {
-        var i,
-            node;
-
-        var head = document.getElementsByTagName('head')[0];
-        // create an style element to replace the one loaded with <link>
-        var s = document.createElement('style');
-        s.type = 'text/css';
-        s.appendChild(document.createTextNode(text));
-
-        for (i = 0; i < document.styleSheets.length; i++) {
-            node = document.styleSheets[i];
-            if (node.ownerNode.id === url) {
-                head.insertBefore(s, node.ownerNode); // insert the style element here
-                // now can remove the style element previously created (if any)
-                node.ownerNode.parentNode.removeChild(node.ownerNode);
-            } else if (node.href === url  && !node.disabled) {
-                // if the link element to change 
-                head.insertBefore(s, node.ownerNode); // insert the style element here
-                node.disabled = true;
-                i++; // since we have just inserted a stylesheet
-            }
-        }
-        s.id = url;
-    };
-    return new ExtendedObj();
-}
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
index b7a5e08fae1..cad408d16d4 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
@@ -151,6 +151,45 @@
     // subscribe handler to method Runtime.evaluate
     MessageBroker.on("Runtime.evaluate", Runtime.evaluate);
     
+    /**
+     * CSS Domain.
+     */
+    var CSS = {
+        
+        setStylesheetText : function (msg) {
+            
+            if (!msg || !msg.params || !msg.params.text || !msg.params.url) {
+                return;
+            }
+            
+            var i,
+                node;
+
+            var head = document.getElementsByTagName('head')[0];
+            // create an style element to replace the one loaded with <link>
+            var s = document.createElement('style');
+            s.type = 'text/css';
+            s.appendChild(document.createTextNode(msg.params.text));
+
+            for (i = 0; i < document.styleSheets.length; i++) {
+                node = document.styleSheets[i];
+                if (node.ownerNode.id === msg.params.url) {
+                    head.insertBefore(s, node.ownerNode); // insert the style element here
+                    // now can remove the style element previously created (if any)
+                    node.ownerNode.parentNode.removeChild(node.ownerNode);
+                } else if (node.href === msg.params.url  && !node.disabled) {
+                    // if the link element to change 
+                    head.insertBefore(s, node.ownerNode); // insert the style element here
+                    node.disabled = true;
+                    i++; // since we have just inserted a stylesheet
+                }
+            }
+            s.id = msg.params.url;
+        }
+    };
+    
+    MessageBroker.on("CSS.setStylesheetText", CSS.setStylesheetText);
+    
     /**
      * Page Domain.
      */

From 19419aca7865761f0b8b4df9b5b2b146a63c256c Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Fri, 21 Nov 2014 07:20:03 -0300
Subject: [PATCH 09/17] Add missing documentation for setStylesheetText

---
 .../MultiBrowserImpl/protocol/LiveDevProtocol.js         | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
index 2d1135551f4..3f0c9e40602 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -246,6 +246,15 @@ define(function (require, exports, module) {
         );
     }
     
+    /**
+     * Protocol method. Reloads a CSS styleseet in the browser (by replacing its text) given its url.
+     * @param {string} url Absolute URL of the stylesheet
+     * @param {string} text The new text of the stylesheet
+     * @param {number|Array.<number>} clients A client ID or array of client IDs that should evaluate
+     *      the script.
+     * @return {$.Promise} A promise that's resolved with the return value from the first client that responds
+     *      to the evaluation.
+     */
     function setStylesheetText(url, text, clients) {
         return _send(
             {

From 578805b4d1925883c61f86f0f0f62813ecbeb7fe Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Fri, 21 Nov 2014 09:09:07 -0300
Subject: [PATCH 10/17] fix some issues on CSS support

- nodes created with new stylesheet text are now removed when the
  stylesheet is removed
- make updates on import-ed CSS work in Firefox
---
 .../documents/LiveCSSDocument.js              |  2 +-
 .../protocol/remote/DocumentObserver.js       | 22 +++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
index 7e2a166a420..9bc7f5299ee 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
@@ -94,7 +94,7 @@ define(function LiveCSSDocumentModule(require, exports, module) {
     LiveCSSDocument.prototype._updateBrowser = function () {
         var i;
         for (i = 0; i < this.roots.length; i++) {
-            if (this.doc.url !== this.roots[i]) {
+            if (this.doc.url !== this.roots[i].toString()) {
                 // if it's not directly included through <link>,
                 // reload the original doc
                 $(this).triggerHandler("updateDoc", this.roots[i]);
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js
index 254c6e3d7e6..5e60f5a100c 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/DocumentObserver.js
@@ -91,6 +91,16 @@
                     }
                 }, 50);
             },
+        
+            onStylesheetRemoved : function (url) {
+                // get style node created when setting new text for stylesheet.
+                var s = document.getElementById(url);
+                // remove 
+                if (s && s.parentNode && s.parentNode.removeChild) {
+                    s.parentNode.removeChild(s);
+                }
+            },
+        
             /**
              * Send a notification for the stylesheet added and  
              * its import-ed styleshets based on document.stylesheets diff
@@ -115,7 +125,7 @@
                     _transport.send(JSON.stringify({
                         method: "Stylesheet.Added",
                         href: v,
-                        roots: added[v]
+                        roots: [added[v]]
                     }));
                 });
                 
@@ -128,17 +138,21 @@
              * from previous status. It also updates stylesheets status.
              */
             notifyStylesheetRemoved : function () {
+                
+                var self = this;
                 var i,
                     removed = {},
                     newStatus,
                     current;
                 
-                current = this.stylesheets;
+                current = self.stylesheets;
                 newStatus = related().stylesheets;
                 
                 Object.keys(current).forEach(function (v, i) {
                     if (!newStatus[v]) {
                         removed[v] = current[v];
+                        // remove node created by setStylesheetText if any
+                        self.onStylesheetRemoved(current[v]);
                     }
                 });
                 
@@ -146,11 +160,11 @@
                     _transport.send(JSON.stringify({
                         method: "Stylesheet.Removed",
                         href: v,
-                        roots: removed[v]
+                        roots: [removed[v]]
                     }));
                 });
                 
-                this.stylesheets = newStatus;
+                self.stylesheets = newStatus;
             }
         };
 

From e3a6c40a3375daa985176169ea6946145fa824ae Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Fri, 21 Nov 2014 12:14:30 -0300
Subject: [PATCH 11/17] add new test for CSS editing

It also implements getStylesheetText on remote protocol and fixes
respond (there was no previous usage of it).
---
 .../documents/LiveCSSDocument.js              | 12 +++++
 .../protocol/LiveDevProtocol.js               | 20 +++++++++
 .../protocol/remote/LiveDevProtocolRemote.js  | 30 ++++++++++++-
 test/spec/LiveDevelopmentMultiBrowser-test.js | 44 +++++++++++++++++++
 4 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
index 9bc7f5299ee..201ddc59039 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument.js
@@ -165,6 +165,18 @@ define(function LiveCSSDocumentModule(require, exports, module) {
         $(this).triggerHandler("deleted", [this]);
     };
 
+    // Only used for unit testing.
+    LiveCSSDocument.prototype.getSourceFromBrowser = function () {
+        var deferred = new $.Deferred();
+        
+        this.protocol.getStylesheetText(this.doc.url)
+            .then(function (res) {
+                deferred.resolve(res.text);
+            }, deferred.reject);
+        
+        return deferred.promise();
+    };
+
     // Export the class
     module.exports = LiveCSSDocument;
 });
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
index 3f0c9e40602..bedb055b77f 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol.js
@@ -267,6 +267,25 @@ define(function (require, exports, module) {
         );
     }
     
+     /**
+     * Protocol method. Rretrieves the content of a given stylesheet (for unit testing)
+     * @param {number|Array.<number>} clients A client ID or array of client IDs that should navigate to the given URL.
+     * @param {string} url Absolute URL that identifies the stylesheet.
+     * @return {$.Promise} A promise that's resolved with the return value from the first client that responds
+     *      to the method.
+     */
+    function getStylesheetText(url, clients) {
+        return _send(
+            {
+                method: "CSS.getStylesheetText",
+                params: {
+                    url: url
+                }
+            },
+            clients
+        );
+    }
+    
     /**
      * Protocol method. Reloads the page that is currently loaded into the browser, optionally ignoring cache.
      * @param {number|Array.<number>} clients A client ID or array of client IDs that should reload the page.
@@ -325,6 +344,7 @@ define(function (require, exports, module) {
     exports.getRemoteScript = getRemoteScript;
     exports.evaluate = evaluate;
     exports.setStylesheetText = setStylesheetText;
+    exports.getStylesheetText = getStylesheetText;
     exports.reload = reload;
     exports.navigate = navigate;
     exports.close = close;
diff --git a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
index cad408d16d4..390b9b6cb57 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/protocol/remote/LiveDevProtocolRemote.js
@@ -102,7 +102,7 @@
                 return;
             }
             response.id = orig.id;
-            this.send(JSON.stringify(response));
+            this.send(response);
         },
         
         /**
@@ -185,10 +185,38 @@
                 }
             }
             s.id = msg.params.url;
+        },
+            
+        /**
+        * retrieves the content of the stylesheet
+        * TODO: it now depends on reloadCSS implementation
+        */
+        getStylesheetText: function (msg) {
+            var i,
+                sheet,
+                text;
+            for (i = 0; i < document.styleSheets.length; i++) {
+                sheet = document.styleSheets[i];
+                // if it was already 'reloaded'
+                if (sheet.ownerNode.id ===  msg.params.url) {
+                    text = sheet.ownerNode.innerText;
+                } else if (sheet.href === msg.params.url && !sheet.disabled) {
+                    var j,
+                        rules = document.styleSheets[i].cssRules;
+                    text = "";
+                    for (j = 0; j < rules.length; j++) {
+                        text += rules[j].cssText + '\n';
+                    }
+                }
+            }
+            MessageBroker.respond(msg, {
+                text: text
+            });
         }
     };
     
     MessageBroker.on("CSS.setStylesheetText", CSS.setStylesheetText);
+    MessageBroker.on("CSS.getStylesheetText", CSS.getStylesheetText);
     
     /**
      * Page Domain.
diff --git a/test/spec/LiveDevelopmentMultiBrowser-test.js b/test/spec/LiveDevelopmentMultiBrowser-test.js
index d6917378f05..02afe32f1be 100644
--- a/test/spec/LiveDevelopmentMultiBrowser-test.js
+++ b/test/spec/LiveDevelopmentMultiBrowser-test.js
@@ -49,6 +49,10 @@ define(function (require, exports, module) {
         var testFolder = SpecRunnerUtils.getTestPath("/spec/LiveDevelopment-MultiBrowser-test-files"),
             allSpacesRE = /\s+/gi;
 
+        function fixSpaces(str) {
+            return str.replace(allSpacesRE, " ");
+        }
+
         beforeEach(function () {
             // Create a new window that will be shared by ALL tests in this spec.
             if (!testWindow) {
@@ -222,6 +226,46 @@ define(function (require, exports, module) {
                     expect(liveDoc.isRelated(testFolder + "/simple2.css")).toBeFalsy();
                 });
             });
+            
+            
+            it("should push changes through browser connection when editing a related CSS", function () {
+                var localText,
+                    browserText,
+                    liveDoc,
+                    curDoc;
+
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+
+                waitsForLiveDevelopmentToOpen();
+
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.css"]), "SpecRunnerUtils.openProjectFiles simple1.css", 1000);
+                });
+                runs(function () {
+                    curDoc =  DocumentManager.getCurrentDocument();
+                    localText = curDoc.getText();
+                    localText += "\n .testClass { background-color:#090; }\n";
+                    curDoc.setText(localText);
+                });
+                runs(function () {
+                    liveDoc = LiveDevelopment.getLiveDocForPath(testFolder + "/simple1.css");
+                });
+                var doneSyncing = false;
+                runs(function () {
+                    liveDoc.getSourceFromBrowser().done(function (text) {
+                        browserText = text;
+                    }).always(function () {
+                        doneSyncing = true;
+                    });
+                });
+                waitsFor(function () { return doneSyncing; }, "Browser to sync changes", 5000);
+
+                runs(function () {
+                    expect(fixSpaces(browserText)).toBe(fixSpaces(localText));
+                });
+            });
         });
     });
 });

From e8ee4d8d5f6101af2ccb631cf9fa74be98156fbb Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Fri, 21 Nov 2014 15:59:06 -0300
Subject: [PATCH 12/17] add Launcher now just for default browser

---
 src/LiveDevelopment/LiveDevMultiBrowser.js    |  8 +-
 .../MultiBrowserImpl/launchers/Launcher.js    | 55 +++++++++++++
 .../launchers/node/LauncherDomain.js          | 80 +++++++++++++++++++
 .../launchers/node/package.json               |  6 ++
 4 files changed, 145 insertions(+), 4 deletions(-)
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js
 create mode 100644 src/LiveDevelopment/MultiBrowserImpl/launchers/node/package.json

diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
index a9308f79329..a7de3b59907 100644
--- a/src/LiveDevelopment/LiveDevMultiBrowser.js
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -89,7 +89,8 @@ define(function (require, exports, module) {
         _                    = require("thirdparty/lodash"),
         LiveDevServerManager = require("LiveDevelopment/LiveDevServerManager"),
         NodeSocketTransport  = require("LiveDevelopment/MultiBrowserImpl/transports/NodeSocketTransport"),
-        LiveDevProtocol      = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
+        LiveDevProtocol      = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol"),
+        Launcher             = require("LiveDevelopment/MultiBrowserImpl/launchers/Launcher");
     
     // Documents
     var LiveCSSDocument      = require("LiveDevelopment/MultiBrowserImpl/documents/LiveCSSDocument"),
@@ -113,7 +114,7 @@ define(function (require, exports, module) {
     /**
      * @private
      * Current transport for communicating with browser instances. See setTransport().
-     * @type {{launch: function(string), send: function(number|Array.<number>, string), close: function(number)}}
+     * @type {{start: function(string), send: function(number|Array.<number>, string), close: function(number)}}
      */
     var _transport;
     
@@ -544,8 +545,7 @@ define(function (require, exports, module) {
         // open default browser
         // TODO: fail?
         // 
-        NativeApp.openLiveBrowser(url, false);
-        
+        Launcher.launch(url);
     }
     
     /**
diff --git a/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js b/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js
new file mode 100644
index 00000000000..54f1655e9e9
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */
+/*global define, $, brackets, window, open */
+
+
+define(function (require, exports, module) {
+    "use strict";
+    
+    var DEFAULT_BROWSER = exports.DEFAULT_BROWSER = 'default';
+    
+    var FileUtils  = require("file/FileUtils"),
+        NodeDomain = require("utils/NodeDomain");
+    
+    var _bracketsPath   = FileUtils.getNativeBracketsDirectoryPath(),
+        _modulePath     = FileUtils.getNativeModuleDirectoryPath(module),
+        _nodePath       = "node/LauncherDomain",
+        _domainPath     = [_bracketsPath, _modulePath, _nodePath].join("/"),
+        _nodeDomain     = new NodeDomain("launcher", _domainPath);
+    
+    function launch(url, browser) {
+        if (!browser) {
+            browser = DEFAULT_BROWSER;
+        }
+        // launch from node domain
+        _nodeDomain.exec("launch", url, browser);
+        console.log("launching " + browser);
+    }
+
+    
+    // Exports   
+    exports.launch = launch;
+
+});
\ No newline at end of file
diff --git a/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js b/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js
new file mode 100644
index 00000000000..a72ba472be7
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js
@@ -0,0 +1,80 @@
+/*
+ * Copyright (c) 2014 Adobe Systems Incorporated. All rights reserved.
+ *  
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the "Software"), 
+ * to deal in the Software without restriction, including without limitation 
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+ * and/or sell copies of the Software, and to permit persons to whom the 
+ * Software is furnished to do so, subject to the following conditions:
+ *  
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *  
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+ * DEALINGS IN THE SOFTWARE.
+ * 
+ */
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50, node: true */
+
+(function () {
+    "use strict";
+    
+    var open = require("open");
+    
+    /**
+     * @private
+     * The Brackets domain manager for registering node extensions.
+     * @type {?DomainManager}
+     */
+    var _domainManager;
+    
+    /**
+     * @private
+     * A map of client IDs to the URL and WebSocket for the given ID.
+     * @type {Object.<number, {id: number, url: string, socket: WebSocket}>}
+     */
+    var _browsers = {};
+
+    /**
+     * Launches the given URL in the given browser.
+	 * TODO: it now launching just on default system, add launchers for specific browsers.
+     * @param {string} url
+     */
+    function _cmdLaunch(url, browser) {
+        open(url);
+    }
+    
+        
+    /**
+     * Initializes the domain and registers commands.
+     * @param {DomainManager} domainManager The DomainManager for the server
+     */
+    function init(domainManager) {
+        _domainManager = domainManager;
+        if (!domainManager.hasDomain("launcher")) {
+            domainManager.registerDomain("launcher", {major: 0, minor: 1});
+        }
+        domainManager.registerCommand(
+            "launcher",      // domain name
+            "launch",       // command name
+            _cmdLaunch,     // command handler function
+            false,          // this command is synchronous in Node
+            "Launches a given HTML file in the browser for live development",
+            [
+                { name: "url", type: "string", description: "file:// url to the HTML file" },
+                { name: "browser", type: "string", description: "browser name"}
+            ],
+            []
+        );
+    }
+    
+    exports.init = init;
+    
+}());
diff --git a/src/LiveDevelopment/MultiBrowserImpl/launchers/node/package.json b/src/LiveDevelopment/MultiBrowserImpl/launchers/node/package.json
new file mode 100644
index 00000000000..83cdf737498
--- /dev/null
+++ b/src/LiveDevelopment/MultiBrowserImpl/launchers/node/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "livedev-multibrowser-launchers",
+  "dependencies": {
+    "open": "0.0.4"
+  }
+}

From bb0ab91da3d91df9950732ca28b772a3935e3390 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Fri, 21 Nov 2014 15:59:40 -0300
Subject: [PATCH 13/17] add new test

test for pushing in-memory changes
---
 test/spec/LiveDevelopmentMultiBrowser-test.js | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/test/spec/LiveDevelopmentMultiBrowser-test.js b/test/spec/LiveDevelopmentMultiBrowser-test.js
index 02afe32f1be..b597da85780 100644
--- a/test/spec/LiveDevelopmentMultiBrowser-test.js
+++ b/test/spec/LiveDevelopmentMultiBrowser-test.js
@@ -266,6 +266,50 @@ define(function (require, exports, module) {
                     expect(fixSpaces(browserText)).toBe(fixSpaces(localText));
                 });
             });
+            
+            it("should push in memory css changes made before the session starts", function () {
+                var localText,
+                    browserText;
+                
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.css"]), "SpecRunnerUtils.openProjectFiles simple1.css", 1000);
+                });
+                
+                runs(function () {
+                    var curDoc =  DocumentManager.getCurrentDocument();
+                    localText = curDoc.getText();
+                    localText += "\n .testClass { background-color:#090; }\n";
+                    curDoc.setText(localText);
+
+                    // Document should not be marked dirty
+                    expect(LiveDevelopment.status).not.toBe(LiveDevelopment.STATUS_OUT_OF_SYNC);
+                });
+                
+                runs(function () {
+                    waitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]), "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+                });
+                
+                waitsForLiveDevelopmentToOpen();
+            
+                
+                var liveDoc, doneSyncing = false;
+                runs(function () {
+                    liveDoc = LiveDevelopment.getLiveDocForPath(testFolder + "/simple1.css");
+                });
+
+                runs(function () {
+                    liveDoc.getSourceFromBrowser().done(function (text) {
+                        browserText = text;
+                    }).always(function () {
+                        doneSyncing = true;
+                    });
+                });
+                waitsFor(function () { return doneSyncing; }, "Browser to sync changes", 10000);
+                
+                runs(function () {
+                    expect(fixSpaces(browserText)).toBe(fixSpaces(localText));
+                });
+            });
         });
     });
 });

From 8560dcd158b1508a4cb407be29054f5b54d1283a Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Fri, 21 Nov 2014 19:00:01 -0300
Subject: [PATCH 14/17] add UI status for MultiBrowserImpl

---
 src/LiveDevelopment/main.js | 74 ++++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
index 44bd0a89666..a3aa25a286a 100644
--- a/src/LiveDevelopment/main.js
+++ b/src/LiveDevelopment/main.js
@@ -68,21 +68,13 @@ define(function main(require, exports, module) {
         }
     };
     // Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
-    var _statusTooltip = [
-        Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
-        Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
-        Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
-        Strings.LIVE_DEV_STATUS_TIP_PROGRESS2,
-        Strings.LIVE_DEV_STATUS_TIP_CONNECTED,
-        Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
-        Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR
-    ];
-
-    var _statusStyle = ["warning", "", "info", "info", "success", "out-of-sync", "sync-error"];  // Status indicator's CSS class
-    var _allStatusStyles = _statusStyle.join(" ");
+    var _statusTooltip,
+        _statusStyle,
+        _allStatusStyles;
 
     var _$btnGoLive; // reference to the GoLive button
     
+    // current selected implementation (LiveDevelopment | LiveDevMultiBrowser)
     var LiveDevImpl;
 
     /** Load Live Development LESS Style */
@@ -128,7 +120,6 @@ define(function main(require, exports, module) {
      * Do nothing when in a connecting state (CONNECTING, LOADING_AGENTS).
      */
     function _handleGoLiveCommand() {
-        
         if (LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) {
             LiveDevImpl.close();
         } else if (LiveDevImpl.status <= LiveDevImpl.STATUS_INACTIVE) {
@@ -223,17 +214,41 @@ define(function main(require, exports, module) {
         PreferencesManager.setViewState("livedev.highlight", config.highlight);
     }
     
-    
-    // returns MultiBrowserLiveDev module if livedev.multibrowser pref is set to true or 
-    // LiveDevelopment module (default implementation) in other case
-    function _getImplementation() {
-        var impl;
-        if (PreferencesManager.get('livedev.multibrowser')) {
-            impl = MultiBrowserLiveDev;
+    // sets the MultiBrowserLiveDev implementation if multibrowser = true,
+    // keeps default LiveDevelopment implementation based on CDT in other case.
+    // since UI status are slightly different btw implementations, it also set 
+    // the corresponding style values.
+    function _setImplementation(multibrowser) {
+        console.log('set implementation ' + multibrowser);
+        if (multibrowser) {
+            // set implemenation
+            LiveDevImpl = MultiBrowserLiveDev;
+            // update styles for UI status 
+            _statusTooltip = [
+                Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
+                Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
+                Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
+                Strings.LIVE_DEV_STATUS_TIP_CONNECTED,
+                Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
+                Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR,
+                Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
+                Strings.LIVE_DEV_STATUS_TIP_PROGRESS1
+            ];
+            _statusStyle = ["warning", "", "info", "success", "out-of-sync", "sync-error", "info", "info"];  // Status indicator's CSS class
         } else {
-            impl = LiveDevelopment;
+            LiveDevImpl = LiveDevelopment;
+            _statusTooltip = [
+                Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
+                Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED,
+                Strings.LIVE_DEV_STATUS_TIP_PROGRESS1,
+                Strings.LIVE_DEV_STATUS_TIP_PROGRESS2,
+                Strings.LIVE_DEV_STATUS_TIP_CONNECTED,
+                Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
+                Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR
+            ];
+            _statusStyle = ["warning", "", "info", "info", "success", "out-of-sync", "sync-error"];  // Status indicator's CSS class
         }
-        return impl;
+        _allStatusStyles = _statusStyle.join(" ");
     }
     
     /** Setup window references to useful LiveDevelopment modules */
@@ -265,9 +280,6 @@ define(function main(require, exports, module) {
         // by changing the preference value.
         MultiBrowserLiveDev.init(config);
         
-        // set current active implementation based on pref
-        LiveDevImpl = _getImplementation();
-        
         _loadStyles();
         _setupGoLiveButton();
         _setupGoLiveMenu();
@@ -308,11 +320,13 @@ define(function main(require, exports, module) {
     
     PreferencesManager.definePreference("livedev.multibrowser", "boolean", false)
         .on("change", function () {
-            // get implementation based on the new value
-            LiveDevImpl = _getImplementation();
-            // restart: it will close the current session and open a
-            // a new session based on the new selected implementation
-            _handleGoLiveCommand();
+            // stop the current session if it is open and set implementation based on 
+            // the pref value. It could be automaticallty restarted but, since the preference file,
+            // is the document open in the editor, it will no launch a live document.
+            if (LiveDevImpl && LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) {
+                LiveDevImpl.close();
+            }
+            _setImplementation(PreferencesManager.get('livedev.multibrowser'));
         });
     
     config.highlight = PreferencesManager.getViewState("livedev.highlight");

From 6b8aa7b419fda4761b5053430a068239c9b3005f Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Mon, 24 Nov 2014 11:14:53 -0300
Subject: [PATCH 15/17] clean-up

---
 .../MultiBrowserImpl/launchers/Launcher.js       | 16 +++++++---------
 .../launchers/node/LauncherDomain.js             | 15 ++++-----------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js b/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js
index 54f1655e9e9..60407cc6bdd 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/launchers/Launcher.js
@@ -28,8 +28,6 @@
 define(function (require, exports, module) {
     "use strict";
     
-    var DEFAULT_BROWSER = exports.DEFAULT_BROWSER = 'default';
-    
     var FileUtils  = require("file/FileUtils"),
         NodeDomain = require("utils/NodeDomain");
     
@@ -39,15 +37,15 @@ define(function (require, exports, module) {
         _domainPath     = [_bracketsPath, _modulePath, _nodePath].join("/"),
         _nodeDomain     = new NodeDomain("launcher", _domainPath);
     
-    function launch(url, browser) {
-        if (!browser) {
-            browser = DEFAULT_BROWSER;
-        }
+    
+    /**
+     * Launch the given URL in the system default browser.
+     * @param {string} url
+     */
+    function launch(url) {
         // launch from node domain
-        _nodeDomain.exec("launch", url, browser);
-        console.log("launching " + browser);
+        _nodeDomain.exec("launch", url);
     }
-
     
     // Exports   
     exports.launch = launch;
diff --git a/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js b/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js
index a72ba472be7..8791a2a79cc 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js
+++ b/src/LiveDevelopment/MultiBrowserImpl/launchers/node/LauncherDomain.js
@@ -34,20 +34,13 @@
      * @type {?DomainManager}
      */
     var _domainManager;
-    
-    /**
-     * @private
-     * A map of client IDs to the URL and WebSocket for the given ID.
-     * @type {Object.<number, {id: number, url: string, socket: WebSocket}>}
-     */
-    var _browsers = {};
 
     /**
-     * Launches the given URL in the given browser.
-	 * TODO: it now launching just on default system, add launchers for specific browsers.
+     * Launch the given URL in the system default browser.
+	 * TODO: it now launching just on default browser, add launchers for specific browsers.
      * @param {string} url
      */
-    function _cmdLaunch(url, browser) {
+    function _cmdLaunch(url) {
         open(url);
     }
     
@@ -74,7 +67,7 @@
             []
         );
     }
-    
+
     exports.init = init;
     
 }());

From d17c0de5e50502653b3921462b7c12018b05181c Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Mon, 24 Nov 2014 11:28:33 -0300
Subject: [PATCH 16/17] update README.md

---
 .../MultiBrowserImpl/README.md                | 30 +++++++------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/LiveDevelopment/MultiBrowserImpl/README.md b/src/LiveDevelopment/MultiBrowserImpl/README.md
index 76494953de8..f5dacd3629d 100644
--- a/src/LiveDevelopment/MultiBrowserImpl/README.md
+++ b/src/LiveDevelopment/MultiBrowserImpl/README.md
@@ -1,26 +1,11 @@
 This is an experimental implementation to replace the current live development architecture with something more flexible that isn't tied solely to Chrome Developer Tools. 
-It's based on the current Live Development code in Brackets, both implemenations can be swapped by setting 'livedev.impl' preference:
- 'livedev.impl' : 'livedev2' - enable livedev2 experimental implementation (replaces current LiveDevelopment impl based on CDT)
- 'livedev.impl' : 'default' (or not set) - disable livedev2 (keeps curren LiveDevelopment implementation) 
+It's based on the current Live Development code in Brackets and has been incubated at njx/brackets-livedev2.
 
 ### What's working
 
-If enabled, it will launch will launch the page in your default browser when clicking on the LiveDevelopment icon as it works today. You should then also be able to copy and paste the URL from that browser into any other browser, live edits will then update all connected browsers at once.
-
-This is still an experimental implementation, the basic functionality for CSS/HTML editing is working but there are could be some scenarios that might be partially or entirely not covered yet. Page reload when saving changes on related Javascript files is also working. Documents that are loaded by the current HTML live doc are being tracked by ```DocumentObserver``` at the browser side which relies on DOM MutationObserver for monitoring added/removed stylesheets and Javascript files. 
-
-### Bugs/cleanup/TODO
-
-* Doesn't show an error if the browser never connects back
-* spurious errors when socket is closed
-* hard-coded port number for WebSocket server (might be fine)
-* It doesn't work on IE (need a fix on ```RemoteFunctions``` which has to be included in Brackets core - see #20)
-* Lots of TODOs in the code
-
-#### Unit tests
-
-We would definitely need a good suite of unit tests for the new functionality. I suspect it would be easier to just write entirely new, more granular unit tests than to try to reuse the old LiveDevelopment integration tests (which were fragile anyway).
+It can be enabled by setting ```livedev.multibrowser``` preference to true. If enabled, it will launch will launch the page in your default browser when clicking on the LiveDevelopment icon as it works today. You should then also be able to copy and paste the URL from that browser into any other browser, live edits will then update all connected browsers at once.
 
+This is still an experimental implementation, the basic functionality for CSS/HTML editing is working but there are could be some scenarios that might be partially or entirely not covered yet. Page reload when saving changes on related Javascript files is also working. Documents that are loaded by the current HTML live doc are being tracked by ```DocumentObserver``` at the browser side which relies on DOM MutationObserver for monitoring added/removed stylesheets and Javascript files (just monitoring ```<link>``` and ```<script>``` added/removed nodes so far. 
 
 ### Basic architecture
 
@@ -61,9 +46,9 @@ Here's a short summary of what happens when the user clicks on the Live Preview
 
 1. LiveDevelopment creates a LiveHTMLDocument for the page, passing it the protocol handler (LiveDevProtocol). LiveHTMLDocument manages communication between the editor and the browser for HTML pages.
 2. LiveDevelopment tells StaticServer that this path has a live document. StaticServer is in charge of actually serving the page and associated assets to the browser. (Note: eventually I think we should get rid of this step - StaticServer shouldn't know anything about live documents directly; it should just have a way of request instrumented text for HTML URLs.)
-3. LiveDevelopment tells the protocol to open the page via the StaticServer URL. The protocol just passes this through to the transport (NodeSocketTransport), which first creates a WebSocket server if it hasn't already, then opens the page in the default browser.
+3. LiveDevelopment tells the launcher to open the page via the StaticServer URL, then it opens the page in the default browser.
 4. The browser requests the page from StaticServer. StaticServer notes that there is a live document for this page, and requests an instrumented version of the page from LiveHTMLDocument. (The current "requestFilterPaths" mechanism for this could be simplified, I think.)
-5. LiveHTMLDocument instruments the page for live editing using the existing HTMLInstrumentation mechanism, and additionally includes remote scripts provided by the protocol (LiveDevProtocolRemote), transport (NodeSocketTransportRemote), remote functions (RemoteFunctions) and document observation (DocumentObserver) which tracks related documents. The transport script includes the URL for the WebSocket server created in step 3.
+5. LiveHTMLDocument instruments the page for live editing using the existing HTMLInstrumentation mechanism, and additionally includes remote scripts provided by the protocol (LiveDevProtocolRemote), transport (NodeSocketTransportRemote), remote functions (RemoteFunctions) and document observation (DocumentObserver) which tracks related documents. The transport script includes the URL for the WebSocket server created when the transport is started after being set to the protocol layer.
 6. The instrumented page is sent back to StaticServer, which responds to the browser with the instrumented version. Other files requested by the browser are simply returned directly by StaticServer.
 7. As the browser loads the page, it encounters the injected scripts. The transport script connects back to the NodeSocketTransport's WebSocket server created in step 3 and sends it a "connect" message to tell it what URL has been loaded in the browser. The NodeSocketTransport assigns the socket a client id so it can keep track of which socket is associated with which page instance, then raises a "connect" event.
 8. LivDevProtocol receives the "connect" event and makes a note of the associated client ID updating the current active connections. LiveDevelopment also receives the "connect" event, it checks that the URL that comes on the message matches the current live doc instance and updates session status to STATUS_ACTIVE in case this is the first client connected.
@@ -81,3 +66,8 @@ After the live document is loaded in the browser, DocumentObserver scan related
 * the "agents" are all gone - a lot of them were dead code anyway; other functionality was rolled into LiveDocument
 * communication is factored into transport and protocol layers (see above)
 * HTMLInstrumentation and HTMLSimpleDOM were modified slightly (which is why they're copied into the extension), to make it possible to inject the remote scripts and to fix an issue with re-instrumenting the HTML when a second browser connects to Live Development. The former change is harmless; the latter change would need some review or possibly more work in order to merge into master. 
+
+
+#### Unit tests
+
+We would definitely need a good suite of unit tests for the new functionality. There are just a few integration tests that were 'migrated' from the current suite of LiveDevelopment but, it would need more granular unit tests and be able to run them on multiple browsers.

From 8d4e9381e3f7ef42a0062fd4a015d85adb21ad89 Mon Sep 17 00:00:00 2001
From: Sebastian Salvucci <sebastian.salvucci@intel.com>
Date: Mon, 24 Nov 2014 11:28:44 -0300
Subject: [PATCH 17/17] clean-up

---
 src/LiveDevelopment/LiveDevMultiBrowser.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/LiveDevelopment/LiveDevMultiBrowser.js b/src/LiveDevelopment/LiveDevMultiBrowser.js
index a7de3b59907..21f5f8dd57b 100644
--- a/src/LiveDevelopment/LiveDevMultiBrowser.js
+++ b/src/LiveDevelopment/LiveDevMultiBrowser.js
@@ -483,11 +483,10 @@ define(function (require, exports, module) {
                 _server = null;
             }
         }
-        if (doCloseWindow) {
-            if (brackets.platform === "mac") {
-                NativeApp.closeLiveBrowser();
-            }
-        }
+    //TODO: implement closeWindow together with launchers.
+//        if (doCloseWindow) {
+//            
+//        }
         _setStatus(STATUS_INACTIVE, reason || "explicit_close");
     }