fix: ctrl-s on live preview should not bring up browser save dialogue

Author: abose

src/LiveDevelopment/BrowserScripts/DocumentObserver.js

@@ -29,6 +29,24 @@
     var _document = null;
     var _transport;
 
+    function inIframe () {
+        try {
+            return window.self !== window.top;
+        } catch (e) {
+            return true;
+        }
+    }
+
+    if(inIframe()) {
+        // inside iframes, we disable ctrl-s browser save page workflow as it may be inside the phoenix window
+        // It will confuse the use seeing the browser save dialog inside phoenix.
+        document.savePageCtrlSDisabledByPhoenix = true;
+        document.addEventListener("keydown", function(e) {
+            if (e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+                e.preventDefault();
+            }
+        }, false);
+    }
 
     /**
      * Retrieves related documents (external CSS and JS files)

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

@@ -239,7 +239,7 @@ define(function (require, exports, module) {
             };
             return {scrollX, scrollY, currentSrc};
         }catch (e) {
-            return {scrollX: 0, scrollY: 0 , currentSrc};
+            return {scrollX: 0, scrollY: 0, currentSrc};
         }
     }
 
@@ -254,6 +254,13 @@ define(function (require, exports, module) {
                 _setTitle(previewDetails.filePath);
             }
             $iframe[0].onload = function () {
+                $iframe[0].contentDocument.savePageCtrlSDisabledByPhoenix = true;
+                $iframe[0].contentDocument.addEventListener("keydown", function(e) {
+                    // inside live preview iframe, we disable ctrl-s browser save page dialog
+                    if (e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+                        e.preventDefault();
+                    }
+                }, false);
                 if(saved.currentSrc === newSrc){
                     $iframe[0].contentWindow.scrollTo(saved.scrollX, saved.scrollY);
                 } else {

src/extensions/default/StaticServer/markdown.html

@@ -9,6 +9,26 @@
     <link href="{{{HIGHLIGHT_JS_CSS}}}" rel="stylesheet">
     <script src="{{{HIGHLIGHT_JS}}}"></script>
     <link rel="stylesheet" href="{{{GFM_CSS}}}" />
+    <script type="text/javascript">
+        function inIframe () {
+            try {
+                return window.self !== window.top;
+            } catch (e) {
+                return true;
+            }
+        }
+
+        if(inIframe()) {
+            // inside iframes, we disable ctrl-s browser save page workflow as it may be inside the phoenix window
+            // It will confuse the use seeing the browser save dialog inside phoenix.
+            $iframe[0].contentDocument.savePageCtrlSDisabledByPhoenix = true;
+            document.addEventListener("keydown", function(e) {
+                if (e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+                    e.preventDefault();
+                }
+            }, false);
+        }
+    </script>
     <style>
 
         *{

src/utils/Global.js

@@ -73,7 +73,7 @@ define(function (require, exports, module) {
     global.brackets.shellAPI = require("utils/ShellAPI");
 
     // Determine OS/platform
-    if (global.navigator.platform === "MacIntel" || global.navigator.platform === "MacPPC") {
+    if (global.navigator.platform.match("Mac")) {
         global.brackets.platform = "mac";
     } else if (global.navigator.platform.indexOf("Linux") >= 0) {
         global.brackets.platform = "linux";

test/spec/LiveDevelopmentMultiBrowser-test.js

@@ -616,5 +616,32 @@ define(function (require, exports, module) {
 
             await endPreviewSession();
         }, 5000);
+
+        it("should ctrl-s to save page be disabled inside live preview iframes", async function () {
+            await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
+                "SpecRunnerUtils.openProjectFiles simple1.html", 1000);
+
+            await waitsForLiveDevelopmentToOpen();
+            await _editFileAndVerifyLivePreview("simple1.html", {line: 11, ch: 45}, 'hello world ',
+                "testId", "Brackets is hello world awesome!");
+            let iFrame = testWindow.document.getElementById("panel-live-preview-frame");
+            expect(iFrame.contentDocument.savePageCtrlSDisabledByPhoenix).toBeTrue();
+
+            await awaitsForDone(SpecRunnerUtils.openProjectFiles(["readme.md"]),
+                "readme.md", 1000);
+            await awaits(300);
+            iFrame = testWindow.document.getElementById("panel-live-preview-frame");
+            expect(iFrame.src.endsWith("readme.md")).toBeTrue();
+            expect(iFrame.contentDocument.savePageCtrlSDisabledByPhoenix).toBeTrue();
+
+            await awaitsForDone(SpecRunnerUtils.openProjectFiles(["sub/icon_chevron.png"]),
+                "icon_chevron.png", 1000);
+            await awaits(300);
+            iFrame = testWindow.document.getElementById("panel-live-preview-frame");
+            expect(iFrame.src.endsWith("sub/icon_chevron.png")).toBeTrue();
+            expect(iFrame.contentDocument.savePageCtrlSDisabledByPhoenix).toBeTrue();
+
+            await endPreviewSession();
+        }, 5000);
     });
 });