chore: show bannew in live preview when custom server is in use

Author: abose

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

@@ -211,6 +211,10 @@ define(function (require, exports, module) {
         return PreferencesManager.get(PREFERENCE_PROJECT_SERVER_PATH) || "/";
     }
 
+    function getCustomServeBaseURL() {
+        return PreferencesManager.get(PREFERENCE_PROJECT_SERVER_URL) || "";
+    }
+
     function getCustomServerConfig(fullPath) {
         const customServer = _resolveServer();
         if(!customServer || !ProjectManager.isWithinProject(fullPath)) {
@@ -260,6 +264,7 @@ define(function (require, exports, module) {
 
     exports.showSettingsDialog = showSettingsDialog;
     exports.getCustomServerConfig = getCustomServerConfig;
+    exports.getCustomServeBaseURL = getCustomServeBaseURL;
     exports.getCustomServeRoot = getCustomServeRoot;
     exports.isUsingCustomServer = isUsingCustomServer;
     exports.getCustomServerFramework = getCustomServerFramework;

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

@@ -122,6 +122,8 @@ define(function (require, exports, module) {
         $firefoxButtonBallast,
         $panelTitle;
 
+    let customLivePreviewBannerShown = false;
+
     StaticServer.on(EVENT_EMBEDDED_IFRAME_WHO_AM_I, function () {
         if($iframe && $iframe[0]) {
             const iframeDom = $iframe[0];
@@ -398,6 +400,14 @@ define(function (require, exports, module) {
         $firefoxButtonBallast = $panel.find("#firefoxButtonBallast");
         $panelTitle = $panel.find("#panel-live-preview-title");
         $settingsIcon = $panel.find("#livePreviewSettingsBtn");
+
+        $panel.find(".live-preview-settings-banner-btn").on("click", ()=>{
+            CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW_SETTINGS);
+            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "settingsBtnBanner", "click");
+        });
+        $panel.find(".custom-server-banner-close-icon").on("click", ()=>{
+            $panel.find(".live-preview-custom-banner").addClass("forced-hidden");
+        });
         $iframe[0].onload = function () {
             $iframe.attr('srcdoc', null);
         };
@@ -492,6 +502,15 @@ define(function (require, exports, module) {
         _setTitle(relativeOrFullPath, currentPreviewFile,
             previewDetails.isCustomServer ? currentLivePreviewURL : "");
         if(panel.isVisible()) {
+            if(!customLivePreviewBannerShown && LivePreviewSettings.isUsingCustomServer()
+                && previewDetails.isCustomServer) {
+                customLivePreviewBannerShown = true;
+                $panel.find(".live-preview-custom-banner").removeClass("forced-hidden");
+                $panel.find(".live-preview-banner-message").text(
+                    StringUtils.format(Strings.LIVE_PREVIEW_CUSTOM_SERVER_BANNER,
+                        LivePreviewSettings.getCustomServeBaseURL())
+                );
+            }
             let newIframe = $(LIVE_PREVIEW_IFRAME_HTML);
             newIframe.insertAfter($iframe);
             $iframe.remove();
@@ -556,6 +575,7 @@ define(function (require, exports, module) {
     }
 
     async function _projectOpened(_evt) {
+        customLivePreviewBannerShown = false;
         _openReadmeMDIfFirstTime();
         _customServerMetrics();
         if(!LiveDevelopment.isActive()

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -47,6 +47,13 @@
                 hidden>
         </iframe>
     </div>
+    <div class="live-preview-custom-banner forced-hidden">
+        <span class="live-preview-banner-message">{{Strings.LIVE_PREVIEW_CUSTOM_SERVER_BANNER}}</span>
+        <button class="live-preview-settings-banner-btn btn btn-mini primary" style="margin-left: 10px;">{{Strings.LIVE_DEV_SETTINGS}}</button>
+        <i class="fa fa-close custom-server-banner-close-icon"
+           style="margin-left: 10px;margin-right: 10px;cursor: pointer;"
+           title="{{Strings.CLOSE}}"></i>
+    </div>
     <div class="frame-container">
         <div style="width: 3px;"></div>
         <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"

src/nls/root/strings.js

@@ -171,6 +171,7 @@ define({
     "LIVE_DEV_SETTINGS_FRAMEWORK": "Server Framework",
     "LIVE_DEV_SETTINGS_FRAMEWORK_CUSTOM": "Custom",
     "LIVE_DEV_SETTINGS_FRAMEWORK_PREFERENCES": "Server Framework, currently supports only docusaurus",
+    "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
 
     "LIVE_DEV_DETACHED_REPLACED_WITH_DEVTOOLS": "Live Preview was canceled because the browser's developer tools were opened",
     "LIVE_DEV_DETACHED_TARGET_CLOSED": "Live Preview was canceled because the page was closed in the browser",

src/styles/brackets.less

@@ -3002,6 +3002,15 @@ label input {
 
 /* Live Preview */
 
+.live-preview-custom-banner {
+    display: flex;
+    flex-direction: row;
+    background-color: #1E90FF;
+    color: white;
+    justify-content: flex-end;
+    align-items: center;
+}
+
 // CodeMirror uses inline styles for active line number, so must use !important here to override
 .live-preview-sync-error .CodeMirror-linenumber {
     background-color: @live-preview-sync-error-background !important;