UI improvements

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

@@ -202,6 +202,16 @@
 }
 
 #reloadLivePreviewButton {
+    color: #a0a0a0;
+    margin-left: 3px;
+    margin-top: 0;
+    width: 30px;
+    height: 22px;
+    flex-shrink: 0;
+}
+
+#designModeToggleLivePreviewButton {
+    color: #a0a0a0;
     margin-left: 3px;
     margin-top: 0;
     width: 30px;

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

@@ -169,7 +169,8 @@
         $firefoxButtonBallast,
         $panelTitle,
         $modeBtn,
-        $previewBtn;
+        $previewBtn,
+        $designModeBtn;
 
     let customLivePreviewBannerShown = false;
 
@@ -341,11 +342,15 @@
      * Does not hide in custom server mode (handled by _isMdviewrActive being false).
      */
     function _updateLPControlsForMdviewer() {
+        const inDesignMode = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
         if ($previewBtn) {
             $previewBtn.toggle(!_isMdviewrActive);
         }
         if ($modeBtn) {
-            $modeBtn.toggle(!_isMdviewrActive);
+            // Also hidden in design mode (see $designModeBtn wiring in
+            // _createExtensionPanel) because the preview-mode dropdown is moot
+            // when the editor is fully collapsed.
+            $modeBtn.toggle(!_isMdviewrActive && !inDesignMode);
         }
     }
 
@@ -761,6 +766,7 @@
             livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
             clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
             clickToPreview: Strings.LIVE_PREVIEW_MODE_TOGGLE_PREVIEW,
+            switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE,
             livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
             livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
             clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
@@ -792,6 +798,7 @@
         $settingsIcon = $panel.find("#livePreviewSettingsBtn");
         $modeBtn = $panel.find("#livePreviewModeBtn");
         $previewBtn = $panel.find("#previewModeLivePreviewButton");
+        $designModeBtn = $panel.find("#designModeToggleLivePreviewButton");
 
         // Markdown theme toggle — persist user choice
         MarkdownSync.setThemeToggleHandler((theme) => {
@@ -871,6 +878,31 @@
             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); while
+        // design mode is on, hide #livePreviewModeBtn (the preview-mode dropdown)
+        // since its options are moot when the editor is fully collapsed.
+        function _updateDesignModeButton() {
+            const on = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
+            const $icon = $designModeBtn.find("i");
+            $icon.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);
+            }
+        }
+        $designModeBtn.click(()=>{
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "designModeBtn", "click");
+        });
+        WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview");
+        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview",
+            _updateDesignModeButton);
+        _updateDesignModeButton();
+
         // init the status overlay
         _initOverlay();
     }

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

@@ -1,7 +1,12 @@
 <div id="panel-live-preview">
     <div id="live-preview-plugin-toolbar" class="plugin-toolbar" style="display: flex; align-items: center; flex-direction: row;">
         <div style="width: 20%;display: flex;">
-            <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button reload-icon"></button>
+            <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">
+	            <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>

src/index.html

@@ -914,8 +914,8 @@
                 <a id="phcode-io-main-nav" href="https://phcode.io" target="_blank" rel="noopener">phcode.io</a>
             </div>
             <div id="mainNavBarRight">
-                <div id="navBackButton" class="nav-back-btn btn-alt-quiet"></div>
-                <div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"></div>
+                <div id="navBackButton" class="nav-back-btn btn-alt-quiet"><i class="fa-solid fa-arrow-left"></i></div>
+                <div id="navForwardButton" class="nav-forward-btn btn-alt-quiet"><i class="fa-solid fa-arrow-right"></i></div>
                 <div id="showInfileTree" class="show-in-file-tree-btn btn-alt-quiet"></div>
                 <div id="searchNav" class="search-nav-btn btn-alt-quiet"></div>
                 <div class="working-set-splitview-btn btn-alt-quiet"></div>

src/styles/CentralControlBar.less

@@ -105,6 +105,15 @@
             height: 15px;
             pointer-events: none;
         }
+
+        /* Design mode on — give the button a "pressed chip" look. The lighter
+           background reads as a selected toolbar item without introducing a
+           new accent color into the middle of the UI. Icon color unchanged. */
+        &.is-active,
+        &.is-active:hover {
+            background-color: rgba(255, 255, 255, 0.12);
+            color: @project-panel-text-1;
+        }
     }
 
 }

src/styles/brackets.less

@@ -1295,44 +1295,41 @@ a, img {
     z-index: 1;
 }
 
