Live Preview Desktop first draft

src/LiveDevelopment/LiveDevMultiBrowser.js

@@ -606,10 +606,12 @@ define(function (require, exports, module) {
         _createLiveDocumentForFrame(initialDoc);
 
         // start listening for requests
-        _server.start();
+        _server.start()
+            .then(()=>{
+                // open browser to the url
+                _open(initialDoc);
+            });
 
-        // open browser to the url
-        _open(initialDoc);
     }
 
     /**

src/document/DocumentManager.js

@@ -329,7 +329,7 @@ define(function (require, exports, module) {
      * If all you need is the Document's getText() value, use the faster getDocumentText() instead.
      *
      * @param {!string} fullPath
-     * @param {!object} fileObj actual File|RemoteFile or some other protocol adapter handle
+     * @param {object?} fileObj actual File|RemoteFile or some other protocol adapter handle
      * @return {$.Promise} A promise object that will be resolved with the Document, or rejected
      *      with a FileSystemError if the file is not yet open and can't be read from disk.
      */

src/extensions/default/HealthData/SendToAnalytics.js

@@ -132,6 +132,17 @@ define(function (require, exports, module) {
             Number(healthReport["AppStartupTime"]));
         Metrics.valueEvent(PERFORMANCE, "startup", "ModuleDepsResolved",
             Number(healthReport["ModuleDepsResolved"]));
+        Metrics.valueEvent(PERFORMANCE, "startup", "PhStore", PhStore._storageBootstrapTime);
+        if(Phoenix.browser.isTauri) {
+            Metrics.valueEvent(PERFORMANCE, "startup", "tauriBoot", window._tauriBootVars.bootstrapTime);
+        }
+        if(window.nodeSetupDonePromise) {
+            window.nodeSetupDonePromise
+                .then(()=>{
+                    window.PhNodeEngine && window.PhNodeEngine._nodeLoadTime
+                    && Metrics.valueEvent(PERFORMANCE, "startup", "nodeBoot", window.PhNodeEngine._nodeLoadTime);
+                });
+        }
     }
 
     // Themes

src/extensions/default/Phoenix-live-preview/main.js

@@ -59,17 +59,19 @@ define(function (require, exports, module) {
         utils = require('utils');
 
     const LIVE_PREVIEW_PANEL_ID = "live-preview-panel",
-        NAVIGATOR_REDIRECT_PAGE = "REDIRECT_PAGE",
         IFRAME_EVENT_SERVER_READY = 'SERVER_READY';
     let serverReady = false;
     const LIVE_PREVIEW_IFRAME_HTML = `
     <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"
              width="100%" height="100%" seamless="true"
              src='about:blank'
-             sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-pointer-lock">
+             sandbox="allow-same-origin allow-scripts allow-forms allow-modals allow-pointer-lock">
     </iframe>
     `;
 
+    const LOADER_BROADCAST_ID = `live-preview-loader-${Phoenix.PHOENIX_INSTANCE_ID}`;
+    const navigatorChannel = new BroadcastChannel(LOADER_BROADCAST_ID);
+
     ExtensionInterface.registerExtensionInterface(
         ExtensionInterface._DEFAULT_EXTENSIONS_INTERFACE_NAMES.PHOENIX_LIVE_PREVIEW, exports);
 
@@ -171,23 +173,17 @@ define(function (require, exports, module) {
     }
 
     function _getTabNavigationURL(url) {
-        let details = LiveDevelopment.getLivePreviewDetails(),
-            openURL = new URL(url);
+        let openURL = new URL(url);
         // we tag all externally opened urls with query string parameter phcodeLivePreview="true" to address
         // #LIVE_PREVIEW_TAB_NAVIGATION_RACE_FIX
         openURL.searchParams.set(StaticServer.PHCODE_LIVE_PREVIEW_QUERY_PARAM, "true");
-        openURL = openURL.href;
-        if(details.URL !== url) {
-            openURL = utils.getPageLoaderURL(url);
-        }
-        return openURL;
+        return  utils.getPageLoaderURL(openURL.href);
     }
 
     function _redirectAllTabs(newURL) {
-        const openURL = _getTabNavigationURL(newURL);
-        StaticServer.messageToLivePreviewTabs({
-            type: NAVIGATOR_REDIRECT_PAGE,
-            URL: openURL
+        navigatorChannel.postMessage({
+            type: 'REDIRECT_PAGE',
+            url: newURL
         });
     }
 
@@ -234,7 +230,8 @@ define(function (require, exports, module) {
             $iframe.attr('srcdoc', null);
         };
 
-        const popoutSupported = Phoenix.browser.isTauri || Phoenix.browser.desktop.isChromeBased;
+        const popoutSupported = Phoenix.browser.isTauri
+            || Phoenix.browser.desktop.isChromeBased || Phoenix.browser.desktop.isFirefox;
         if(!popoutSupported){
             // live preview can be popped out currently in only chrome based browsers. The cross domain iframe
             // that serves the live preview(phcode.live) is sandboxed to the tab in which phcode.dev resides.
@@ -284,8 +281,7 @@ define(function (require, exports, module) {
             newIframe.insertAfter($iframe);
             $iframe.remove();
             $iframe = newIframe;
-            const iframeURL = utils.isImage(previewDetails.fullPath) ? _getTabNavigationURL(newSrc) : newSrc;
-            $iframe.attr('src', iframeURL);
+            $iframe.attr('src', newSrc);
         }
         Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "render",
             utils.getExtension(previewDetails.fullPath));
@@ -306,7 +302,11 @@ define(function (require, exports, module) {
     }
 
     let livePreviewEnabledOnProjectSwitch = false;
-    async function _projectOpened() {
+    async function _projectOpened(_evt, projectRoot) {
+        navigatorChannel.postMessage({
+            type: 'PROJECT_SWITCH',
+            projectRoot: projectRoot.fullPath
+        });
         if(urlPinned){
             _togglePinUrl();
         }

src/extensions/default/Phoenix-live-preview/markdown.html

@@ -5,10 +5,18 @@
     <title>Markdown- Phoenix</title>
 
 
-    <link rel="stylesheet" href="{{{BOOTSTRAP_LIB_CSS}}}">
-    <link href="{{{HIGHLIGHT_JS_CSS}}}" rel="stylesheet">
-    <script src="{{{HIGHLIGHT_JS}}}"></script>
-    <link rel="stylesheet" href="{{{GFM_CSS}}}" />
+    <style>
+        {{{BOOTSTRAP_LIB_CSS}}}
+    </style>
+    <style>
+        {{{HIGHLIGHT_JS_CSS}}}
+    </style>
+    <script>
+        {{{HIGHLIGHT_JS}}}
+    </script>
+    <style>
+        {{{GFM_CSS}}}
+    </style>
     <script type="text/javascript">
         function inIframe () {
             try {

src/extensions/default/Phoenix-live-preview/panel.html

@@ -11,14 +11,15 @@
                 title="live preview server"
                 src="about:blank"
                 style="width:100%;"
+                sandbox="allow-same-origin allow-scripts"
                 hidden>
         </iframe>
     </div>
     <div class="frame-container">
         <div style="width: 3px;"></div>
         <iframe id="panel-live-preview-frame" title="Live Preview" style="border: none"
                 width="100%" height="100%" seamless="true" srcdoc='<img width="50px" src="styles/images/Spinner-1s-200px.svg">'
-                sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-modals allow-pointer-lock">
+                sandbox="allow-same-origin allow-scripts allow-forms allow-modals allow-pointer-lock">
         </iframe>
     </div>
 </div>

src/extensions/default/Phoenix-live-preview/utils.js

@@ -44,8 +44,7 @@ define(function (require, exports, module) {
         Strings                   = brackets.getModule("strings"),
         DocumentManager     = brackets.getModule("document/DocumentManager"),
         LiveDevelopment    = brackets.getModule("LiveDevelopment/main"),
-        LiveDevServerManager = brackets.getModule("LiveDevelopment/LiveDevServerManager"),
-        LivePreviewTransport  = brackets.getModule("LiveDevelopment/MultiBrowserImpl/transports/LivePreviewTransport");
+        LiveDevServerManager = brackets.getModule("LiveDevelopment/LiveDevServerManager");
 
     function getExtension(filePath) {
         filePath = filePath || '';
@@ -88,8 +87,12 @@ define(function (require, exports, module) {
     }
 
     function getPageLoaderURL(url) {
-        return `${LiveDevServerManager.getStaticServerBaseURLs().baseURL}pageLoader.html?`
-            +`broadcastChannel=${LivePreviewTransport.BROADCAST_CHANNEL_ID}&URL=${encodeURIComponent(url)}`;
+        return `${Phoenix.baseURL}live-preview-loader.html?`
+            +`virtualServerURL=${encodeURIComponent(LiveDevServerManager.getStaticServerBaseURLs().baseURL)}`
+            +`&phoenixInstanceID=${Phoenix.PHOENIX_INSTANCE_ID}&initialURL=${encodeURIComponent(url)}`
+            +`&localMessage=${encodeURIComponent(Strings.DESCRIPTION_LIVEDEV_SECURITY_POPOUT_MESSAGE)}`
+            +`&initialProjectRoot=${encodeURIComponent(ProjectManager.getProjectRoot().fullPath)}`
+            +`&okMessage=${encodeURIComponent(Strings.TRUST_PROJECT)}`;
     }
 
     function _isLivePreviewSupported() {

src/index.html

@@ -146,6 +146,7 @@
                 const appLocalDirPromise =  window.__TAURI__.path.appLocalDataDir();
                 const tempDirPromise = window.__TAURI__.os.tempdir();
                 window._tauriBootVars = {};
+                const tauriBootStartTime = Date.now();
                 window._tauriBootVarsPromise = Promise.all([appNamePromise, documentDirPromise,
                     appLocalDirPromise, tempDirPromise])
                     .then((results) => {
@@ -164,6 +165,7 @@
 
                         window._tauriBootVars.appLocalDir = results[2];
                         window._tauriBootVars.tempDir = results[3];
+                        window._tauriBootVars.bootstrapTime = Date.now() - tauriBootStartTime;
                         localStorage.setItem(TAURI_BOOT_VARS_LOCALSTORAGE_KEY, JSON.stringify(window._tauriBootVars));
                     });
             }