fix: in macs live preview panel shown when opening text files on start

abose · abose · commit 6ead779c7630 · 2024-05-21T23:18:29.000+05:30
diff --git a/src/document/DocumentCommandHandlers.js b/src/document/DocumentCommandHandlers.js
@@ -2189,6 +2189,9 @@ define(function (require, exports, module) {
         Phoenix.app.setSingleInstanceCLIArgsHandler(_singleInstanceHandler);
         _openFilesPassedInFromCLI()
             .finally(()=>{
+                // in mac, this is not exactly correct. This event will get triggered on startup, but mac will only
+                // raise events in the background and there is no way for us to know when the mac open with events
+                // come. Use this event carefully in mac.
                 ProjectManager.trigger(ProjectManager.EVENT_AFTER_STARTUP_FILES_LOADED);
             });
     });
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -249,7 +249,7 @@ define(function (require, exports, module) {
             panelShownAtStartup = true;
             $icon.toggleClass("active");
             panel.show();
-            _loadPreview(true);
+            _loadPreview(true, true);
             _showCustomServerBannerIfNeeded();
         } else {
             $icon.toggleClass("active");
@@ -575,7 +575,7 @@ define(function (require, exports, module) {
         }
     }
 
-    let startupFilesLoadHandled = false, livePreviewStartCalled = false;
+    let startupFilesLoadHandled = false;
     async function _projectOpened() {
         customLivePreviewBannerShown = false;
         $panel.find(".live-preview-custom-banner").addClass("forced-hidden");
@@ -590,7 +590,6 @@ define(function (require, exports, module) {
             _togglePinUrl();
         }
         $iframe.attr('src', StaticServer.getNoPreviewURL());
-        livePreviewStartCalled = true;
         if(!panelShownAtStartup && !isBrowser && ProjectManager.isStartupFilesLoaded()){
             // we dont do this in browser as the virtual server may not yet be started on app start
             // project open and a 404 page will briefly flash in the browser!
@@ -616,10 +615,6 @@ define(function (require, exports, module) {
             // and EVENT_PROJECT_OPEN. if _projectOpened has already shown the live preview panel when it saw that
             // ProjectManager.isStartupFilesLoaded() is true, we should not call project opened again at boot.
         }
-        if(!livePreviewStartCalled){
-            _projectOpened();
-            return;
-        }
         if(!panelShownAtStartup && !isBrowser && ProjectManager.isStartupFilesLoaded()){
             // we dont do this in browser as the virtual server may not yet be started on app start
             // project open and a 404 page will briefly flash in the browser!
@@ -629,6 +624,7 @@ define(function (require, exports, module) {
             const isPreviewable = currentFile ? utils.isPreviewableFile(currentFile.fullPath) : false;
             if(isPreviewable){
                 _setPanelVisibility(true);
+                _loadPreview(true, true);
             }
         }
     }
@@ -690,7 +686,7 @@ define(function (require, exports, module) {
         if(changedFile && (utils.isPreviewableFile(fullPath) ||
             utils.isServerRenderedFile(fullPath))){
             _loadPreview();
-            if(!panelShownAtStartup){
+            if(!panelShownAtStartup && ProjectManager.isStartupFilesLoaded()){
                 let previewDetails = await StaticServer.getPreviewDetails();
                 if(previewDetails && !previewDetails.isNoPreview) {
                     _setPanelVisibility(true);
@@ -786,11 +782,32 @@ define(function (require, exports, module) {
         StaticServer.init();
         LiveDevServerManager.registerServer({ create: _createStaticServer }, 5);
         ProjectManager.on(ProjectManager.EVENT_PROJECT_FILE_CHANGED, _projectFileChanges);
-        MainViewManager.on("currentFileChange", _currentFileChanged);
         ProjectManager.on(ProjectManager.EVENT_PROJECT_OPEN, _projectOpened);
         ProjectManager.on(ProjectManager.EVENT_PROJECT_CLOSE, _projectClosed);
         EditorManager.on("activeEditorChange", _activeDocChanged);
         ProjectManager.on(ProjectManager.EVENT_AFTER_STARTUP_FILES_LOADED, _startupFilesLoaded);
+        let fileChangeListenerStartDelay = 0;
+        if(Phoenix.isNativeApp && Phoenix.platform === "mac") {
+            // in mac, if we do the `open with Phoenix Code` from finder, then, the open with events come as events
+            // after app start. This causes a problem where if we opens a txt file with open with, and and html file was
+            // open previously, then currentFileChange listener will see the html file at first and open the live
+            // preview panel, and immediately, the txt file event will be sent by os resulting in a no preview page.
+            // we should not show a no preview page for opening txt / non-previewable files. So, we dont attach the
+            // change listener in macos for a few seconds, and attach the listener if the user explicitly clicks on a
+            // file.
+            fileChangeListenerStartDelay = 500;
+            ProjectManager.on(ProjectManager.EVENT_FILE_CLICKED_SIDEBAR, ()=>{
+                MainViewManager.off("currentFileChange", _currentFileChanged);
+                MainViewManager.on("currentFileChange", _currentFileChanged);
+            });
+        }
+        setTimeout(()=>{
+            MainViewManager.off("currentFileChange", _currentFileChanged);
+            MainViewManager.on("currentFileChange", _currentFileChanged);
+            if(Phoenix.isNativeApp && Phoenix.platform === "mac" && MainViewManager.getCurrentlyViewedFile()) {
+                _currentFileChanged(null, MainViewManager.getCurrentlyViewedFile());
+            }
+        }, fileChangeListenerStartDelay);
         CommandManager.register(Strings.CMD_LIVE_FILE_PREVIEW,  Commands.FILE_LIVE_FILE_PREVIEW, function () {
             _toggleVisibilityOnClick();
         });
@@ -826,7 +843,10 @@ define(function (require, exports, module) {
                     // only show if there is some file to preview and not the default no-preview preview on startup
                     _setPanelVisibility(true);
                 }
-                _loadPreview(true);
+                // in browsers, the static server is not reset on every call to open live preview, so its safe to reload
+                // we need to reload once as
+                const shouldReload = !Phoenix.isNativeApp;
+                _loadPreview(true, shouldReload);
             });
         }
 
diff --git a/src/project/FileTreeView.js b/src/project/FileTreeView.js
@@ -38,7 +38,11 @@ define(function (require, exports, module) {
         FileTreeViewModel = require("project/FileTreeViewModel"),
         ViewUtils         = require("utils/ViewUtils"),
         KeyEvent          = require("utils/KeyEvent"),
-        PreferencesManager  = require("preferences/PreferencesManager");
+        EventDispatcher     = require("utils/EventDispatcher");
+
+    EventDispatcher.makeEventDispatcher(exports);
+
+    const EVENT_FILE_NODE_CLICKED_IN_TREE = "fileNodeClickedInTree";
 
     var DOM = Preact.DOM;
 
@@ -584,6 +588,7 @@ define(function (require, exports, module) {
             }
             this.props.actions.setSelected(this.myPath(), doNotOpen);
             this.render();
+            exports.trigger(EVENT_FILE_NODE_CLICKED_IN_TREE);
         },
 
         /**
@@ -1331,4 +1336,7 @@ define(function (require, exports, module) {
     exports.addIconProvider = addIconProvider;
     exports.addClassesProvider = addClassesProvider;
     exports.render = render;
+
+    // private events
+    exports._EVENT_FILE_NODE_CLICKED_IN_TREE = EVENT_FILE_NODE_CLICKED_IN_TREE;
 });
diff --git a/src/project/ProjectManager.js b/src/project/ProjectManager.js
@@ -93,7 +93,8 @@ define(function (require, exports, module) {
         EVENT_PROJECT_REFRESH = "projectRefresh",
         EVENT_CONTENT_CHANGED = "contentChanged",
         EVENT_PROJECT_FILE_CHANGED = "projectFileChanged",
-        EVENT_PROJECT_FILE_RENAMED = "projectFileRenamed";
+        EVENT_PROJECT_FILE_RENAMED = "projectFileRenamed",
+        EVENT_FILE_CLICKED_SIDEBAR = "fileClickedSidebar";
 
     EventDispatcher.setLeakThresholdForEvent(EVENT_PROJECT_OPEN, 25);
 
@@ -2215,6 +2216,14 @@ define(function (require, exports, module) {
         _renderTree(true);
     }
 
+    FileTreeView.on(FileTreeView._EVENT_FILE_NODE_CLICKED_IN_TREE, ()=>{
+        exports.trigger(EVENT_FILE_CLICKED_SIDEBAR);
+    });
+
+    WorkingSetView.on(WorkingSetView._EVENT_FILE_NODE_CLICKED_WORKING_SET, ()=>{
+        exports.trigger(EVENT_FILE_CLICKED_SIDEBAR);
+    });
+
 
     // Private API helpful in testing
     exports._actionCreator                = actionCreator;
@@ -2272,4 +2281,5 @@ define(function (require, exports, module) {
     exports.EVENT_PROJECT_FILE_CHANGED = EVENT_PROJECT_FILE_CHANGED;
     exports.EVENT_PROJECT_FILE_RENAMED = EVENT_PROJECT_FILE_RENAMED;
     exports.EVENT_PROJECT_OPEN_FAILED = EVENT_PROJECT_OPEN_FAILED;
+    exports.EVENT_FILE_CLICKED_SIDEBAR = EVENT_FILE_CLICKED_SIDEBAR;
 });
diff --git a/src/project/WorkingSetView.js b/src/project/WorkingSetView.js
@@ -43,7 +43,12 @@ define(function (require, exports, module) {
         paneListTemplate      = require("text!htmlContent/working-set.html"),
         Strings               = require("strings"),
         _                     = require("thirdparty/lodash"),
-        Mustache              = require("thirdparty/mustache/mustache");
+        Mustache              = require("thirdparty/mustache/mustache"),
+        EventDispatcher     = require("utils/EventDispatcher");
+
+    EventDispatcher.makeEventDispatcher(exports);
+
+    const EVENT_FILE_NODE_CLICKED_WORKING_SET = "fileNodeClickedWorkingSet";
 
     /**
      * Open view dictionary
@@ -276,6 +281,7 @@ define(function (require, exports, module) {
 
         // The mouse down handler pretty much handles everything
         $el.mousedown(function (e) {
+            exports.trigger(EVENT_FILE_NODE_CLICKED_WORKING_SET);
             var scrollDir = 0,
                 dragged = false,
                 startPageY = e.pageY,
@@ -1581,4 +1587,7 @@ define(function (require, exports, module) {
     // API to be used only by default extensions
     exports.useIconProviders              = useIconProviders;
     exports.useClassProviders               = useClassProviders;
+
+    // private events
+    exports._EVENT_FILE_NODE_CLICKED_WORKING_SET = EVENT_FILE_NODE_CLICKED_WORKING_SET;
 });
