fix: live preview overlay not appearing on initial load

Author: devvaannsh

src/LiveDevelopment/main.js

@@ -273,122 +273,6 @@ define(function main(require, exports, module) {
         return false;
     }
 
-    let $livePreviewPanel = null; // stores the live preview panel, need this as overlay is appended inside this
-    let $overlayContainer = null; // the overlay container
-    let shouldShowSyncErrorOverlay = true; // once user closes the overlay we don't show them again
-    let shouldShowConnectingOverlay = true;
-    let connectingOverlayTimer = null; // this is needed as we show the connecting overlay after 3s
-    let connectingOverlayTimeDuration = 3000;
-
-    /**
-     * this function is responsible to check whether to show the overlay or not and how it should be shown
-     * because if user has closed the overlay manually, we don't show it again
-     * secondly, for connecting overlay we show that after a 3s timer, but sync error overlay is shown immediately
-     * @param {String} textMessage - the text that is written inside the overlay
-     * @param {Number} status - 1 for connect, 4 for sync error but we match it using MultiBrowserLiveDev
-     */
-    function _handleOverlay(textMessage, status) {
-        if (!$livePreviewPanel) {
-            $livePreviewPanel = $("#panel-live-preview");
-        }
-
-        // remove any existing overlay & timer
-        _hideOverlay();
-
-        // to not show the overlays if user has already closed it before
-        if(status === MultiBrowserLiveDev.STATUS_CONNECTING && !shouldShowConnectingOverlay) { return; }
-        if(status === MultiBrowserLiveDev.STATUS_SYNC_ERROR && !shouldShowSyncErrorOverlay) { return; }
-
-        // for connecting status, we delay showing the overlay by 3 seconds
-        if(status === MultiBrowserLiveDev.STATUS_CONNECTING) {
-            connectingOverlayTimer = setTimeout(() => {
-                _createAndShowOverlay(textMessage, status);
-                connectingOverlayTimer = null;
-            }, connectingOverlayTimeDuration);
-            return;
-        }
-
-        // for sync error status, show immediately
-        _createAndShowOverlay(textMessage, status);
-    }
-
-    /**
-     * this function is responsible to create & show the overlay.
-     * so overlay is shown when the live preview is connecting or live preview stopped because of some syntax error
-     * @param {String} textMessage - the text that is written inside the overlay
-     * @param {Number} status - 1 for connect, 4 for sync error but we match it using MultiBrowserLiveDev
-     */
-    function _createAndShowOverlay(textMessage, status) {
-        if (!$livePreviewPanel) {
-            $livePreviewPanel = $("#panel-live-preview");
-        }
-
-        // create the overlay element
-        // styled inside the 'src/extensionsIntegrated/Phoenix-live-preview/live-preview.css'
-        $overlayContainer = $("<div>").addClass("live-preview-status-overlay"); // the wrapper for overlay element
-        const $message = $("<div>").addClass("live-preview-overlay-message").text(textMessage);
-
-        // the close button at the right end of the overlay
-        const $close = $("<div>").addClass("live-preview-overlay-close")
-            .attr("title", Strings.LIVE_PREVIEW_HIDE_OVERLAY)
-            .on('click', () => {
-                if(status === MultiBrowserLiveDev.STATUS_CONNECTING) {
-                    shouldShowConnectingOverlay = false;
-                } else if(status === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
-                    shouldShowSyncErrorOverlay = false;
-                }
-                _hideOverlay();
-            });
-        const $closeIcon = $("<i>").addClass("fas fa-times");
-
-        $close.append($closeIcon);
-        $overlayContainer.append($message);
-        $overlayContainer.append($close);
-        $livePreviewPanel.append($overlayContainer);
-    }
-
-    /**
-     * responsible to hide the overlay
-     */
-    function _hideOverlay() {
-        _clearConnectingOverlayTimer();
-        if ($overlayContainer) {
-            $overlayContainer.remove();
-            $overlayContainer = null;
-        }
-    }
-
-    /**
-     * This is a helper function that just checks that if connectingOverlayTimer exists, we clear it
-     */
-    function _clearConnectingOverlayTimer() {
-        if (connectingOverlayTimer) {
-            clearTimeout(connectingOverlayTimer);
-            connectingOverlayTimer = null;
-        }
-    }
-
-    /**
-     * this function adds/remove the full-width class from the overlay container
-     * styled inside 'src/extensionsIntegrated/Phoenix-live-preview/live-preview.css'
-     *
-     * we need this because
-     * normally when live preview has a good width (more than 305px) then a 3px divider is shown at the left end
-     * so in that case we give the overlay a width of (100% - 3px),
-     * but when the live preview width is reduced
-     * then that divider line gets cut off, so in that case we make the width 100% for this overlay
-     *
-     * without this handling, a white gap appears on the left side, which is distracting
-     */
-    function _setOverlayWidth() {
-        if(!$overlayContainer || !$livePreviewPanel.length) { return; }
-        if($livePreviewPanel.width() <= 305) {
-            $overlayContainer.addClass("full-width");
-        } else {
-            $overlayContainer.removeClass("full-width");
-        }
-    }
-
     /** Initialize LiveDevelopment */
     AppInit.appReady(function () {
         params.parse();
@@ -443,19 +327,6 @@ define(function main(require, exports, module) {
             exports.trigger(exports.EVENT_LIVE_PREVIEW_RELOAD, clientDetails);
         });
 
-        MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_STATUS_CHANGE, function(event, status) {
-            if (status === MultiBrowserLiveDev.STATUS_CONNECTING) {
-                _handleOverlay(Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, status);
-            } else if (status === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
-                _handleOverlay(Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR, status);
-            } else {
-                _hideOverlay();
-            }
-        });
-        // to understand why we need this, pls read the _setOverlayWidth function
-        new ResizeObserver(_setOverlayWidth).observe($("#main-plugin-panel")[0]);
-        EditorManager.on("activeEditorChange", _hideOverlay);
-
         // allow live preview to handle escape key event
         // Escape is mainly to hide boxes if they are visible
         WorkspaceManager.addEscapeKeyEventHandler("livePreview", _handleLivePreviewEscapeKey);

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -171,18 +171,22 @@
 }
 
 .live-preview-overlay-message {
-    color: #fff;
+    color: #ededed;
     background-color: #666;
-    padding: 0.25em;
+    padding: 0.35em;
     vertical-align: top;
     text-align: center;
 }
 
 .live-preview-overlay-close {
     position: absolute;
-    top: 4px;
-    right: 10px;
+    top: 7px;
+    right: 12px;
     font-size: 12px;
     cursor: pointer;
+    color: #ededed;
+}
+
+.live-preview-overlay-close:hover {
     color: #fff;
 }

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -59,6 +59,7 @@ define(function (require, exports, module) {
         Metrics            = require("utils/Metrics"),
         LiveDevelopment    = require("LiveDevelopment/main"),
         LiveDevServerManager = require("LiveDevelopment/LiveDevServerManager"),
+        MultiBrowserLiveDev = require("LiveDevelopment/LiveDevMultiBrowser"),
         NativeApp           = require("utils/NativeApp"),
         StringUtils         = require("utils/StringUtils"),
         FileSystem          = require("filesystem/FileSystem"),
@@ -157,6 +158,13 @@ define(function (require, exports, module) {
     // so that when user unclicks the button we can revert back to the mode that was originally selected
     let modeThatWasSelected = null;
 
+    // live Preview overlay variables (overlays are shown when live preview is connecting or there's a syntax error)
+    let $overlayContainer = null; // the overlay container
+    let shouldShowSyncErrorOverlay = true; // once user closes the overlay we don't show them again
+    let shouldShowConnectingOverlay = true;
+    let connectingOverlayTimer = null; // this is needed as we show the connecting overlay after 3s
+    let connectingOverlayTimeDuration = 3000;
+
     StaticServer.on(EVENT_EMBEDDED_IFRAME_WHO_AM_I, function () {
         if($iframe && $iframe[0]) {
             const iframeDom = $iframe[0];
@@ -172,6 +180,111 @@ define(function (require, exports, module) {
         editor.focus();
     });
 
+    /**
+     * this function is responsible to check whether to show the overlay or not and how it should be shown
+     * because if user has closed the overlay manually, we don't show it again
+     * secondly, for connecting overlay we show that after a 3s timer, but sync error overlay is shown immediately
+     * @param {String} textMessage - the text that is written inside the overlay
+     * @param {Number} status - 1 for connect, 4 for sync error but we match it using MultiBrowserLiveDev
+     */
+    function _handleOverlay(textMessage, status) {
+        if (!$panel) { return; }
+
+        // remove any existing overlay & timer
+        _hideOverlay();
+
+        // to not show the overlays if user has already closed it before
+        if(status === MultiBrowserLiveDev.STATUS_CONNECTING && !shouldShowConnectingOverlay) { return; }
+        if(status === MultiBrowserLiveDev.STATUS_SYNC_ERROR && !shouldShowSyncErrorOverlay) { return; }
+
+        // for connecting status, we delay showing the overlay by 3 seconds
+        if(status === MultiBrowserLiveDev.STATUS_CONNECTING) {
+            connectingOverlayTimer = setTimeout(() => {
+                _createAndShowOverlay(textMessage, status);
+                connectingOverlayTimer = null;
+            }, connectingOverlayTimeDuration);
+            return;
+        }
+
+        // for sync error status, show immediately
+        _createAndShowOverlay(textMessage, status);
+    }
+
+    /**
+     * this function is responsible to create & show the overlay.
+     * so overlay is shown when the live preview is connecting or live preview stopped because of some syntax error
+     * @param {String} textMessage - the text that is written inside the overlay
+     * @param {Number} status - 1 for connect, 4 for sync error but we match it using MultiBrowserLiveDev
+     */
+    function _createAndShowOverlay(textMessage, status) {
+        if (!$panel) { return; }
+
+        // create the overlay element
+        // styled inside the 'live-preview.css'
+        $overlayContainer = $("<div>").addClass("live-preview-status-overlay"); // the wrapper for overlay element
+        const $message = $("<div>").addClass("live-preview-overlay-message").text(textMessage);
+
+        // the close button at the right end of the overlay
+        const $close = $("<div>").addClass("live-preview-overlay-close")
+            .attr("title", Strings.LIVE_PREVIEW_HIDE_OVERLAY)
+            .on('click', () => {
+                if(status === MultiBrowserLiveDev.STATUS_CONNECTING) {
+                    shouldShowConnectingOverlay = false;
+                } else if(status === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
+                    shouldShowSyncErrorOverlay = false;
+                }
+                _hideOverlay();
+            });
+        const $closeIcon = $("<i>").addClass("fas fa-times");
+
+        $close.append($closeIcon);
+        $overlayContainer.append($message);
+        $overlayContainer.append($close);
+        $panel.append($overlayContainer);
+    }
+
+    /**
+     * responsible to hide the overlay
+     */
+    function _hideOverlay() {
+        _clearConnectingOverlayTimer();
+        if ($overlayContainer) {
+            $overlayContainer.remove();
+            $overlayContainer = null;
+        }
+    }
+
+    /**
+     * This is a helper function that just checks that if connectingOverlayTimer exists, we clear it
+     */
+    function _clearConnectingOverlayTimer() {
+        if (connectingOverlayTimer) {
+            clearTimeout(connectingOverlayTimer);
+            connectingOverlayTimer = null;
+        }
+    }
+
+    /**
+     * this function adds/remove the full-width class from the overlay container
+     * styled inside 'live-preview.css'
+     *
+     * we need this because
+     * normally when live preview has a good width (more than 305px) then a 3px divider is shown at the left end
+     * so in that case we give the overlay a width of (100% - 3px),
+     * but when the live preview width is reduced
+     * then that divider line gets cut off, so in that case we make the width 100% for this overlay
+     *
+     * without this handling, a white gap appears on the left side, which is distracting
+     */
+    function _setOverlayWidth() {
+        if(!$overlayContainer || !$panel || !$panel.length) { return; }
+        if($panel.width() <= 305) {
+            $overlayContainer.addClass("full-width");
+        } else {
+            $overlayContainer.removeClass("full-width");
+        }
+    }
+
     function _showProFeatureDialog() {
         const dialog = Dialogs.showModalDialog(
             DefaultDialogs.DIALOG_ID_INFO,
@@ -743,6 +856,10 @@ define(function (require, exports, module) {
             _loadPreview(true, true);
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "reloadBtn", "click");
         });
+
+        // Set up ResizeObserver for overlay width adjustments
+        // to understand why we're doing this read _setOverlayWidth function
+        new ResizeObserver(_setOverlayWidth).observe($panel[0]);
     }
 
     async function _loadPreview(force, isReload) {
@@ -920,12 +1037,27 @@ define(function (require, exports, module) {
         }
     }
 
-    function _activeDocChanged() {
+    function _activeDocChanged(event, focusedEditor, lostEditor) {
         if(!LivePreviewSettings.isUsingCustomServer() && !LiveDevelopment.isActive()
             && (panel.isVisible() || StaticServer.hasActiveLivePreviews())) {
             // we do this only once after project switch if live preview for a doc is not active.
             LiveDevelopment.openLivePreview();
         }
+
+        // we hide the overlay when there's no editor or its a non-previewable file
+        if (!focusedEditor || !focusedEditor.document) {
+            _hideOverlay();
+            return;
+        }
+
+        const filePath = focusedEditor.document.file.fullPath;
+        const isPreviewable = utils.isPreviewableFile(filePath) || utils.isServerRenderedFile(filePath);
+        const customServeURL = LivePreviewSettings.isUsingCustomServer() &&
+            LivePreviewSettings.getCustomServerConfig(filePath);
+
+        if (!isPreviewable && !customServeURL) {
+            _hideOverlay();
+        }
     }
 
     /**
@@ -948,6 +1080,13 @@ define(function (require, exports, module) {
             console.error("Live preview URLs differ between phoenix live preview extension and core live preview",
                 currentPreviewDetails, previewDetails);
         }
+
+        const status = MultiBrowserLiveDev.status;
+        if (status === MultiBrowserLiveDev.STATUS_CONNECTING) {
+            _handleOverlay(Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, status);
+        } else if (status === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
+            _handleOverlay(Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR, status);
+        }
     }
 
     async function _currentFileChanged(_event, changedFile) {
@@ -1171,6 +1310,16 @@ define(function (require, exports, module) {
             _loadPreview(true);
         });
 
+        MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_STATUS_CHANGE, function(event, status) {
+            if (status === MultiBrowserLiveDev.STATUS_CONNECTING) {
+                _handleOverlay(Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, status);
+            } else if (status === MultiBrowserLiveDev.STATUS_SYNC_ERROR) {
+                _handleOverlay(Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR, status);
+            } else {
+                _hideOverlay();
+            }
+        });
+
         function refreshPreview() {
             StaticServer.getPreviewDetails().then((previewDetails)=>{
                 _openReadmeMDIfFirstTime();