Show reason why live preview was cancelled

src/LiveDevelopment/Inspector/Inspector.js

@@ -301,6 +301,8 @@ define(function Inspector(require, exports, module) {
      * -> Inspector.domain.command()
      */
     function init(theConfig) {
+        var result = new $.Deferred();
+
         exports.config = theConfig;
 
         var InspectorText = require("text!LiveDevelopment/Inspector/Inspector.json"),

src/LiveDevelopment/LiveDevelopment.js

@@ -120,7 +120,7 @@ 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
-
+    
     function _isHtmlFileExt(ext) {
         return (FileUtils.isStaticHtmlFileExt(ext) ||
                 (ProjectManager.getBaseUrl() && FileUtils.isServerHtmlFileExt(ext)));
@@ -454,13 +454,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}
@@ -496,7 +489,6 @@ define(function LiveDevelopment(require, exports, module) {
 
     /** Triggered by Inspector.disconnect */
     function _onDisconnect(event) {
-        $(Inspector.Inspector).off("detached", _onDetached);
         $(Inspector.Page).off("frameNavigated.DOMAgent", _onFrameNavigated);
 
         unloadAgents();
@@ -506,8 +498,9 @@ define(function LiveDevelopment(require, exports, module) {
 
     function reconnect() {
         unloadAgents();
-        var promises = loadAgents();
+
         _setStatus(STATUS_LOADING_AGENTS);
+        var promises = loadAgents();
         $.when.apply(undefined, promises).done(_onLoad).fail(_onError);
     }
 
@@ -802,7 +795,6 @@ define(function LiveDevelopment(require, exports, module) {
             }
         }
 
-        $(Inspector.Inspector).on("detached", _onDetached);
         $(Inspector.Page).on("frameNavigated.DOMAgent", _onFrameNavigated);
 
         waitForInterstitialPageLoad()

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;
@@ -113,6 +114,9 @@ define(function main(require, exports, module) {
 
     /** Toggles LiveDevelopment and synchronizes the state of UI elements that reports LiveDevelopment status */
     function _handleGoLiveCommand() {
+        // Hide the tooltip that shows the reason why live preview was cancelled
+        _$btnGoLive.twipsy("hide");
+
         if (LiveDevelopment.status >= LiveDevelopment.STATUS_CONNECTING) {
             LiveDevelopment.close();
         } else {
@@ -131,6 +135,32 @@ define(function main(require, exports, module) {
         }
     }
 
+    /** Triggered by Inspector.detached */
+    function _onDetached(event, res) {
+        // Get the explanation using 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
+        var reason = Strings["LIVE_DEV_" + res.reason.toUpperCase()];
+        if (!reason) {
+            reason = StringUtils.format(Strings.LIVE_DEV_DETACHED_UNKNOWN_REASON, res.reason);
+        }
+
+        // Tooltip options
+        var options = {
+            placement: "below",
+            trigger: "manual",
+            autoHideDelay: 5000,
+            title: function () {
+                return reason;
+            }
+        };
+
+        // Destroy the previous twipsy (options are not updated otherwise)    
+        _$btnGoLive.twipsy("hide").removeData("twipsy");
+        // Show a tooltip explaning why live preview was cancelled
+        _$btnGoLive.twipsy(options).twipsy("show");
+    }
+
     /** Create the menu item "Go Live" */
     function _setupGoLiveButton() {
         _$btnGoLive = $("#toolbar-go-live");
@@ -183,11 +213,15 @@ define(function main(require, exports, module) {
         window.report = function report(params) { window.params = params; console.info(params); };
     }
 
+    function _onInspectorDone() {
+    }
+
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
         params.parse();
 
         Inspector.init(config);
+        $(Inspector.Inspector).on("detached", _onDetached);
         LiveDevelopment.init(config);
         _loadStyles();
         _setupGoLiveButton();

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,9 @@ 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_REPLACED_WITH_DEVTOOLS"   : "Live Preview was cancelled by opening Chrome's Developer Tools",
+    "LIVE_DEV_TARGET_CLOSED"            : "Live Preview was cancelled by closing the page",
+    "LIVE_DEV_DETACHED_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;
 }