chore: pro extension decides what mode to use from entitlements

abose · abose · commit 4750b07d7903 · 2025-12-11T12:48:45.000+05:30
This refactoring is needed as the core phcode is not aware of live preview edit capabilities.
also now at appstart we always switch to edit mode to prevent confusion if its edit capable
diff --git a/src/LiveDevelopment/main.js b/src/LiveDevelopment/main.js
@@ -19,7 +19,7 @@
  *
  */
 
-/*global less, Phoenix */
+/*global less */
 
 /**
  * main integrates LiveDevelopment into Brackets
@@ -46,25 +46,28 @@ define(function main(require, exports, module) {
         StringUtils         = require("utils/StringUtils"),
         EventDispatcher      = require("utils/EventDispatcher");
 
-
-    const KernalModeTrust = window.KernalModeTrust;
-    if(!KernalModeTrust){
-        throw new Error("KernalModeTrust is not defined. Cannot boot without trust ring");
-    }
     const LIVE_PREVIEW_MODE = CONSTANTS.LIVE_PREVIEW_MODE,
         LIVE_HIGHLIGHT_MODE = CONSTANTS.LIVE_HIGHLIGHT_MODE,
         LIVE_EDIT_MODE = CONSTANTS.LIVE_EDIT_MODE;
 
     // this will later be assigned its correct values once entitlementsManager loads
-    let isProEditUser = false;
-    let isFreeTrialUser = false;
+    let hasLiveEditCapability = false;
 
     const PREFERENCE_LIVE_PREVIEW_MODE = CONSTANTS.PREFERENCE_LIVE_PREVIEW_MODE;
 
     // state manager key to track image gallery selected state, by default we keep this as selected
     // if this is true we show the image gallery when an image element is clicked
     const IMAGE_GALLERY_STATE = "livePreview.imageGallery.state";
 
+    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", LIVE_HIGHLIGHT_MODE, {
+        description: StringUtils.format(
+            Strings.LIVE_PREVIEW_MODE_PREFERENCE, LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE, LIVE_EDIT_MODE),
+        values: [LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE, LIVE_EDIT_MODE]
+    }).on("change", function () {
+        // when mode changes we update the config mode and notify remoteFunctions so that it can get updated
+        _previewModeUpdated();
+    });
+
     /**
      * get the image gallery state from StateManager
      * @returns {boolean} true (default)
@@ -88,9 +91,9 @@ define(function main(require, exports, module) {
         }
     }
 
-    var params = new UrlParams();
-    var config = {
-        mode: _getDefaultMode(), // 'edit', 'highlight', or 'preview' - will be updated when preference loads
+    let params = new UrlParams();
+    const config = {
+        mode: LIVE_HIGHLIGHT_MODE, // will be updated when we fetch entitlements
         elemHighlights: "hover", // default value, this will get updated when the extension loads
         showRulerLines: false, // default value, this will get updated when the extension loads
         imageGalleryState: _getImageGalleryState() // image gallery selected state
@@ -226,63 +229,36 @@ define(function main(require, exports, module) {
         }
     }
 
-    // default mode means on first load for pro user we have edit mode
-    // for free user we have highlight mode
-    function _getDefaultMode() {
-        return isProEditUser ? LIVE_EDIT_MODE : LIVE_HIGHLIGHT_MODE;
-    }
-
-    // to set that mode in the preferences
-    function _initializeMode() {
-        if (isFreeTrialUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_EDIT_MODE);
-            return;
-        }
-
-        const savedMode = PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
-
-        if (savedMode === LIVE_HIGHLIGHT_MODE && isProEditUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_EDIT_MODE);
-        } else if (savedMode === LIVE_EDIT_MODE && !isProEditUser) {
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE);
-        }
-    }
-
-    // this is called everytime there is a change in entitlements
-    async function _updateProUserStatus() {
-        if (!KernalModeTrust) {
-            return;
-        }
-
-        try {
-            const entitlement = await KernalModeTrust.EntitlementsManager.getLiveEditEntitlement();
-
-            isProEditUser = entitlement.activated;
-            isFreeTrialUser = await KernalModeTrust.EntitlementsManager.isInProTrial();
-
-            _initializeMode(); // validates mode based on new entitlement
-            config.mode = getCurrentMode(); // update config.mode after validation
-
-            if (MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
-                MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
+    /**
+     * Internal api used to update live edit capability status as entitlements changes. calling this will update the UI
+     * but will not functionally enable live editing capabilities as that are dependent on entitlements framework.
+     * @param newCapability
+     * @private
+     */
+    function _liveEditCapabilityChanged(newCapability) {
+        if(newCapability !== hasLiveEditCapability){
+            hasLiveEditCapability = newCapability;
+            if(!hasLiveEditCapability && getCurrentMode() === LIVE_EDIT_MODE){
+                // downgraded, so we need to disable live edit mode
+                setMode(LIVE_HIGHLIGHT_MODE);
+            } else if(hasLiveEditCapability) {
+                // this means that the user has switched to pro-account and we need to enable live edit mode
+                // as user may have just logged in with a pro-capable account/upgraded to pro.
+                setMode(LIVE_EDIT_MODE);
             }
-        } catch (error) {
-            console.error("Error updating pro user status:", error);
-            isProEditUser = false;
-            isFreeTrialUser = false;
         }
     }
 
     function setMode(mode) {
-        if (mode === LIVE_EDIT_MODE && !isProEditUser) {
+        if (mode === LIVE_EDIT_MODE && !hasLiveEditCapability) {
             return false;
         }
         PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, mode);
         return true;
     }
 
     function getCurrentMode() {
-        return PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE) || _getDefaultMode();
+        return PreferencesManager.get(PREFERENCE_LIVE_PREVIEW_MODE);
     }
 
     function isInPreviewMode() {
@@ -302,15 +278,6 @@ define(function main(require, exports, module) {
 
         _loadStyles();
 
-        // init pro user status and listen for changes
-        if (KernalModeTrust) {
-            _updateProUserStatus();
-            KernalModeTrust.EntitlementsManager.on(
-                KernalModeTrust.EntitlementsManager.EVENT_ENTITLEMENTS_CHANGED,
-                _updateProUserStatus
-            );
-        }
-
         // update styles for UI status
         _status = [
             { tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "warning" },
@@ -340,24 +307,20 @@ define(function main(require, exports, module) {
         });
     });
 
-    function _updateConfigMode() {
+    function _previewModeUpdated() {
         const currentMode = getCurrentMode();
+        if (currentMode === LIVE_EDIT_MODE && !hasLiveEditCapability) {
+            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE);
+            // we will get another update event for this immediately, so just return.
+            return;
+        }
         config.mode = currentMode;
 
         if (MultiBrowserLiveDev && MultiBrowserLiveDev.status >= MultiBrowserLiveDev.STATUS_ACTIVE) {
             MultiBrowserLiveDev.updateConfig(JSON.stringify(config));
         }
     }
 
-    PreferencesManager.definePreference(PREFERENCE_LIVE_PREVIEW_MODE, "string", _getDefaultMode(), {
-        description: StringUtils.format(
-            Strings.LIVE_PREVIEW_MODE_PREFERENCE, LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE, LIVE_EDIT_MODE),
-        values: [LIVE_PREVIEW_MODE, LIVE_HIGHLIGHT_MODE, LIVE_EDIT_MODE]
-    }).on("change", function () {
-        // when mode changes we update the config mode and notify remoteFunctions so that it can get updated
-        _updateConfigMode();
-    });
-
     // this function is responsible to update element highlight config
     // called from live preview extension when preference changes
     function updateElementHighlightConfig() {
@@ -381,13 +344,17 @@ define(function main(require, exports, module) {
 
     EventDispatcher.makeEventDispatcher(exports);
 
+    // private api
+    exports._liveEditCapabilityChanged = _liveEditCapabilityChanged;
+
     // public events
     exports.EVENT_OPEN_PREVIEW_URL = MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL;
     exports.EVENT_CONNECTION_CLOSE = MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE;
     exports.EVENT_LIVE_PREVIEW_CLICKED = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_CLICKED;
     exports.EVENT_LIVE_PREVIEW_RELOAD = MultiBrowserLiveDev.EVENT_LIVE_PREVIEW_RELOAD;
 
     // Export public functions
+    exports.CONSTANTS = CONSTANTS;
     exports.openLivePreview = openLivePreview;
     exports.closeLivePreview = closeLivePreview;
     exports.isInactive = isInactive;
diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js
@@ -36,7 +36,7 @@
  */
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global path, jsPromise*/
+/*global path*/
 //jshint-ignore:no-start
 
 define(function (require, exports, module) {
@@ -324,7 +324,7 @@ define(function (require, exports, module) {
         const currentMode = LiveDevelopment.getCurrentMode();
 
         // when in preview mode, we need to give the play button a selected state
-        if (currentMode === "preview") {
+        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE) {
             $previewBtn.addClass('selected');
         } else {
             $previewBtn.removeClass('selected');
@@ -353,12 +353,16 @@ define(function (require, exports, module) {
         $dropdown = new DropdownButton.DropdownButton("", items, function(item, index) {
             if (item === Strings.LIVE_PREVIEW_MODE_PREVIEW) {
                 // using empty spaces to keep content aligned
-                return currentMode === "preview" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
+                return currentMode === LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE ?
+                    `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
             } else if (item === Strings.LIVE_PREVIEW_MODE_HIGHLIGHT) {
-                return currentMode === "highlight" ? `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
+                return currentMode === LiveDevelopment.CONSTANTS.LIVE_HIGHLIGHT_MODE ?
+                    `✓ ${item}` : `${'\u00A0'.repeat(4)}${item}`;
             } else if (item === Strings.LIVE_PREVIEW_MODE_EDIT) {
-                const checkmark = currentMode === "edit" ? "✓ " : `${'\u00A0'.repeat(4)}`;
-                const crownIcon = !isEditFeaturesActive ? ' <span style="color: #FBB03B; border: 1px solid #FBB03B; padding: 2px 4px; border-radius: 10px; font-size: 9px; margin-left: 12px;"><i class="fas fa-crown"></i> Pro</span>' : '';
+                const checkmark = currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE ?
+                    "✓ " : `${'\u00A0'.repeat(4)}`;
+                const crownIcon = !isEditFeaturesActive ?
+                    ' <span style="color: #FBB03B; border: 1px solid #FBB03B; padding: 2px 4px; border-radius: 10px; font-size: 9px; margin-left: 12px;"><i class="fas fa-crown"></i> Pro</span>' : '';
                 return {
                     html: `${checkmark}${item}${crownIcon}`,
                     enabled: true
@@ -400,11 +404,11 @@ define(function (require, exports, module) {
         // handle the option selection
         $dropdown.on("select", function (e, item, index) {
             if (index === 0) {
-                LiveDevelopment.setMode("preview");
+                LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE);
             } else if (index === 1) {
-                LiveDevelopment.setMode("highlight");
+                LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_HIGHLIGHT_MODE);
             } else if (index === 2) {
-                if (!LiveDevelopment.setMode("edit")) {
+                if (!LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE)) {
                     ProDialogs.showProUpsellDialog(ProDialogs.UPSELL_TYPE_LIVE_EDIT);
                 }
             } else if (item === Strings.LIVE_PREVIEW_EDIT_HIGHLIGHT_ON) {
diff --git a/src/extensionsIntegrated/phoenix-pro/main.js b/src/extensionsIntegrated/phoenix-pro/main.js
@@ -9,15 +9,35 @@ define(function (require, exports, module) {
     require("./remote-icons");
     require("./remote-styles");
 
+    const KernalModeTrust = window.KernalModeTrust;
+    if(!KernalModeTrust){
+        throw new Error("KernalModeTrust is not defined. Cannot boot without trust ring");
+    }
+
     const AppInit = require("utils/AppInit"),
-        WorkspaceManager    = require("view/WorkspaceManager"),
+        WorkspaceManager = require("view/WorkspaceManager"),
+        LiveDevelopment = require("LiveDevelopment/main"),
         LiveDevMultiBrowser = require("LiveDevelopment/LiveDevMultiBrowser"),
         Strings = require("strings");
 
     const remoteUtilsCode = require("text!./browser-context/remote-utils.js");
     const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
     LiveDevProtocol.addRemoteFunctionScript("remoteUtilsCode", remoteUtilsCode);
 
+    // this will later be assigned its correct values once entitlementsManager loads
+    let isProEditActivated = false;
+    // called everytime there is a change in entitlements (app start/every 15 mis, explicit check/ anytime really)
+    // called everytime there is a change in entitlements (app start/every 15 mis, explicit check/ anytime really)
+    async function _entitlementsChanged() {
+        try {
+            const entitlement = await KernalModeTrust.EntitlementsManager.getLiveEditEntitlement();
+            isProEditActivated = entitlement.activated;
+        } catch (error) {
+            console.error("Error updating pro user status:", error);
+            isProEditActivated = false;
+        }
+        LiveDevelopment._liveEditCapabilityChanged(isProEditActivated);
+    }
 
     /**
      * this function handles escape key for live preview to hide boxes if they are visible
@@ -36,6 +56,8 @@ define(function (require, exports, module) {
     WorkspaceManager.addEscapeKeyEventHandler("livePreview", _handleLivePreviewEscapeKey);
 
     AppInit.appReady(function () {
-
+        _entitlementsChanged();
+        KernalModeTrust.EntitlementsManager.on(
+            KernalModeTrust.EntitlementsManager.EVENT_ENTITLEMENTS_CHANGED, _entitlementsChanged);
     });
 });
diff --git a/src/extensionsIntegrated/phoenix-pro/unittests.js b/src/extensionsIntegrated/phoenix-pro/unittests.js
@@ -4,5 +4,5 @@
  */
 
 define(function (require, exports, module) {
-    // require("./unit-tests/LivePreviewEdit-test"); todo renable once this is working
+    // require("./unit-tests/LivePreviewEdit-test");
 });
