Live Preview Edit Polishing

.github/workflows/desktop-mac-m1-test-pull.yml

@@ -9,7 +9,7 @@ concurrency:
 
 jobs:
   test-desktop-mac-m1:
-    runs-on: macos-14
+    runs-on: macos-15
     timeout-minutes: 90
     steps:
       - uses: actions/checkout@v3

.github/workflows/desktop-mac-test-pull.yml

@@ -9,7 +9,7 @@ concurrency:
 
 jobs:
   test-desktop-mac:
-    runs-on: macos-13
+    runs-on: macos-15-intel
     timeout-minutes: 90
     steps:
       - uses: actions/checkout@v3

.github/workflows/playwright-staging-prod.yml

@@ -178,7 +178,7 @@ jobs:
 
   playwrightChromiumMacos:
     timeout-minutes: 90
-    runs-on: macos-14
+    runs-on: macos-15
     steps:
       - uses: actions/checkout@v3
       - name: setup node
@@ -434,7 +434,7 @@ jobs:
 
   playwrightFirefoxMacos:
     timeout-minutes: 90
-    runs-on: macos-14
+    runs-on: macos-15
     steps:
       - uses: actions/checkout@v3
       - name: setup node

.gitignore

@@ -11,6 +11,8 @@ Thumbs.db
 /npm-debug.log
 /src/cacheManifest.json
 /src/appConfig.js
+/src/extensionsIntegrated/pro-loader.js
+/test/pro-test-suite.js
 
 # ignore node_modules inside src
 /src/node_modules

docs/API-Reference/command/Commands.md

@@ -158,12 +158,6 @@ Toggles live preview multi-browser mode
 ## CMD\_RELOAD\_LIVE\_PREVIEW
 Reloads live preview
 
-**Kind**: global variable  
-<a name="FILE_LIVE_HIGHLIGHT"></a>
-
-## FILE\_LIVE\_HIGHLIGHT
-Toggles live highlight
-
 **Kind**: global variable  
 <a name="FILE_PROJECT_SETTINGS"></a>
 

docs/API-Reference/utils/ExtensionLoader.md

@@ -151,3 +151,15 @@ Load extensions.
 | --- | --- | --- |
 | A | <code>Array.&lt;string&gt;</code> | list containing references to extension source      location. A source location may be either (a) a folder name inside      src/extensions or (b) an absolute path. |
 
+<a name="uninstallExtension"></a>
+
+## uninstallExtension(extensionID) ⇒ <code>Promise</code>
+Uninstall a deprecated extension
+
+**Kind**: global function
+**Returns**: <code>Promise</code> - A promise that resolves when the extension is uninstalled successfully
+
+| Param | Type | Description |
+| --- | --- | --- |
+| extensionID | <code>string</code> | The ID of the extension to uninstall |
+

gulpfile.js/index.js

@@ -32,7 +32,6 @@ const Translate = require("./translateStrings");
 const copyThirdPartyLibs = require("./thirdparty-lib-copy");
 const minify = require('gulp-minify');
 const glob = require("glob");
-const sourcemaps = require('gulp-sourcemaps');
 const crypto = require("crypto");
 const rename = require("gulp-rename");
 const execSync = require('child_process').execSync;
@@ -57,6 +56,8 @@ function cleanAll() {
         // Test artifacts
         'dist-test',
         'test/spec/test_folders.zip',
+        'src/extensionsIntegrated/pro-loader.js',
+        'test/pro-test-suite.js',
         ...RELEASE_BUILD_ARTEFACTS
     ]);
 }
@@ -71,6 +72,45 @@ function cleanUnwantedFilesInDist() {
     ]);
 }
 
