Feat: Live Preview toggles to full screen mode on expand button click

docs/API-Reference/command/Commands.md

@@ -458,6 +458,12 @@ Toggles sidebar visibility
 ## VIEW\_TOGGLE\_DESIGN\_MODE
 Toggles the design (full live-preview) mode — collapses/expands the editor
 
+**Kind**: global variable  
+<a name="VIEW_TOGGLE_LP_FULL_SCREEN"></a>
+
+## VIEW\_TOGGLE\_LP\_FULL\_SCREEN
+Toggles live-preview full screen (design mode with the sidebar hidden)
+
 **Kind**: global variable  
 <a name="TOGGLE_TABBAR"></a>
 

docs/API-Reference/view/WorkspaceManager.md

@@ -29,6 +29,7 @@ Events:
         * [.EVENT_WORKSPACE_PANEL_SHOWN](#module_view/WorkspaceManager..EVENT_WORKSPACE_PANEL_SHOWN)
         * [.EVENT_WORKSPACE_PANEL_HIDDEN](#module_view/WorkspaceManager..EVENT_WORKSPACE_PANEL_HIDDEN)
         * [.EVENT_WORKSPACE_DESIGN_MODE_CHANGE](#module_view/WorkspaceManager..EVENT_WORKSPACE_DESIGN_MODE_CHANGE)
+        * [.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE](#module_view/WorkspaceManager..EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE)
         * [.createBottomPanel(id, $panel, [minSize], [title], [options])](#module_view/WorkspaceManager..createBottomPanel) ⇒ <code>Panel</code>
         * [.destroyBottomPanel(id)](#module_view/WorkspaceManager..destroyBottomPanel)
         * [.createPluginPanel(id, $panel, [minSize], $toolbarIcon, [initialSize])](#module_view/WorkspaceManager..createPluginPanel) ⇒ <code>Panel</code>
@@ -39,6 +40,8 @@ Events:
         * [.setPluginPanelWidth(width)](#module_view/WorkspaceManager..setPluginPanelWidth)
         * [.isInDesignMode()](#module_view/WorkspaceManager..isInDesignMode) ⇒ <code>boolean</code>
         * [.setDesignMode(active)](#module_view/WorkspaceManager..setDesignMode)
+        * [.isInLPFullScreen()](#module_view/WorkspaceManager..isInLPFullScreen) ⇒ <code>boolean</code>
+        * [.setLPFullScreen(active)](#module_view/WorkspaceManager..setLPFullScreen)
         * [.addEscapeKeyEventHandler(consumerName, eventHandler)](#module_view/WorkspaceManager..addEscapeKeyEventHandler) ⇒ <code>boolean</code>
         * [.removeEscapeKeyEventHandler(consumerName)](#module_view/WorkspaceManager..removeEscapeKeyEventHandler) ⇒ <code>boolean</code>
 
@@ -96,6 +99,13 @@ Event triggered when a panel is hidden.
 Event triggered when design mode (editor collapsed, full live preview) is
 entered or exited. Payload: `(active: boolean)`.
 
+**Kind**: inner constant of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+<a name="module_view/WorkspaceManager..EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE"></a>
+
+### view/WorkspaceManager.EVENT\_WORKSPACE\_LP\_FULL\_SCREEN\_CHANGE
+Event triggered when live-preview full screen (design mode with the sidebar
+hidden) is entered or exited. Payload: `(active: boolean)`.
+
 **Kind**: inner constant of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
 <a name="module_view/WorkspaceManager..createBottomPanel"></a>
 
@@ -220,6 +230,32 @@ callers should use the dedicated toggle command instead.
 | --- | --- |
 | active | <code>boolean</code> | 
 
+<a name="module_view/WorkspaceManager..isInLPFullScreen"></a>
+
+### view/WorkspaceManager.isInLPFullScreen() ⇒ <code>boolean</code>
+Returns true while live preview is expanded to full screen, meaning design mode
+with the sidebar hidden so live preview owns everything to the right of the
+central control bar.
+
+Full screen is a superset of design mode, so `isInDesignMode()` is true here
+too. Use `isInDesignMode()` if you only care that the editor is collapsed;
+use this only when the sidebar state matters.
+
+**Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+<a name="module_view/WorkspaceManager..setLPFullScreen"></a>
+
+### view/WorkspaceManager.setLPFullScreen(active)
+Sets the live-preview full-screen flag and fires
+EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE when the value actually changes.
+Intended to be called by the control bar; other callers should use the
+dedicated toggle command instead.
+
+**Kind**: inner method of [<code>view/WorkspaceManager</code>](#module_view/WorkspaceManager)  
+
+| Param | Type |
+| --- | --- |
+| active | <code>boolean</code> | 
+
 <a name="module_view/WorkspaceManager..addEscapeKeyEventHandler"></a>
 
 ### view/WorkspaceManager.addEscapeKeyEventHandler(consumerName, eventHandler) ⇒ <code>boolean</code>

src/command/Commands.js

@@ -260,6 +260,9 @@ define(function (require, exports, module) {
     /** Toggles the design (full live-preview) mode — collapses/expands the editor */
     exports.VIEW_TOGGLE_DESIGN_MODE     = "view.toggleDesignMode";      // view/CentralControlBar.js    _setEditorCollapsed()
 
+    /** Toggles live-preview full screen (design mode with the sidebar hidden) */
+    exports.VIEW_TOGGLE_LP_FULL_SCREEN  = "view.toggleLivePreviewFullScreen"; // view/CentralControlBar.js  _setLPFullScreen()
+
     /** Toggles tabbar visibility */
     exports.TOGGLE_TABBAR            = "view.toggleTabbar";
     // extensionsIntegrated/TabBar/main.js

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -370,13 +370,13 @@
 }
 
 #reloadLivePreviewButton,
-#designModeToggleLivePreviewButton {
+#fullScreenLivePreviewButton {
     border: 1px solid transparent;
     border-radius: 3px;
 }
 
 #live-preview-plugin-toolbar #reloadLivePreviewButton:hover,
-#live-preview-plugin-toolbar #designModeToggleLivePreviewButton:hover {
+#live-preview-plugin-toolbar #fullScreenLivePreviewButton:hover {
     border-color: rgba(255, 255, 255, 0.1) !important;
     background: transparent !important;
     box-shadow: none !important;

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

@@ -190,7 +190,7 @@
         $modeBtn,
         $modeBtnGroup,
         $previewBtn,
-        $designModeBtn;
+        $fullScreenBtn;
 
     let customLivePreviewBannerShown = false;
 
@@ -800,7 +800,7 @@
             livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
             clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
             clickToToggleEdit: Strings.LIVE_PREVIEW_MODE_TOGGLE_EDIT,
-            switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE,
+            fullScreenLivePreview: Strings.LIVE_PREVIEW_FULL_SCREEN,
             livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
             livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
             clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
@@ -833,7 +833,7 @@
         $modeBtn = $panel.find("#livePreviewModeBtn");
         $modeBtnGroup = $panel.find("#lpModeBtnGroup");
         $previewBtn = $panel.find("#previewModeLivePreviewButton");
-        $designModeBtn = $panel.find("#designModeToggleLivePreviewButton");
+        $fullScreenBtn = $panel.find("#fullScreenLivePreviewButton");
 
         // Markdown theme toggle — persist user choice
         MarkdownSync.setThemeToggleHandler((theme) => {
@@ -918,28 +918,25 @@
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "reloadBtn", "click");
         });
 
-        // Design-mode toggle: mirrors the CCB's pen-nib button so the user can
-        // enter/exit design mode without moving focus to the sidebar strip.
-        // Icon swaps between fa-expand (enter) and fa-compress (exit).
-        function _updateDesignModeButton() {
-            const on = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
-            const $icon = $designModeBtn.find("i");
-            $icon.removeClass("fa-expand fa-compress")
+        function _updateFullScreenButton() {
+            const on = WorkspaceManager.isInLPFullScreen && WorkspaceManager.isInLPFullScreen();
+            $fullScreenBtn.find("i")
+                .removeClass("fa-expand fa-compress")
                 .addClass(on ? "fa-compress" : "fa-expand");
-            $designModeBtn.attr("title",
-                on ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
-            if ($modeBtn) {
-                $modeBtn.toggle(!on && !_isMdviewrActive);
-            }
+            $fullScreenBtn.attr("title",
+                on ? Strings.LIVE_PREVIEW_EXIT_FULL_SCREEN : Strings.LIVE_PREVIEW_FULL_SCREEN);
         }
-        $designModeBtn.click(()=>{
-            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
-            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "designModeBtn", "click");
+        $fullScreenBtn.click(()=>{
+            CommandManager.execute(Commands.VIEW_TOGGLE_LP_FULL_SCREEN);
+            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "fullScreenBtn", "click");
         });
         WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview");
         WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview",
-            _updateDesignModeButton);
-        _updateDesignModeButton();
+            _updateLPControlsForMdviewer);
+        WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE + ".livePreview");
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE + ".livePreview",
+            _updateFullScreenButton);
+        _updateFullScreenButton();
 
         // init the status overlay
         _initOverlay();

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

@@ -4,7 +4,7 @@
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-arrow-rotate-right"></i>
 	        </button>
-	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
+	        <button id="fullScreenLivePreviewButton" title="{{fullScreenLivePreview}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-expand"></i>
 	        </button>
             <span id="lpModeBtnGroup" class="lp-mode-btn-group">

src/nls/root/strings.js

@@ -1198,6 +1198,9 @@ define({
     "CMD_TOGGLE_DESIGN_MODE": "Toggle Design Mode",
     "CCB_SWITCH_TO_DESIGN_MODE": "Switch to Design Mode",
     "CCB_SWITCH_TO_CODE_EDITOR": "Switch to Code Editor",
+    "CMD_TOGGLE_LP_FULL_SCREEN": "Toggle Live Preview Full Screen",
+    "LIVE_PREVIEW_FULL_SCREEN": "Expand Live Preview to Full Screen",
+    "LIVE_PREVIEW_EXIT_FULL_SCREEN": "Exit Full Screen",
     "CMD_TOGGLE_TABBAR": "File Tab Bar",
     "CMD_TOGGLE_PANELS": "Toggle Panels",
     "CMD_TOGGLE_PURE_CODE": "No Distractions",