From 1b3e6ce44435b6d660dfc5d86ac9ac92e899e806 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 23 Apr 2026 07:22:53 +0530 Subject: [PATCH 1/6] chore: dont chnage the icon for design on cliking to code as its confusing --- src/view/CentralControlBar.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/view/CentralControlBar.js b/src/view/CentralControlBar.js index 125179f111..165ea4c1e3 100644 --- a/src/view/CentralControlBar.js +++ b/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 ? '' : 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 From 6c7e60d65447e0fc120a6a2024fa3caef342e261 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 23 Apr 2026 11:51:58 +0530 Subject: [PATCH 2/6] test(ccb): assert title-only swap on design-mode toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to 1b3e6ce44: the design-mode toggle no longer swaps the pen-nib SVG for fa-code — only the title changes between CCB_SWITCH_TO_DESIGN_MODE and CCB_SWITCH_TO_CODE_EDITOR. Rewrite the existing icon-swap test to match the new behavior: still assert the title flips and that the button's is-active wiring works, but check that the SVG stays in both states instead of expecting an fa-code icon in design mode. --- test/spec/CentralControlBar-integ-test.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/test/spec/CentralControlBar-integ-test.js b/test/spec/CentralControlBar-integ-test.js index a42ac4b7b1..e02c842d37 100644 --- a/test/spec/CentralControlBar-integ-test.js +++ b/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: + "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); }); }); From 02d8e6e6b750b2c048cc0cca1b5b327dcbb42fbb Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 23 Apr 2026 11:52:18 +0530 Subject: [PATCH 3/6] fix: open hamburger dropdown to the right so it doesn't cover the CCB MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The hamburger menu's dropdown was anchored with `right: 0; left: auto`, which aligned its right edge with the toggle's right edge and made it extend leftward. In the narrow-titlebar layout that shows the hamburger the dropdown would spill over the central control bar, overlapping the editor / design-mode buttons. Flip to `left: 0; right: auto` so the dropdown's left edge aligns with the toggle and opens into the empty titlebar area on the right. Submenu arrows already point right (►), so submenu cascade direction is unchanged. --- src/styles/brackets_patterns_override.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index 764fd3dc3d..c2bc88733c 100644 --- a/src/styles/brackets_patterns_override.less +++ b/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; From 1553d348fe7db38a4e8bf976124922054535cdec Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 23 Apr 2026 11:59:13 +0530 Subject: [PATCH 4/6] feat(ccb): add pressed-chip active state to design-mode toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The CCB design-mode toggle had no visible active state beyond a title change, so it wasn't obvious the button was "on" without reading the tooltip. Add a subtle lighter background (rgba(255,255,255,0.12)) on .is-active to make the button read as a pressed toolbar chip, and bump the icon color one step brighter. No accent color — keeps the CCB's neutral palette intact. --- src/styles/CentralControlBar.less | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/styles/CentralControlBar.less b/src/styles/CentralControlBar.less index 4645d8b9ba..0728086540 100644 --- a/src/styles/CentralControlBar.less +++ b/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; + } } } From 97ac670eb2bcd1c448cc428e8032e7ecfd76575c Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 23 Apr 2026 13:31:52 +0530 Subject: [PATCH 5/6] feat(lp): fa reload icon + design-mode toggle on the live preview toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace the sprite-backed reload button with fa-arrow-rotate-right so it matches the weight of the other FA buttons in the toolbar. - Add #designModeToggleLivePreviewButton between reload and preview-mode that dispatches VIEW_TOGGLE_DESIGN_MODE, letting the user enter/exit design mode from the live-preview panel itself without reaching to the CCB. Icon swaps fa-expand ↔ fa-compress based on the current design-mode state, title swaps between CCB_SWITCH_TO_DESIGN_MODE and CCB_SWITCH_TO_CODE_EDITOR. - Hide #livePreviewModeBtn (the preview-mode dropdown) while in design mode — its options aren't meaningful when the editor is collapsed. --- .../Phoenix-live-preview/live-preview.css | 10 ++++++ .../Phoenix-live-preview/main.js | 36 +++++++++++++++++-- .../Phoenix-live-preview/panel.html | 7 +++- 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index a5a31dc45b..ecb403319d 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/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; diff --git a/src/extensionsIntegrated/Phoenix-live-preview/main.js b/src/extensionsIntegrated/Phoenix-live-preview/main.js index b08e322798..dedef328dd 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/main.js +++ b/src/extensionsIntegrated/Phoenix-live-preview/main.js @@ -169,7 +169,8 @@ define(function (require, exports, module) { $firefoxButtonBallast, $panelTitle, $modeBtn, - $previewBtn; + $previewBtn, + $designModeBtn; let customLivePreviewBannerShown = false; @@ -341,11 +342,15 @@ define(function (require, exports, module) { * 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 @@ define(function (require, exports, module) { 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 @@ define(function (require, exports, module) { $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 @@ 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); 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(); } diff --git a/src/extensionsIntegrated/Phoenix-live-preview/panel.html b/src/extensionsIntegrated/Phoenix-live-preview/panel.html index 91745f6392..d5fd35a6fe 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/panel.html +++ b/src/extensionsIntegrated/Phoenix-live-preview/panel.html @@ -1,7 +1,12 @@
- + + From b7c0fd258ad0ed10ecb87e21a1bcef3e67c83b8c Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 23 Apr 2026 13:35:08 +0530 Subject: [PATCH 6/6] feat: use FontAwesome arrow icons for back/forward nav buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace the sprite-icon `leftArrow` / `rightArrow` / `leftArrowDisabled` / `rightArrowDisabled` bitmaps with fa-arrow-left / fa-arrow-right FA icons, matching the weight of the adjacent FA-based sidebar and toolbar buttons (binoculars, search, design-mode toggle) and giving the back/forward pair a browser-style affordance. NavigationProvider still toggles `.nav-back-btn` ↔ `.nav-back-btn-disabled` (and the forward pair) to signal enabled state. The CSS is rewritten as a single icon-button block with a .disabled opacity fork instead of four separate sprite rules. --- src/index.html | 4 +-- src/styles/brackets.less | 53 +++++++++++++++++++--------------------- 2 files changed, 27 insertions(+), 30 deletions(-) diff --git a/src/index.html b/src/index.html index 5ba5083941..f44dc52308 100644 --- a/src/index.html +++ b/src/index.html @@ -914,8 +914,8 @@ phcode.io