diff --git a/src/LiveDevelopment/Agents/ConsoleAgent.js b/src/LiveDevelopment/Agents/ConsoleAgent.js index 68c845a6c03..e0d479cc294 100644 --- a/src/LiveDevelopment/Agents/ConsoleAgent.js +++ b/src/LiveDevelopment/Agents/ConsoleAgent.js @@ -45,6 +45,9 @@ define(function ConsoleAgent(require, exports, module) { level = "warn"; } var text = "ConsoleAgent: " + message.text; + if (message.url) { + text += " (url: " + message.url + ")"; + } if (message.stackTrace) { var callFrame = message.stackTrace[0]; text += " in " + callFrame.functionName + ":" + callFrame.columnNumber; diff --git a/src/LiveDevelopment/Agents/NetworkAgent.js b/src/LiveDevelopment/Agents/NetworkAgent.js index cb7460e7e66..5852df47ee2 100644 --- a/src/LiveDevelopment/Agents/NetworkAgent.js +++ b/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"); } diff --git a/src/LiveDevelopment/Agents/RemoteAgent.js b/src/LiveDevelopment/Agents/RemoteAgent.js index a7b67d5daa2..7c8b596ff42 100644 --- a/src/LiveDevelopment/Agents/RemoteAgent.js +++ b/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(); diff --git a/src/LiveDevelopment/Agents/ScriptAgent.js b/src/LiveDevelopment/Agents/ScriptAgent.js index 58014f9dec0..a4c01505c66 100644 --- a/src/LiveDevelopment/Agents/ScriptAgent.js +++ b/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"); diff --git a/src/LiveDevelopment/Inspector/Inspector.js b/src/LiveDevelopment/Inspector/Inspector.js index 6baac318dcb..40713abd836 100644 --- a/src/LiveDevelopment/Inspector/Inspector.js +++ b/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. 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]); } } diff --git a/src/LiveDevelopment/LiveDevelopment.js b/src/LiveDevelopment/LiveDevelopment.js index e99787caa70..bac15ddf5cb 100644 --- a/src/LiveDevelopment/LiveDevelopment.js +++ b/src/LiveDevelopment/LiveDevelopment.js @@ -22,7 +22,7 @@ */ /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, forin: true, maxerr: 50, regexp: true */ -/*global define, $, brackets, window */ +/*global define, $, brackets, window, open */ /** * LiveDevelopment manages the Inspector, all Agents, and the active LiveDocument @@ -156,6 +156,9 @@ define(function LiveDevelopment(require, exports, module) { var _relatedDocuments = {}; var _openDeferred; // promise returned for each call to open() + + // Disallow re-entrancy of loadAgents() + var _loadAgentsPromise; /** * Current live preview server @@ -404,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 @@ -427,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) { @@ -522,11 +525,18 @@ define(function LiveDevelopment(require, exports, module) { /** Load the agents */ function loadAgents() { + // If we're already loading agents return same promise + if (_loadAgentsPromise) { + return _loadAgentsPromise; + } + var result = new $.Deferred(), promises = [], enableAgentsPromise, allAgentsPromise; + _loadAgentsPromise = result.promise(); + _setStatus(STATUS_LOADING_AGENTS); // load agents in parallel @@ -562,18 +572,22 @@ define(function LiveDevelopment(require, exports, module) { allAgentsPromise.fail(result.reject); - // show error loading live dev dialog - result.fail(function () { - _setStatus(STATUS_ERROR); - - Dialogs.showModalDialog( - Dialogs.DIALOG_ID_ERROR, - Strings.LIVE_DEVELOPMENT_ERROR_TITLE, - Strings.LIVE_DEV_LOADING_ERROR_MESSAGE - ); - }); + _loadAgentsPromise + .fail(function () { + // show error loading live dev dialog + _setStatus(STATUS_ERROR); - return result.promise(); + Dialogs.showModalDialog( + Dialogs.DIALOG_ID_ERROR, + Strings.LIVE_DEVELOPMENT_ERROR_TITLE, + Strings.LIVE_DEV_LOADING_ERROR_MESSAGE + ); + }) + .always(function () { + _loadAgentsPromise = null; + }); + + return _loadAgentsPromise; } /** @@ -713,7 +727,12 @@ define(function LiveDevelopment(require, exports, module) { $(Inspector.Page).off(".livedev"); $(Inspector).off(".livedev"); - unloadAgents(); + // Wait if agents are loading + if (_loadAgentsPromise) { + _loadAgentsPromise.always(unloadAgents); + } else { + unloadAgents(); + } // Close live documents _closeDocuments(); @@ -844,10 +863,16 @@ define(function LiveDevelopment(require, exports, module) { /** * Unload and reload agents + * @return {jQuery.Promise} Resolves once the agents are loaded */ function reconnect() { + if (_loadAgentsPromise) { + // Agents are already loading, so don't unload + return _loadAgentsPromise; + } + unloadAgents(); - loadAgents(); + return loadAgents(); } /** @@ -863,7 +888,7 @@ define(function LiveDevelopment(require, exports, module) { * Create a promise that resolves when the interstitial page has * finished loading. * - * @return {jQuery.Promise} + * @return {jQuery.Promise} Resolves once page is loaded */ function _waitForInterstitialPageLoad() { var deferred = $.Deferred(), @@ -917,7 +942,7 @@ define(function LiveDevelopment(require, exports, module) { loadAgents().then(_openDeferred.resolve, _openDeferred.reject); _getInitialDocFromCurrent().done(function (doc) { - if (doc) { + if (doc && _liveDocument && doc === _liveDocument.doc) { // Navigate from interstitial to the document // Fires a frameNavigated event if (_server) { @@ -978,14 +1003,14 @@ define(function LiveDevelopment(require, exports, module) { var browserStarted = false, retryCount = 0; - // Open the live browser if the connection fails, retry 6 times + // Open the live browser if the connection fails, retry 3 times Inspector.connectToURL(launcherUrl).fail(function onConnectFail(err) { if (err === "CANCEL") { _openDeferred.reject(err); return; } - if (retryCount > 6) { + if (retryCount > 3) { _setStatus(STATUS_ERROR); var dialogPromise = Dialogs.showModalDialog( @@ -1013,10 +1038,8 @@ define(function LiveDevelopment(require, exports, module) { _close() .done(function () { browserStarted = false; - window.setTimeout(function () { - // After browser closes, try to open the interstitial page again - _openInterstitialPage(); - }); + // Continue to use _openDeferred + open(true); }) .fail(function (err) { // Report error? @@ -1079,23 +1102,26 @@ define(function LiveDevelopment(require, exports, module) { if (exports.status !== STATUS_ERROR) { window.setTimeout(function retryConnect() { Inspector.connectToURL(launcherUrl).fail(onConnectFail); - }, 500); + }, 3000); } }); } + + 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 @@ -1147,9 +1173,16 @@ define(function LiveDevelopment(require, exports, module) { return deferred.promise(); } - /** Open the Connection and go live */ - function open() { - _openDeferred = new $.Deferred(); + /** + * Open the Connection and go live + * + * @param {!boolean} restart true if relaunching and _openDeferred already exists + * @return {jQuery.Promise} Resolves once live preview is open + */ + function open(restart) { + if (!restart) { + _openDeferred = new $.Deferred(); + } // Cleanup deferred when finished _openDeferred.always(function () { @@ -1225,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(); @@ -1258,6 +1304,10 @@ define(function LiveDevelopment(require, exports, module) { if (wasRequested) { // Unload and reload agents before reloading the page + // Some agents (e.g. DOMAgent and RemoteAgent) require us to + // navigate to the page first before loading can complete. + // To accomodate this, we load all agents (in reconnect()) + // and navigate in parallel. reconnect(); // Reload HTML page diff --git a/src/LiveDevelopment/Servers/BaseServer.js b/src/LiveDevelopment/Servers/BaseServer.js index aab6c66edfd..ac7e25fab4f 100644 --- a/src/LiveDevelopment/Servers/BaseServer.js +++ b/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) { diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 657511bb586..0e244147d58 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -77,7 +77,7 @@ 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})", @@ -85,13 +85,13 @@ define({ "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.

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.

In this early version of {APP_NAME}, Live Preview only works with Google Chrome and updates live as you edit CSS or HTML files. Changes to JavaScript files are automatically reloaded when you save.

(You'll only see this message once.)", - "LIVE_DEVELOPMENT_TROUBLESHOOTING" : "For more information, see Troubleshooting Live Development connection errors.", + "LIVE_DEVELOPMENT_TROUBLESHOOTING" : "For more information, see Troubleshooting Live Preview connection errors.", "LIVE_DEV_STATUS_TIP_NOT_CONNECTED" : "Live Preview", "LIVE_DEV_STATUS_TIP_PROGRESS1" : "Live Preview: Connecting\u2026",