From f5e251de136d135be9f254ef434decd932a8aeb9 Mon Sep 17 00:00:00 2001 From: abose Date: Tue, 17 Mar 2026 16:15:37 +0530 Subject: [PATCH 1/7] feat: permission mode info tooltip on hover Show a brief description of the current permission mode (Plan/Edit/Full Auto) when hovering the permission bar. Also sets a native title tooltip with the same text. --- src/nls/root/strings.js | 3 +++ src/styles/Extn-AIChatPanel.less | 16 ++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 078fae2389..ea6af0c0ed 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -1929,6 +1929,9 @@ define({ "AI_CHAT_MODE_PLAN": "Plan Mode", "AI_CHAT_MODE_EDIT": "Edit Mode", "AI_CHAT_MODE_FULL_AUTO": "Full Auto", + "AI_CHAT_MODE_INFO_PLAN": "AI will propose a plan before making changes", + "AI_CHAT_MODE_INFO_EDIT": "AI can edit files. Shell commands need approval", + "AI_CHAT_MODE_INFO_FULL_AUTO": "AI can edit files and run commands without approval", "AI_CHAT_BASH_CONFIRM_TITLE": "Allow command?", "AI_CHAT_BASH_ALLOW": "Allow", "AI_CHAT_BASH_DENY": "Deny", diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less index 35ff4c8f50..1dd3cc82d5 100644 --- a/src/styles/Extn-AIChatPanel.less +++ b/src/styles/Extn-AIChatPanel.less @@ -1747,6 +1747,22 @@ color: @project-panel-text-2; line-height: 1; } + + .ai-permission-info { + display: none; + margin-left: auto; + font-size: 11px; + line-height: 1; + pointer-events: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: @project-panel-text-2; + } + + &:hover .ai-permission-info { + display: inline; + } } .ai-chat-context-bar { From 92f517bf453e5de58b68c7d6126b7014d30eca90 Mon Sep 17 00:00:00 2001 From: abose Date: Tue, 17 Mar 2026 16:58:40 +0530 Subject: [PATCH 2/7] fix: add translatable Shift+Tab hint and enable pointer events on info label --- src/nls/root/strings.js | 1 + src/styles/Extn-AIChatPanel.less | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index ea6af0c0ed..421764934d 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -1932,6 +1932,7 @@ define({ "AI_CHAT_MODE_INFO_PLAN": "AI will propose a plan before making changes", "AI_CHAT_MODE_INFO_EDIT": "AI can edit files. Shell commands need approval", "AI_CHAT_MODE_INFO_FULL_AUTO": "AI can edit files and run commands without approval", + "AI_CHAT_MODE_SWITCH_HINT": "(Shift+Tab to switch)", "AI_CHAT_BASH_CONFIRM_TITLE": "Allow command?", "AI_CHAT_BASH_ALLOW": "Allow", "AI_CHAT_BASH_DENY": "Deny", diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less index 1dd3cc82d5..370bfe321c 100644 --- a/src/styles/Extn-AIChatPanel.less +++ b/src/styles/Extn-AIChatPanel.less @@ -1753,7 +1753,7 @@ margin-left: auto; font-size: 11px; line-height: 1; - pointer-events: none; + pointer-events: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; From 075843a3ade8d0184d7e71aab2fa9a5b691998b6 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 19 Mar 2026 22:04:56 +0530 Subject: [PATCH 3/7] feat: new Dark Phoenix theme --- .../Phoenix-live-preview/live-preview.css | 4 +-- src/styles/Extn-AIChatPanel.less | 12 ++++--- src/styles/Extn-SidebarTabs.less | 2 +- src/styles/brackets.less | 34 +++++++++++-------- src/styles/brackets_core_ui_variables.less | 10 +++--- src/styles/brackets_patterns_override.less | 8 ++--- src/styles/brackets_scrollbars.less | 2 +- src/styles/brackets_theme_default.less | 11 ++++-- 8 files changed, 46 insertions(+), 37 deletions(-) diff --git a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css index 6e3536afd7..2a0d040ee6 100644 --- a/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css +++ b/src/extensionsIntegrated/Phoenix-live-preview/live-preview.css @@ -160,9 +160,9 @@ overflow: hidden; white-space: nowrap; cursor: pointer; - background: #3C3F41; + background: transparent; box-shadow: none; - border: 1px solid #3C3F41; + border: 1px solid transparent; box-sizing: border-box; color: #a0a0a0; font-size: 14px; diff --git a/src/styles/Extn-AIChatPanel.less b/src/styles/Extn-AIChatPanel.less index 370bfe321c..c3310c6435 100644 --- a/src/styles/Extn-AIChatPanel.less +++ b/src/styles/Extn-AIChatPanel.less @@ -36,7 +36,7 @@ flex: 1; min-height: 0; overflow: hidden; - background-color: @bc-sidebar-bg; + background-color: @bc-ai-sidebar-bg; color: @project-panel-text-1; font-size: @sidebar-content-font-size; container-type: inline-size; @@ -263,6 +263,7 @@ -webkit-user-select: text; user-select: text; cursor: default; + background-color: @bc-ai-sidebar-bg; } /* ── Individual messages ────────────────────────────────────────────── */ @@ -1695,14 +1696,15 @@ .ai-chat-input-wrap { display: flex; align-items: flex-end; - background-color: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.08); + background-color: @bc-ai-input-bg; + border: 1px solid @bc-ai-input-border; border-radius: 8px; transition: border-color 0.15s ease; overflow: hidden; &:focus-within { - border-color: @bc-btn-border-focused; + background-color: @bc-ai-input-bg-focused; + border-color: @bc-ai-input-border-focus; } &.disabled { @@ -1947,7 +1949,7 @@ .ai-chat-textarea { flex: 1; min-width: 0; - background: none; + background: transparent !important; border: none !important; color: @project-panel-text-1; font-size: @sidebar-content-font-size; diff --git a/src/styles/Extn-SidebarTabs.less b/src/styles/Extn-SidebarTabs.less index 065ee17362..9a79950d70 100644 --- a/src/styles/Extn-SidebarTabs.less +++ b/src/styles/Extn-SidebarTabs.less @@ -23,7 +23,7 @@ #navTabBar { display: none; align-items: center; - background-color: @bc-sidebar-bg; + background-color: @bc-ai-sidebar-bg; height: 2rem; overflow: hidden; user-select: none; diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 05855333ac..3cc429803f 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -268,6 +268,8 @@ a, img { left: @sidebar-width; // changed dynamically via Resizer right: @main-toolbar-width; z-index: @z-index-brackets-main-content; + border-left: 2px solid rgba(255, 255, 255, 0.10); + border-right: 2px solid rgba(255, 255, 255, 0.10); } .force-right-zero { @@ -1198,7 +1200,7 @@ a, img { /* Project panel */ #working-set-list-container { - background: @bc-sidebar-bg; + background: @bc-working-set-bg; display: block; > div:last-child ul { @@ -1214,19 +1216,19 @@ a, img { position: relative; height: 19px; padding: 10px 0 9px 12px; - background: @bc-sidebar-bg; + background: @bc-working-set-bg; color: @project-panel-text-2; text-shadow: none; overflow: hidden; > span { - background: @bc-sidebar-bg; + background: @bc-working-set-bg; position: relative; z-index: 9; } > div { - background-color: @dark-bc-sidebar-bg; + background-color: @bc-working-set-bg; opacity: 1; } } @@ -1385,15 +1387,16 @@ a, img { #project-files-header { display: flex; align-items: center; - border-top: 1px solid rgba(255, 255, 255, 0.05); + border-top: none; padding: 6px 0 6px 12px; font-size: 15px; color: @project-panel-text-2; + background-color: @bc-project-files-bg; overflow: hidden; gap: .5em; .btn-alt-quiet { - background-color: #47484b; + background-color: transparent; // relative positioning plus z-index make sure that the splitview button flows under the left aligned buttons in the project pane when there are no working set files position: relative; @@ -1466,8 +1469,8 @@ a, img { .sidebar-selection, .filetree-selection { background: @bc-sidebar-selection; - border-top: 1px solid @bc-shadow-small; - border-bottom: 1px solid @bc-highlight; + border-top: none; + border-bottom: none; box-sizing: border-box; height: 23px; width: 100%; @@ -1476,8 +1479,8 @@ a, img { .sidebar-selection-extension, .filetree-selection-extension { background: @bc-sidebar-selection; - border-top: 1px solid @bc-shadow-small; - border-bottom: 1px solid @bc-highlight; + border-top: none; + border-bottom: none; box-sizing: border-box; height: 23px; width: 9px; /* quiet scrollbar width */ @@ -1511,6 +1514,7 @@ a, img { #project-files-container { .box-flex(1); + background-color: @bc-project-files-bg; div > ul { padding-bottom: 24px; @@ -1521,20 +1525,20 @@ a, img { .scroller-shadow { background-size: 100%; background-repeat: no-repeat; - height: 5px; + height: 8px; position: fixed; z-index: @z-index-brackets-scroller-shadow; pointer-events: none; // serves as a "click through", so clicks go to the file tree behind (see #12684) &.top { - #gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0)); - background-position: 0 -5px; + #gradient > .vertical(rgba(0,0,0,0.18), rgba(0,0,0,0)); + background-position: 0 -8px; background-color: transparent; /* override background-color: @endColor from #gradient.vertical */ } &.bottom { - #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.1)); - background-position: 0 5px; + #gradient > .vertical(rgba(0,0,0,0), rgba(0,0,0,0.12)); + background-position: 0 8px; background-color: transparent; /* override background-color: @endColor from #gradient.vertical */ } } diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less index 5dd433c43a..200b2d920c 100644 --- a/src/styles/brackets_core_ui_variables.less +++ b/src/styles/brackets_core_ui_variables.less @@ -149,8 +149,8 @@ // Sidebar -@bc-sidebar-bg: #3C3F41; -@bc-sidebar-selection: #2D2E30; +@bc-sidebar-bg: #252525; +@bc-sidebar-selection: #404448; // images @button-icon: "images/find-replace-sprites.svg"; @@ -262,11 +262,11 @@ @dark-bc-secondary-btn-border: #202020; // Sidebar -@dark-bc-sidebar-bg: #3C3F41; -@dark-bc-sidebar-selection: #2D2E30; +@dark-bc-sidebar-bg: #252525; +@dark-bc-sidebar-selection: #404448; // Plugin panel -@plugin-panel-bg: #3C3F41; +@plugin-panel-bg: #252525; // images @dark-button-icon: "images/find-replace-sprites-dark.svg"; diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index 61700cdb50..b8ad1471a8 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -259,7 +259,7 @@ a:focus { } .selected-button{ - background-color: @plugin-panel-bg !important; + background-color: rgba(255, 255, 255, 0.12) !important; margin-left: 3px !important; margin-right: 0 !important; } @@ -280,11 +280,7 @@ a:focus { } > a:hover { - background-color: @bc-shadow !important; - - .dark & { - background-color: @dark-bc-shadow !important; - } + background-color: rgba(255, 255, 255, 0.08) !important; } > a:active { diff --git a/src/styles/brackets_scrollbars.less b/src/styles/brackets_scrollbars.less index 84e71d4c97..2fe9880273 100644 --- a/src/styles/brackets_scrollbars.less +++ b/src/styles/brackets_scrollbars.less @@ -26,7 +26,7 @@ #project-files-container:hover, .ai-chat-messages:hover, .ai-session-history-dropdown:hover { - background-color: rgba(128, 128, 128, 0); + background-color: inherit; } /* Temporary implementation of unobtrusive scrollbars. diff --git a/src/styles/brackets_theme_default.less b/src/styles/brackets_theme_default.less index 0caf282a24..e4c7c71897 100644 --- a/src/styles/brackets_theme_default.less +++ b/src/styles/brackets_theme_default.less @@ -86,10 +86,17 @@ @matching-bracket: #cfead6; /* sidebar/toolbar colors */ -@project-panel-base-color: #47484B; +@bc-ai-sidebar-bg: #252525; +@bc-ai-input-bg: #2a2a2a; +@bc-ai-input-bg-focused: #2d2d2d; +@bc-ai-input-border: rgba(255, 255, 255, 0.08); +@bc-ai-input-border-focus: rgba(255, 255, 255, 0.2); +@project-panel-base-color: @bc-project-files-bg; +@bc-working-set-bg: #2f2f2f; +@bc-project-files-bg: #252525; @project-panel-text-1: #ffffff; @project-panel-text-2: #adb9bd; -@main-toolbar-background-color: #5D5F60; +@main-toolbar-background-color: #252525; /* open working file highlight */ @open-working-file-name-highlight: #8fddff; From 6fac089746f97de1cfdcaf82cccfa38f885d6fd6 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 19 Mar 2026 22:24:35 +0530 Subject: [PATCH 4/7] build: update pro deps --- tracking-repos.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tracking-repos.json b/tracking-repos.json index f26946e066..597de61ce6 100644 --- a/tracking-repos.json +++ b/tracking-repos.json @@ -1,5 +1,5 @@ { "phoenixPro": { - "commitID": "4ca7bc6eea7ad4c94fbf321ae2c854f533fb8bd2" + "commitID": "56017ed5a71d6ff22199f9826803ed0cbabaa22e" } } From 4b40c1d50223f83a2487833bf707c873c266c062 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 19 Mar 2026 22:57:28 +0530 Subject: [PATCH 5/7] chore: Dark Phoenix selected file changes --- src/styles/brackets.less | 3 ++- src/styles/brackets_core_ui_variables.less | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index 3cc429803f..cdc8fd3719 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -1471,6 +1471,7 @@ a, img { background: @bc-sidebar-selection; border-top: none; border-bottom: none; + border-left: none; box-sizing: border-box; height: 23px; width: 100%; @@ -1478,7 +1479,7 @@ a, img { } .sidebar-selection-extension, .filetree-selection-extension { - background: @bc-sidebar-selection; + background: transparent; border-top: none; border-bottom: none; box-sizing: border-box; diff --git a/src/styles/brackets_core_ui_variables.less b/src/styles/brackets_core_ui_variables.less index 200b2d920c..afa394ce41 100644 --- a/src/styles/brackets_core_ui_variables.less +++ b/src/styles/brackets_core_ui_variables.less @@ -150,7 +150,7 @@ // Sidebar @bc-sidebar-bg: #252525; -@bc-sidebar-selection: #404448; +@bc-sidebar-selection: rgba(90, 140, 255, 0.18); // images @button-icon: "images/find-replace-sprites.svg"; @@ -263,7 +263,7 @@ // Sidebar @dark-bc-sidebar-bg: #252525; -@dark-bc-sidebar-selection: #404448; +@dark-bc-sidebar-selection: rgba(90, 140, 255, 0.18); // Plugin panel @plugin-panel-bg: #252525; From 734cd71bcffdb0ad64362ba4833595c03b2e9f79 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 19 Mar 2026 23:05:20 +0530 Subject: [PATCH 6/7] fix: refine sidebar selection and vertically center file text Remove left border from selection to avoid competing with git markers, use flat rgba blue fill only. Fix 1px vertical text offset in working set file items. --- src/styles/brackets.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/styles/brackets.less b/src/styles/brackets.less index cdc8fd3719..009700318f 100644 --- a/src/styles/brackets.less +++ b/src/styles/brackets.less @@ -1447,7 +1447,7 @@ a, img { height: 16px; line-height: 15px; margin-left: 18px; - padding: 3px 0 3px 0; + padding: 4px 0 3px 0; cursor: default; @@ -1469,9 +1469,8 @@ a, img { .sidebar-selection, .filetree-selection { background: @bc-sidebar-selection; - border-top: none; - border-bottom: none; - border-left: none; + border: none; + box-shadow: none; box-sizing: border-box; height: 23px; width: 100%; From d453fbe63f362ab239a302f70e3a0bd241a32692 Mon Sep 17 00:00:00 2001 From: abose Date: Thu, 19 Mar 2026 23:56:25 +0530 Subject: [PATCH 7/7] feat: add visible-scrollbars class and fix dropdown overflow scrollbar Add .visible-scrollbars reusable class for always-visible scrollbars in dark containers where quiet-scrollbars are too subtle. Apply to .ai-plan-body via CSS selector. Add theme-aware scrollbar for .dropdown-overflow-menu using @bc-menu-bg/@dark-bc-menu-bg for track. --- src/styles/brackets_scrollbars.less | 45 +++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/src/styles/brackets_scrollbars.less b/src/styles/brackets_scrollbars.less index 2fe9880273..25bf78ef12 100644 --- a/src/styles/brackets_scrollbars.less +++ b/src/styles/brackets_scrollbars.less @@ -85,6 +85,51 @@ } +/* Always-visible scrollbar — same style as quiet-scrollbars but always shown. + Add element classes here to opt in. */ +.visible-scrollbars, +.ai-plan-body { + &::-webkit-scrollbar { + width: 9px; + height: 9px; + background-color: transparent; + } + &::-webkit-scrollbar-thumb { + border-radius: 999px; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.6) inset !important; + border: 2px solid transparent !important; + } + + .dark & { + &::-webkit-scrollbar-thumb { + box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important; + } + } +} + +/* Dropdown overflow menu needs track bg to match its popup background */ +.dropdown-overflow-menu { + &::-webkit-scrollbar { + width: 9px; + height: 9px; + background-color: @bc-menu-bg !important; + } + &::-webkit-scrollbar-thumb { + border-radius: 999px; + box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3) inset !important; + border: 2px solid transparent !important; + } + + .dark & { + &::-webkit-scrollbar { + background-color: @dark-bc-menu-bg !important; + } + &::-webkit-scrollbar-thumb { + box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3) inset !important; + } + } +} + .platform-linux, .platform-mac { // Note: when changing padding/margins, may need to adjust metrics in ScrollTrackMarkers.js