+function _cleanPhoenixProGitFolder() {
+    return new Promise((resolve) => {
+        const gitFolders = [
+            'dist/extensionsIntegrated/phoenix-pro/.git',
+            'dist-test/src/extensionsIntegrated/phoenix-pro/.git'
+        ];
+
+        for (const gitFolder of gitFolders) {
+            if (fs.existsSync(gitFolder)) {
+                fs.rmSync(gitFolder, { recursive: true, force: true });
+                console.log(`Removed git folder: ${gitFolder}`);
+            }
+        }
+        resolve();
+    });
+}
+
+function _deletePhoenixProSourceFolder() {
+    return new Promise((resolve) => {
+        const phoenixProFolders = [
+            // we only delete the source folder from the release build artifact and not the test artifact. why below?
+            'dist/extensionsIntegrated/phoenix-pro'
+            // 'dist-test/src/extensionsIntegrated/phoenix-pro' // ideally we should delete this too so that the tests
+            // test exactly the release build artifact, but the spec runner requires on these files during test start
+            // and i wasnt able to isolate them. so instead wehat we do now is that we have an additional test in prod
+            // that checks that the phoenix-pro source folder is not loaded in prod and loaded only from the inlines
+            // brackets-min file.
+        ];
+
+        for (const folder of phoenixProFolders) {
+            if (fs.existsSync(folder)) {
+                fs.rmSync(folder, { recursive: true, force: true });
+                console.log(`Deleted phoenix-pro source folder: ${folder}`);
+            }
+        }
+        resolve();
+    });
+}
+
 /**
  * TODO: Release scripts to merge and min src js/css/html resources into dist.
  * Links that might help:
@@ -90,7 +130,6 @@ function makeDistAll() {
 function makeJSDist() {
     return src(['src/**/*.js', '!src/**/unittest-files/**/*', "!src/thirdparty/prettier/**/*",
         "!src/thirdparty/no-minify/**/*"])
