Merge pull request #7119 from adobe/jasonsanjose/live-dev-fixes

Do not close/reopen live preview on currentDocumentChange

Author: redmunds

src/LiveDevelopment/Agents/NetworkAgent.js

@@ -64,9 +64,14 @@ define(function NetworkAgent(require, exports, module) {
         _logURL(res.request.url);
     }
 
+    function _reset() {
+        _urlRequested = {};
+    }
+
     // WebInspector Event: Page.frameNavigated
     function _onFrameNavigated(event, res) {
         // res = {frame}
+        _reset();
         _logURL(res.frame.url);
     }
 
@@ -86,8 +91,7 @@ define(function NetworkAgent(require, exports, module) {
 
     /** Unload the agent */
     function unload() {
-        _urlRequested = {};
-
+        _reset();
         $(Inspector.Page).off(".NetworkAgent");
         $(Inspector.Network).off(".NetworkAgent");
     }

src/LiveDevelopment/Agents/RemoteAgent.js

@@ -121,18 +121,11 @@ define(function RemoteAgent(require, exports, module) {
             call("keepAlive");
         }, 1000);
     }
-
-    /**
-     * @private
-     * Cancel the keepAlive interval if the page reloads
-     */
-    function _onFrameStartedLoading(event, res) {
-        _stopKeepAliveInterval();
-    }
-
+    
     // WebInspector Event: Page.frameNavigated
     function _onFrameNavigated(event, res) {
         // res = {timestamp}
+        _stopKeepAliveInterval();
 
         // inject RemoteFunctions
         var command = "window._LD=" + RemoteFunctions + "(" + LiveDevelopment.config.experimental + ");";
@@ -153,7 +146,7 @@ define(function RemoteAgent(require, exports, module) {
     function load() {
         _load = new $.Deferred();
         $(Inspector.Page).on("frameNavigated.RemoteAgent", _onFrameNavigated);
-        $(Inspector.Page).on("frameStartedLoading.RemoteAgent", _onFrameStartedLoading);
+        $(Inspector.Page).on("frameStartedLoading.RemoteAgent", _stopKeepAliveInterval);
         $(Inspector.DOM).on("attributeModified.RemoteAgent", _onAttributeModified);
 
         return _load.promise();

src/LiveDevelopment/Agents/ScriptAgent.js

@@ -117,10 +117,25 @@ define(function ScriptAgent(require, exports, module) {
 
     }
 
-    /** Initialize the agent */
-    function load() {
+    function _reset() {
         _urlToScript = {};
         _idToScript = {};
+    }
+
+    /**
+     * @private
+     * WebInspector Event: Page.frameNavigated
+     * @param {jQuery.Event} event
+     * @param {frame: Frame} res
+     */
+    function _onFrameNavigated(event, res) {
+        // Clear maps when navigating to a new page
+        _reset();
+    }
+
+    /** Initialize the agent */
+    function load() {
+        _reset();
         _load = new $.Deferred();
 
         var enableResult = new $.Deferred();
@@ -131,6 +146,7 @@ define(function ScriptAgent(require, exports, module) {
             });
         });
 
+        $(Inspector.Page).on("frameNavigated.ScriptAgent", _onFrameNavigated);
         $(DOMAgent).on("getDocument.ScriptAgent", _onGetDocument);
         $(Inspector.Debugger)
             .on("scriptParsed.ScriptAgent", _onScriptParsed)
@@ -143,6 +159,8 @@ define(function ScriptAgent(require, exports, module) {
 
     /** Clean up */
     function unload() {
+        _reset();
+        $(Inspector.Page).off(".ScriptAgent");
         $(DOMAgent).off(".ScriptAgent");
         $(Inspector.Debugger).off(".ScriptAgent");
         $(Inspector.DOM).off(".ScriptAgent");

src/LiveDevelopment/Inspector/Inspector.js

@@ -88,8 +88,13 @@ define(function Inspector(require, exports, module) {
     // jQuery exports object for events
     var $exports = $(exports);
 
+    /**
+     * Map message IDs to the callback function and original JSON message
+     * @type {Object.<number, {callback: function, message: Object}}
+     */
+    var _messageCallbacks = {};
+
     var _messageId = 1; // id used for remote method calls, auto-incrementing
-    var _messageCallbacks = {}; // {id -> function} for remote method calls
     var _socket; // remote debugger WebSocket
     var _connectDeferred; // The deferred connect
 
@@ -125,7 +130,7 @@ define(function Inspector(require, exports, module) {
             return (new $.Deferred()).reject().promise();
         }
 
-        var id, callback, args, i, params = {}, promise;
+        var id, callback, args, i, params = {}, promise, msg;
 
         // extract the parameters, the callback function, and the message id
         args = Array.prototype.slice.call(arguments, 2);
@@ -144,7 +149,6 @@ define(function Inspector(require, exports, module) {
         }
 
         id = _messageId++;
-        _messageCallbacks[id] = callback;
 
         // verify the parameters against the method signature
         // this also constructs the params object of type {name -> value}
@@ -156,7 +160,10 @@ define(function Inspector(require, exports, module) {
             }
         }
 
-        _socket.send(JSON.stringify({ method: method, id: id, params: params }));
+        // Store message callback and send message
+        msg = { method: method, id: id, params: params };
+        _messageCallbacks[id] = { callback: callback, message: msg };
+        _socket.send(JSON.stringify(msg));
 
         return promise;
     }
@@ -204,10 +211,12 @@ define(function Inspector(require, exports, module) {
      * @param {object} message
      */
     function _onMessage(message) {
-        var response = JSON.parse(message.data),
-            callback = _messageCallbacks[response.id];
+        var response    = JSON.parse(message.data),
+            msgRecord   = _messageCallbacks[response.id],
+            callback    = msgRecord && msgRecord.callback,
+            msgText     = (msgRecord && msgRecord.message) || "No message";
 
-        if (callback) {
+        if (msgRecord) {
             // Messages with an ID are a response to a command, fire callback
             callback(response.result, response.error);
             delete _messageCallbacks[response.id];
@@ -224,7 +233,7 @@ define(function Inspector(require, exports, module) {
         $exports.triggerHandler("message", [response]);
 
         if (response.error) {
-            $exports.triggerHandler("error", [response.error]);
+            $exports.triggerHandler("error", [response.error, msgText]);
         }
     }
 

src/LiveDevelopment/LiveDevelopment.js

@@ -407,7 +407,7 @@ define(function LiveDevelopment(require, exports, module) {
     }
 
     /** Triggered by Inspector.error */
-    function _onError(event, error) {
+    function _onError(event, error, msgData) {
         var message;
 
         // Sometimes error.message is undefined
@@ -430,7 +430,7 @@ define(function LiveDevelopment(require, exports, module) {
         }
 
         // Show the message, but include the error object for further information (e.g. error code)
-        console.error(message, error);
+        console.error(message, error, msgData);
     }
 
     function _styleSheetAdded(event, url) {
@@ -1106,19 +1106,22 @@ define(function LiveDevelopment(require, exports, module) {
             }
         });
     }
+
+    function _createLiveDocumentForFrame(doc) {
+        // create live document
+        doc._ensureMasterEditor();
+        _liveDocument = _createDocument(doc, doc._masterEditor);
+        _server.add(_liveDocument);
+    }
 
     // helper function that actually does the launch once we are sure we have
     // a doc and the server for that doc is up and running.
     function _doLaunchAfterServerReady(initialDoc) {
         // update status
         _setStatus(STATUS_CONNECTING);
-        
-        // create live document
-        initialDoc._ensureMasterEditor();
-        _liveDocument = _createDocument(initialDoc, initialDoc._masterEditor);
+        _createLiveDocumentForFrame(initialDoc);
 
         // start listening for requests
-        _server.add(_liveDocument);
         _server.start();
 
         // Install a one-time event handler when connected to the launcher page
@@ -1255,9 +1258,22 @@ define(function LiveDevelopment(require, exports, module) {
             isViewable = exports.config.experimental || (_server && _server.canServe(doc.file.fullPath));
 
         if (!wasRequested && isViewable) {
-            // TODO (jasonsanjose): optimize this by reusing the same connection
-            // no need to fully teardown.
-            close().done(open);
+            // Update status
+            _setStatus(STATUS_CONNECTING);
+
+            // clear live doc and related docs
+            _closeDocuments();
+
+            // create new live doc
+            _createLiveDocumentForFrame(doc);
+
+            // Navigate to the new page within this site. Agents must handle
+            // frameNavigated event to clear any saved state.
+            Inspector.Page.navigate(docUrl).then(function () {
+                _setStatus(STATUS_ACTIVE);
+            }, function () {
+                _close(false, "closed_unknown_reason");
+            });
         } else if (wasRequested) {
             // Update highlight
             showHighlight();

src/LiveDevelopment/Servers/BaseServer.js

@@ -169,6 +169,10 @@ define(function (require, exports, module) {
      * @param {Object} liveDocument
      */
     BaseServer.prototype.add = function (liveDocument) {
+        if (!liveDocument) {
+            return;
+        }
+        
         // use the project relative path as a key to lookup requests
         var key = this._documentKey(liveDocument.doc.file.fullPath);
 
@@ -181,6 +185,10 @@ define(function (require, exports, module) {
      * @param {Object} liveDocument
      */
     BaseServer.prototype.remove = function (liveDocument) {
+        if (!liveDocument) {
+            return;
+        }
+        
         var key = this._liveDocuments[this._documentKey(liveDocument.doc.file.fullPath)];
 
         if (key) {

src/nls/root/strings.js

@@ -77,21 +77,21 @@ define({
     "ERROR_MAX_FILES_TITLE"             : "Error Indexing Files",
     "ERROR_MAX_FILES"                   : "The maximum number of files have been indexed. Actions that look up files in the index may function incorrectly.",
 
-    // Live Development error strings
+    // Live Preview error strings
     "ERROR_LAUNCHING_BROWSER_TITLE"     : "Error launching browser",
     "ERROR_CANT_FIND_CHROME"            : "The Google Chrome browser could not be found. Please make sure it is installed.",
     "ERROR_LAUNCHING_BROWSER"           : "An error occurred when launching the browser. (error {0})",
 
     "LIVE_DEVELOPMENT_ERROR_TITLE"      : "Live Preview Error",
     "LIVE_DEVELOPMENT_RELAUNCH_TITLE"   : "Connecting to Browser",
     "LIVE_DEVELOPMENT_ERROR_MESSAGE"    : "In order for Live Preview to connect, Chrome needs to be relaunched with remote debugging enabled.<br /><br />Would you like to relaunch Chrome and enable remote debugging?",
-    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Unable to load Live Development page",
+    "LIVE_DEV_LOADING_ERROR_MESSAGE"    : "Unable to load Live Preview page",
     "LIVE_DEV_NEED_HTML_MESSAGE"        : "Open an HTML file or make sure there is an index.html file in your project in order to launch live preview.",
     "LIVE_DEV_NEED_BASEURL_MESSAGE"     : "To launch live preview with a server-side file, you need to specify a Base URL for this project.",
-    "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Error starting up the HTTP server for live development files. Please try again.",
+    "LIVE_DEV_SERVER_NOT_READY_MESSAGE" : "Error starting up the HTTP server for live preview files. Please try again.",
     "LIVE_DEVELOPMENT_INFO_TITLE"       : "Welcome to Live Preview!",
     "LIVE_DEVELOPMENT_INFO_MESSAGE"     : "Live Preview connects {APP_NAME} to your browser. It launches a preview of your HTML file in the browser, then updates the preview instantly as you edit your code.<br /><br />In this early version of {APP_NAME}, Live Preview only works with <strong>Google Chrome</strong> and updates live as you edit <strong>CSS or HTML files</strong>. Changes to JavaScript files are automatically reloaded when you save.<br /><br />(You'll only see this message once.)",
-    "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "For more information, see <a href='{0}' title='{0}'>Troubleshooting Live Development connection errors</a>.",
+    "LIVE_DEVELOPMENT_TROUBLESHOOTING"  : "For more information, see <a href='{0}' title='{0}'>Troubleshooting Live Preview connection errors</a>.",
 
     "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Live Preview",
     "LIVE_DEV_STATUS_TIP_PROGRESS1"     : "Live Preview: Connecting\u2026",