-.nav-back-btn {
+/* Back / forward nav buttons use FontAwesome arrows so they match the
+   browser's back/forward affordance and stay visually consistent with
+   the other FA-based sidebar and toolbar buttons. NavigationProvider
+   still toggles .nav-back-btn / .nav-back-btn-disabled (and the forward
+   pair) to signal the enabled state — the rules below read as a single
+   icon button with an enabled/disabled fork. */
+.nav-back-btn,
+.nav-forward-btn,
+.nav-back-btn-disabled,
+.nav-forward-btn-disabled {
     top: 7px;
     padding: 4px 6px;
-    .sprite-icon(0, 0, 13px, 13px, "images/sprites.svg#leftArrow");
-    background-position: center;
-    background-size: cover;
-    opacity: 0.8;
+    width: 13px;
+    height: 13px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    line-height: 1;
     z-index: 1;
-}
 
-.nav-forward-btn {
-    top: 7px;
-    padding: 4px 6px;
-    .sprite-icon(0, 0, 13px, 13px, "images/sprites.svg#rightArrow");
-    background-position: center;
-    background-size: cover;
-    opacity: 0.8;
-    z-index: 1;
+    i {
+        pointer-events: none;
+    }
 }
 
-.nav-back-btn-disabled {
-    top: 7px;
-    padding: 4px 6px;
-    .sprite-icon(0, 0, 13px, 13px, "images/sprites.svg#leftArrowDisabled");
-    background-position: center;
-    background-size: cover;
+.nav-back-btn,
+.nav-forward-btn {
     opacity: 0.8;
-    z-index: 1;
 }
 
+.nav-back-btn-disabled,
 .nav-forward-btn-disabled {
-    top: 7px;
-    padding: 4px 6px;
-    .sprite-icon(0, 0, 13px, 13px, "images/sprites.svg#rightArrowDisabled");
-    background-position: center;
-    background-size: cover;
-    opacity: 0.8;
-    z-index: 1;
+    opacity: 0.35;
+    pointer-events: none;
 }
 
 .splitview-icon-none {

src/styles/brackets_patterns_override.less

@@ -239,8 +239,8 @@ a:focus {
             display: none;
             min-width: 120px;
             text-align: left;
-            right: 0;
-            left: auto;
+            left: 0;
+            right: auto;
         }
         &.hamburger-open .hamburger-dropdown {
             display: block;

src/view/CentralControlBar.js

@@ -37,7 +37,6 @@ define(function (require, exports, module) {
     let livePreviewWasOpen = false;
     let savedSidebarMaxSize = null;
     let applyingCollapsedLayout = false;
-    let penNibIconHTML = null;
 
     function _getRenderedSidebarWidth() {
         // Use offsetWidth (not jQuery's outerWidth) to force a synchronous reflow
@@ -218,7 +217,6 @@ define(function (require, exports, module) {
         const $collapseBtn = $("#ccbCollapseEditorBtn");
         $collapseBtn.toggleClass("is-active", editorCollapsed)
             .attr("title", editorCollapsed ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
-        $collapseBtn.html(editorCollapsed ? '<i class="fa-solid fa-code"></i>' : penNibIconHTML);
         if (_toggleDesignModeCommand) {
             _toggleDesignModeCommand.setChecked(editorCollapsed);
         }
@@ -277,10 +275,6 @@ define(function (require, exports, module) {
         $sidebar = $("#sidebar");
         $content = $(".content");
 
-        // Cache the authored pen-nib SVG from the DOM so the toggle handler
-        // can restore it after swapping in the fa-code icon for design mode.
-        penNibIconHTML = $("#ccbCollapseEditorBtn").html();
-
         _wireButtons();
         // The HTML titles on the control-bar buttons are fallback English
         // strings; set the localized versions up front so the initial render

test/spec/CentralControlBar-integ-test.js

@@ -332,26 +332,20 @@ define(function (require, exports, module) {
                     "design mode to deactivate from click", 10000);
             });
 
-            it("should swap icon (pen-nib svg ↔ fa-code) and title on state change", async function () {
+            it("should swap title on state change (pen-nib svg stays in both states)", async function () {
                 const $btn = _$("#ccbCollapseEditorBtn");
 
-                // Expanded (not in design mode): svg pen-nib + "Switch to Design Mode".
                 expect($btn.find("svg").length).toBe(1);
-                expect($btn.find("i.fa-code").length).toBe(0);
                 expect($btn.attr("title")).toBe(Strings.CCB_SWITCH_TO_DESIGN_MODE);
 
                 await enterDesignMode();
 
-                // Design mode: <i class="fa-solid fa-code"> + "Switch to Code Editor".
-                expect($btn.find("i.fa-code").length).toBe(1);
-                expect($btn.find("svg").length).toBe(0);
+                expect($btn.find("svg").length).toBe(1);
                 expect($btn.attr("title")).toBe(Strings.CCB_SWITCH_TO_CODE_EDITOR);
 
                 await exitDesignMode();
 
-                // Back to expanded — svg restored, title restored.
                 expect($btn.find("svg").length).toBe(1);
-                expect($btn.find("i.fa-code").length).toBe(0);
                 expect($btn.attr("title")).toBe(Strings.CCB_SWITCH_TO_DESIGN_MODE);
             });
         });