feat(lp): pencil toggle for edit mode with pro upsell for free users

Turn the live-preview toolbar's play button into an edit-mode toggle:

- Icon: fa-play → fa-pencil; title "Toggle Preview Mode (F8)" →
  "Toggle Edit Mode (F8)" via new LIVE_PREVIEW_MODE_TOGGLE_EDIT string.
- Invert the .selected semantics — the button now lights amber when
  LiveDevelopment.getCurrentMode() === LIVE_EDIT_MODE (not when in
  preview). _initializeMode reconciles .selected against the real mode
  on every livePreviewMode pref change, so state and visuals stay
  synchronized.
- Click handler routes through LiveDevelopment.setMode(LIVE_EDIT_MODE)
  instead of PreferencesManager.set, so we pick up the entitlement
  gate for free: setMode returns false for users without the live-edit
  entitlement, and we then invoke
  KernalModeTrust.ProDialogs.showProUpsellDialog(UPSELL_TYPE_LIVE_EDIT)
  — the same dialog the mode dropdown's "Edit Mode" item opens
  (main.js:459-466). Pro users in edit drop back to preview; pro users
  not in edit enter edit.
- F8 keybinding routes through the same click handler, so it gets the
  same behavior and upsell for free.

No existing tests are affected — the two suites that touch
#previewModeLivePreviewButton only assert its visibility, never the
icon, the .selected class, or the click path.

Author: abose

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -369,8 +369,10 @@ define(function (require, exports, module) {
     function _initializeMode() {
         const currentMode = LiveDevelopment.getCurrentMode();
 
-        // when in preview mode, we need to give the play button a selected state
-        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE) {
+        // Pencil button lights up only when edit mode is active; preview /
+        // highlight modes leave it un-tinted. Click toggles between edit
+        // and preview.
+        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE) {
             $previewBtn.addClass('selected');
         } else {
             $previewBtn.removeClass('selected');
@@ -744,19 +746,29 @@ define(function (require, exports, module) {
     }
 
     /**
-     * Handle preview button click - toggles between preview mode and the user's default mode.
-     * PRO users toggle between preview and edit mode.
-     * community users toggle between preview and highlight mode.
+     * Toggles between edit mode and preview mode. The pencil button lights up
+     * (via .selected applied in _initializeMode) when edit mode is active;
+     * clicking it when already in edit drops back to preview. Clicking when
+     * NOT in edit tries to enter edit through LiveDevelopment.setMode, which
+     * returns false for users without the live-edit entitlement — in that
+     * case we show the same pro upsell dialog the mode dropdown uses,
+     * mirroring its "Edit Mode" item. _initializeMode reconciles the
+     * .selected class against the actual current mode after the pref
+     * change lands.
      */
     function _handlePreviewBtnClick() {
-        if($previewBtn.hasClass('selected')) {
-            $previewBtn.removeClass('selected');
-            const defaultMode = isProEditUser ? 'edit' : 'highlight';
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, defaultMode);
-        } else {
-            // Currently NOT in preview mode - switch to preview
-            $previewBtn.addClass('selected');
-            PreferencesManager.set(PREFERENCE_LIVE_PREVIEW_MODE, "preview");
+        const currentMode = LiveDevelopment.getCurrentMode();
+        if (currentMode === LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE) {
+            LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_PREVIEW_MODE);
+            return;
+        }
+        if (!LiveDevelopment.setMode(LiveDevelopment.CONSTANTS.LIVE_EDIT_MODE)) {
+            if (KernalModeTrust.ProDialogs) {
+                KernalModeTrust.ProDialogs.showProUpsellDialog(
+                    KernalModeTrust.ProDialogs.UPSELL_TYPE_LIVE_EDIT);
+            } else {
+                Metrics.countEvent(Metrics.EVENT_TYPE.PRO, "proUpsellDlg", "fail");
+            }
         }
     }
 
@@ -765,7 +777,7 @@ define(function (require, exports, module) {
             Strings: Strings,
             livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
             clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
-            clickToPreview: Strings.LIVE_PREVIEW_MODE_TOGGLE_PREVIEW,
+            clickToToggleEdit: Strings.LIVE_PREVIEW_MODE_TOGGLE_EDIT,
             switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE,
             livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
             livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -7,8 +7,8 @@
 	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-expand"></i>
 	        </button>
-	        <button id="previewModeLivePreviewButton" title="{{clickToPreview}}" class="btn-alt-quiet toolbar-button">
-	            <i class="fa-solid fa-play"></i>
+	        <button id="previewModeLivePreviewButton" title="{{clickToToggleEdit}}" class="btn-alt-quiet toolbar-button">
+	            <i class="fa-solid fa-pencil"></i>
 	        </button>
             <button id="livePreviewModeBtn" title="{{livePreviewConfigureModes}}" class="btn-alt-quiet toolbar-button btn-dropdown btn"><!-- Content will come here dynamically --></button>
         </div>

src/nls/root/strings.js

@@ -544,6 +544,7 @@ define({
     "IMAGE_SEARCH_PRO_THROTTLE_MESSAGE": "Image search is temporarily unavailable due to high demand. This usually clears within an hour — please try again shortly.",
     "LIVE_PREVIEW_CUSTOM_SERVER_BANNER": "Getting preview from your custom server {0}",
     "LIVE_PREVIEW_MODE_TOGGLE_PREVIEW": "Toggle Preview Mode (F8)",
+    "LIVE_PREVIEW_MODE_TOGGLE_EDIT": "Toggle Edit Mode (F8)",
     "LIVE_PREVIEW_MODE_PREVIEW": "Preview Mode",
     "LIVE_PREVIEW_MODE_HIGHLIGHT": "Highlight Mode",
     "LIVE_PREVIEW_MODE_EDIT": "Edit Mode",