Show reason why live preview was cancelled

src/LiveDevelopment/LiveDevelopment.js

@@ -42,14 +42,23 @@
  * # STATUS
  *
  * Status updates are dispatched as `statusChange` jQuery events. The status
- * codes are:
+ * 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 to the remote debugger
  *  2: Loading agents
  *  3: Active
  *  4: Out of sync
+ *
+ * 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)
+ * - "detached_replaced_with_devtools" (The developer tools were opened in the browser)
  */
 define(function LiveDevelopment(require, exports, module) {
     "use strict";
@@ -134,7 +143,8 @@ define(function LiveDevelopment(require, exports, module) {
     var _liveDocument;        // the document open for live editing.
     var _relatedDocuments;    // CSS and JS documents that are used by the live HTML document
     var _serverProvider;      // current LiveDevServerProvider
-
+    var _closeReason;         // reason why live preview was closed
+
     function _isHtmlFileExt(ext) {
         return (FileUtils.isStaticHtmlFileExt(ext) ||
                 (ProjectManager.getBaseUrl() && FileUtils.isServerHtmlFileExt(ext)));
@@ -414,8 +424,14 @@ define(function LiveDevelopment(require, exports, module) {
      * @param {integer} new status
      */
     function _setStatus(status) {
+        // Don't send a notification when the status didn't actually change
+        if (status === exports.status) {
+            return;
+        }
+
         exports.status = status;
-        $(exports).triggerHandler("statusChange", status);
+        var reason = status === STATUS_INACTIVE ? _closeReason : null;
+        $(exports).triggerHandler("statusChange", [status, reason]);
     }
 
     /** Triggered by Inspector.error */
@@ -468,13 +484,6 @@ define(function LiveDevelopment(require, exports, module) {
             });
     }
 
-    /** Triggered by Inspector.detached */
-    function _onDetached(event, res) {
-        // res.reason, e.g. "replaced_with_devtools", "target_closed", "canceled_by_user"
-        // Sample list taken from https://chromiumcodereview.appspot.com/10947037/patch/12001/13004
-        // However, the link refers to the Chrome Extension API, it may not apply 100% to the Inspector API
-    }
-
     // WebInspector Event: Page.frameNavigated
     function _onFrameNavigated(event, res) {
         // res = {frame}
@@ -503,25 +512,37 @@ define(function LiveDevelopment(require, exports, module) {
         if (!url.match(baseUrlRegExp)) {
             // No longer in site, so terminate live dev, but don't close browser window
             Inspector.disconnect();
+            _closeReason = "navigated_away";
             _setStatus(STATUS_INACTIVE);
             _serverProvider = null;
         }
     }
 
     /** Triggered by Inspector.disconnect */
     function _onDisconnect(event) {
-        $(Inspector.Inspector).off("detached", _onDetached);
         $(Inspector.Page).off("frameNavigated.DOMAgent", _onFrameNavigated);
 
         unloadAgents();
         _closeDocument();
         _setStatus(STATUS_INACTIVE);
     }
 
+    function _onDetached(event, res) {
+        // If there already is a reason for closing the session, do not overwrite it
+        if (!_closeReason) {
+            // Get the explanation from res.reason, e.g. "replaced_with_devtools", "target_closed", "canceled_by_user"
+            // Examples taken from https://chromiumcodereview.appspot.com/10947037/patch/12001/13004
+            // However, the link refers to the Chrome Extension API, it may not apply 100% to the Inspector API
+            // Prefix with "detached_" to create a quasi-namespace for Chrome's reasons
+            _closeReason = "detached_" + res.reason;
+        }
+    }
+
     function reconnect() {
         unloadAgents();
-        var promises = loadAgents();
+
         _setStatus(STATUS_LOADING_AGENTS);
+        var promises = loadAgents();
         $.when.apply(undefined, promises).done(_onLoad).fail(_onError);
     }
 
@@ -533,6 +554,8 @@ define(function LiveDevelopment(require, exports, module) {
         var browserStarted = false;
         var retryCount = 0;
 
+        _closeReason = null;
+
         function showWrongDocError() {
             Dialogs.showModalDialog(
                 Dialogs.DIALOG_ID_ERROR,
@@ -703,6 +726,8 @@ define(function LiveDevelopment(require, exports, module) {
      * @return {jQuery.Promise} Resolves once the connection is closed
      */
     function close() {
+        _closeReason = "explicit_close";
+
         var deferred = $.Deferred();
 
         /*
@@ -813,7 +838,6 @@ define(function LiveDevelopment(require, exports, module) {
             }
         }
 
-        $(Inspector.Inspector).on("detached", _onDetached);
         $(Inspector.Page).on("frameNavigated.DOMAgent", _onFrameNavigated);
 
         waitForInterstitialPageLoad()
@@ -945,6 +969,7 @@ define(function LiveDevelopment(require, exports, module) {
         $(Inspector).on("connect", _onConnect)
             .on("disconnect", _onDisconnect)
             .on("error", _onError);
+        $(Inspector.Inspector).on("detached", _onDetached);
         $(DocumentManager).on("currentDocumentChange", _onDocumentChange)
             .on("documentSaved", _onDocumentSaved)
             .on("dirtyFlagChange", _onDirtyFlagChange);

src/LiveDevelopment/main.js

@@ -48,6 +48,7 @@ define(function main(require, exports, module) {
         Dialogs             = require("widgets/Dialogs"),
         UrlParams           = require("utils/UrlParams").UrlParams,
         Strings             = require("strings"),
+        StringUtils         = require("utils/StringUtils"),
         ExtensionUtils      = require("utils/ExtensionUtils");
 
     var prefs;
@@ -131,17 +132,48 @@ define(function main(require, exports, module) {
         }
     }
 
+    /** 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: "below",
+            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 = $("#toolbar-go-live");
         _$btnGoLive.click(function onGoLive() {
             _handleGoLiveCommand();
         });
-        $(LiveDevelopment).on("statusChange", function statusChange(event, status) {
+        $(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);
             if (config.autoconnect) {
                 window.sessionStorage.setItem("live.enabled", status === 3);
             }

src/brackets.js

@@ -53,6 +53,7 @@ define(function (require, exports, module) {
     // Load dependent non-module scripts
     require("widgets/bootstrap-dropdown");
     require("widgets/bootstrap-modal");
+    require("widgets/bootstrap-twipsy-mod");
     require("thirdparty/path-utils/path-utils.min");
     require("thirdparty/smart-auto-complete/jquery.smart_autocomplete");
 

src/nls/root/strings.js

@@ -87,6 +87,11 @@ define({
     "LIVE_DEV_STATUS_TIP_PROGRESS2"     : "Live Preview: Initializing\u2026",
     "LIVE_DEV_STATUS_TIP_CONNECTED"     : "Disconnect Live Preview",
     "LIVE_DEV_STATUS_TIP_OUT_OF_SYNC"   : "Live Preview: Click to disconnect (Save file to update)",
+
+    "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS" : "Live Preview was cancelled because the browser's developer tools were opened",
+    "LIVE_DEV_DETACHED_TARGET_CLOSED"          : "Live Preview was cancelled because the page was closed in the browser",
+    "LIVE_DEV_NAVIGATED_AWAY"                  : "Live Preview was cancelled because the browser navigated to a page that is not part of the current project",
+    "LIVE_DEV_CLOSED_UNKNOWN_REASON"           : "Live Preview was cancelled for an unknown reason ({0})",
 
     "SAVE_CLOSE_TITLE"                  : "Save Changes",
     "SAVE_CLOSE_MESSAGE"                : "Do you want to save the changes you made in the document <span class='dialog-filename'>{0}</span>?",

src/styles/brackets_patterns_override.less

@@ -490,4 +490,10 @@
         -o-user-select: text;
         user-select: text;
     }
+}
+
+/* Twipsy tooltips */
+.twipsy-inner {
+    max-width: none;
+    white-space: nowrap;
 }