feat: make the live preview expand button go full screen

The expand icon in the live preview toolbar was just a second copy of
the design mode toggle, which is not what the icon says it does. It now
expands live preview to full screen, and design mode stays its own
thing on the control bar.

Renamed the button to fullScreenLivePreviewButton since the old id said
design mode, and pointed its icon and tooltip at the full screen change
event instead of the design mode one.

The mode dropdown chevron keeps hiding in design mode as before, now
driven directly by the design mode event.

Author: devvaannsh

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 @@ define(function (require, exports, module) {
         $modeBtn,
         $modeBtnGroup,
         $previewBtn,
-        $designModeBtn;
+        $fullScreenBtn;
 
     let customLivePreviewBannerShown = false;
 
@@ -800,7 +800,7 @@ define(function (require, exports, module) {
             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 @@ define(function (require, exports, module) {
         $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 @@ define(function (require, exports, module) {
             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">