-        .pipe(sourcemaps.init())
         .pipe(minify({
             ext:{
                 min:'.js'
@@ -99,22 +138,25 @@ function makeJSDist() {
             mangle: false,
             compress: {
                 unused: false
+            },
+            preserveComments: function (node, comment) {
+                const text = (comment.value || "").trim();
+
+                // Preserve ONLY comments starting with "DONT_STRIP_MINIFY:"
+                return text.includes("DONT_STRIP_MINIFY:");
             }
         }))
-        .pipe(sourcemaps.write('./'))
         .pipe(dest('dist'));
 }
 
 // we had to do this as prettier is non minifiable
 function makeJSPrettierDist() {
     return src(["src/thirdparty/prettier/**/*"])
-        .pipe(sourcemaps.init())
         .pipe(dest('dist/thirdparty/prettier'));
 }
 
 function makeNonMinifyDist() {
     return src(["src/thirdparty/no-minify/**/*"])
-        .pipe(sourcemaps.init())
         .pipe(dest('dist/thirdparty/no-minify'));
 }
 
@@ -537,6 +579,7 @@ function containsRegExpExcludingEmpty(str) {
 
 
 const textContentMap = {};
+const excludeSuffixPathsInlining = ["MessageIds.json"];
 function inlineTextRequire(file, content, srcDir) {
     if(content.includes(`'text!`) || content.includes("`text!")) {
         throw new Error(`in file ${file} require("text!...") should always use a double quote "text! instead of " or \``);
@@ -545,20 +588,24 @@ function inlineTextRequire(file, content, srcDir) {
         const requireFragments = extractRequireTextFragments(content);
         for (const {requirePath, requireStatement} of requireFragments) {
             let textContent = textContentMap[requirePath];
+            let filePath = srcDir + requirePath;
+            if(requirePath.startsWith("./")) {
+                filePath = path.join(path.dirname(file), requirePath);
+            }
             if(!textContent){
-                let filePath = srcDir + requirePath;
-                if(requirePath.startsWith("./")) {
-                    filePath = path.join(path.dirname(file), requirePath);
-                }
                 console.log("reading file at path: ", filePath);
                 const fileContent = fs.readFileSync(filePath, "utf8");
                 textContentMap[requirePath] = fileContent;
                 textContent = fileContent;
             }
-            if(textContent.includes("`")) {
-                console.log("Not inlining file as it contains a backquote(`) :", requirePath);
-            } else if(requirePath.endsWith(".js") || requirePath.endsWith(".json")) {
-                console.log("Not inlining JS/JSON file:", requirePath);
+            if((requirePath.endsWith(".js") && !requirePath.includes("./")) // js files that are relative paths are ok
+                || excludeSuffixPathsInlining.some(ext => requirePath.endsWith(ext))) {
+                console.warn("Not inlining JS/JSON file:", requirePath, filePath);
+                if(filePath.includes("phoenix-pro")) {
+                    // this is needed as we will delete the extension sources when packaging for release.
+                    // so non inlined content will not be available in the extension. throw early to detect that.
+                    throw new Error(`All Files in phoenix pro extension should be inlineable!: failed for ${filePath}`);
+                }
             } else {
                 console.log("Inlining", requireStatement);
                 if((requireStatement.includes(".html") || requireStatement.includes(".js"))
@@ -568,7 +615,7 @@ function inlineTextRequire(file, content, srcDir) {
                     throw `Error inlining ${requireStatement} in ${file}: Regex: ${detectedRegEx}`+
                     "\nRegular expression of the form /*/ is not allowed for minification please use RegEx constructor";
                 }
-                content = content.replaceAll(requireStatement, "`"+textContent+"`");
+                content = content.replaceAll(requireStatement, `${JSON.stringify(textContent)}`);
             }
         }
 
@@ -625,10 +672,8 @@ function _renameBracketsConcatAsBracketsJSInDist() {
     return new Promise((resolve)=>{
         fs.unlinkSync("dist/brackets.js");
         fs.copyFileSync("dist/brackets-min.js", "dist/brackets.js");
-        fs.copyFileSync("dist/brackets-min.js.map", "dist/brackets.js.map");
         // cleanup minifed files
         fs.unlinkSync("dist/brackets-min.js");
-        fs.unlinkSync("dist/brackets-min.js.map");
         resolve();
     });
 }
@@ -748,9 +793,7 @@ function _renameExtensionConcatAsExtensionJSInDist(extensionName) {
             const srcExtensionConcatFile = path.join(srcExtensionDir, 'extension-min.js');
             const distExtensionDir = path.join('dist/extensions/default', extensionName);
             const extMinFile = path.join(distExtensionDir, 'main.js');
-            const extMinFileMap = path.join(distExtensionDir, 'main.js.map');
             const extSrcFile = path.join(distExtensionDir, 'extension-min.js');
-            const extSrcFileMap = path.join(distExtensionDir, 'extension-min.js.map');
 
             // Make sure extension-min.js exists in dist.
             if (!fs.existsSync(extSrcFile)) {
@@ -769,17 +812,7 @@ function _renameExtensionConcatAsExtensionJSInDist(extensionName) {
             }
             fs.copyFileSync(extSrcFile, extMinFile);
 
-            if (fs.existsSync(extMinFileMap)) {
-                fs.unlinkSync(extMinFileMap);
-            }
-            if (fs.existsSync(extSrcFileMap)) {
-                fs.copyFileSync(extSrcFileMap, extMinFileMap);
-            }
-
             fs.unlinkSync(extSrcFile);
-            if (fs.existsSync(extSrcFileMap)) {
-                fs.unlinkSync(extSrcFileMap);
-            }
 
             resolve();
         } catch (err) {
@@ -877,6 +910,32 @@ function makeLoggerConfig() {
     });
 }
 
+function generateProLoaderFiles() {
+    return new Promise((resolve) => {
+        // AMD module template for generated files
+        const AMD_MODULE_TEMPLATE = `define(function (require, exports, module) {<CODE>});\n`;
+
+        const phoenixProExists = fs.existsSync('src/extensionsIntegrated/phoenix-pro');
+
+        // Generate test/pro-test-suite.js content
+        const testSuiteCode = phoenixProExists ?
+            '\n    require("extensionsIntegrated/phoenix-pro/unittests");\n' : '';
+        const testSuiteContent = AMD_MODULE_TEMPLATE.replace('<CODE>', testSuiteCode);
+
+        // Generate src/extensionsIntegrated/pro-loader.js content
+        const loaderCode = phoenixProExists ? '\n    require("./phoenix-pro/main");\n' : '';
+        const loaderContent = AMD_MODULE_TEMPLATE.replace('<CODE>', loaderCode);
+
+        fs.writeFileSync('test/pro-test-suite.js', testSuiteContent);
+        fs.writeFileSync('src/extensionsIntegrated/pro-loader.js', loaderContent);
+
+        console.log(`Generated pro-loader.js (phoenix-pro ${phoenixProExists ? 'found' : 'not found'})`);
+        console.log(`Generated pro-test-suite.js (phoenix-pro ${phoenixProExists ? 'found' : 'not found'})`);
+
+        resolve();
+    });
+}
+
 function validatePackageVersions() {
     return new Promise((resolve, reject)=>{
         const mainPackageJson = require("../package.json", "utf8");
@@ -942,26 +1001,26 @@ function _patchMinifiedCSSInDistIndex() {
 
 const createDistTest = series(copyDistToDistTestFolder, copyTestToDistTestFolder, copyIndexToDistTestFolder);
 
-exports.build = series(copyThirdPartyLibs.copyAll, makeLoggerConfig, zipDefaultProjectFiles, zipSampleProjectFiles,
+exports.build = series(copyThirdPartyLibs.copyAll, makeLoggerConfig, generateProLoaderFiles, zipDefaultProjectFiles, zipSampleProjectFiles,
     makeBracketsConcatJS, _compileLessSrc, _cleanReleaseBuildArtefactsInSrc, // these are here only as sanity check so as to catch release build minify fails not too late
     createSrcCacheManifest, validatePackageVersions);
-exports.buildDebug = series(copyThirdPartyLibs.copyAllDebug, makeLoggerConfig, zipDefaultProjectFiles,
+exports.buildDebug = series(copyThirdPartyLibs.copyAllDebug, makeLoggerConfig, generateProLoaderFiles, zipDefaultProjectFiles,
     makeBracketsConcatJS, _compileLessSrc, _cleanReleaseBuildArtefactsInSrc, // these are here only as sanity check so as to catch release build minify fails not too late
     zipSampleProjectFiles, createSrcCacheManifest);
 exports.clean = series(cleanDist);
 exports.reset = series(cleanAll);
 
 exports.releaseDev = series(cleanDist, exports.buildDebug, makeBracketsConcatJS, makeConcatExtensions, _compileLessSrc,
     makeDistAll, cleanUnwantedFilesInDist, releaseDev, _renameConcatExtensionsinDist,
-    createDistCacheManifest, createDistTest, _cleanReleaseBuildArtefactsInSrc);
+    createDistCacheManifest, createDistTest, _cleanPhoenixProGitFolder, _cleanReleaseBuildArtefactsInSrc);
 exports.releaseStaging = series(cleanDist, exports.build, makeBracketsConcatJS, makeConcatExtensions, _compileLessSrc,
     makeDistNonJS, makeJSDist, makeJSPrettierDist, makeNonMinifyDist, cleanUnwantedFilesInDist,
     _renameBracketsConcatAsBracketsJSInDist, _renameConcatExtensionsinDist, _patchMinifiedCSSInDistIndex, releaseStaging,
-    createDistCacheManifest, createDistTest, _cleanReleaseBuildArtefactsInSrc);
+    createDistCacheManifest, createDistTest, _deletePhoenixProSourceFolder, _cleanReleaseBuildArtefactsInSrc);
 exports.releaseProd = series(cleanDist, exports.build, makeBracketsConcatJS, makeConcatExtensions, _compileLessSrc,
     makeDistNonJS, makeJSDist, makeJSPrettierDist, makeNonMinifyDist, cleanUnwantedFilesInDist,
     _renameBracketsConcatAsBracketsJSInDist, _renameConcatExtensionsinDist, _patchMinifiedCSSInDistIndex, releaseProd,
-    createDistCacheManifest, createDistTest, _cleanReleaseBuildArtefactsInSrc);
+    createDistCacheManifest, createDistTest, _deletePhoenixProSourceFolder, _cleanReleaseBuildArtefactsInSrc);
 exports.releaseWebCache = series(makeDistWebCache);
 exports.serve = series(exports.build, serve);
 exports.zipTestFiles = series(zipTestFiles);

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -182,6 +182,10 @@
                 }
             }
             s.id = msg.params.url;
+
+            if (window._LD && window._LD.redrawEverything) {
+                window._LD.redrawEverything();
+            }
         },
 
         /**
@@ -363,7 +367,7 @@
         ProtocolManager.enable();
     });
 
-    function _getAllInheritedSelectorsInOrder(element) {
+    function getAllInheritedSelectorsInOrder(element) {
         let selectorsFound= new Map();
         const selectorsList = [];
         while (element) {
@@ -383,6 +387,7 @@
         return selectorsList;
     }
 
+    global.getAllInheritedSelectorsInOrder = getAllInheritedSelectorsInOrder;
 
     /**
     * Sends the message containing tagID which is being clicked
@@ -407,7 +412,7 @@
                         "nodeID": element.id,
                         "nodeClassList": element.classList,
                         "nodeName": element.nodeName,
-                        "allSelectors": _getAllInheritedSelectorsInOrder(element),
+                        "allSelectors": getAllInheritedSelectorsInOrder(element),
                         "contentEditable": element.contentEditable === 'true',
                         "clicked": true,
                         "edit": true
@@ -431,7 +436,7 @@
                     "nodeID": element.id,
                     "nodeClassList": element.classList,
                     "nodeName": element.nodeName,
-                    "allSelectors": _getAllInheritedSelectorsInOrder(element),
+                    "allSelectors": getAllInheritedSelectorsInOrder(element),
                     "contentEditable": element.contentEditable === 'true',
                     "clicked": true
                 });

src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js

@@ -313,9 +313,10 @@
         }
     };
 
+    const ABS_REGEX = new RegExp("^(?:[a-z]+:)?\\/\\/", "i");
     function getAbsoluteUrl(url) {
         // Check if the URL is already absolute
-        if (/^(?:[a-z]+:)?\/\//i.test(url)) {
+        if (ABS_REGEX.test(url)) {
             return url; // The URL is already absolute
         }