feat(editor): 文件窗口与资源管理器二合一 + 声明式设置 select 行 (#151)
* feat(editor): merged explorer mode — path input, docked file tree, global name search
New editorExplorer pref (default on, editor card gear): the editor tab gains
a path-input header and a toggleable right-docked tree panel (per-tab state
in tab.meta.treeOpen; file tabs default closed, the seeded path-less home
tab defaults open). Fresh sessions seed that empty editor tab instead of
the explorer tab when merged mode is on; the standalone explorer tab stays
in the + menu unchanged.
- Extract FileTree.tsx from ExplorerView (shared by both hosts)
- Host fs.search route: recursive case-insensitive name search rooted at
the session cwd, budget-capped (200 matches / 100k visited), skips .git,
never descends symlink dirs
- EditorHost reads the pref reactively (boolean snapshot) and keeps the
pre-merge layout verbatim when off
* feat(settings): select row type for declarative settings; editorExplorer as iconed select
- SidebarSettingToggle gains type 'select' with options {value,title,desc,icon}
and multi (default false; stores the picked values as an array in options
order). Any option carrying an icon renders big-icon option cards in the
dropdown and the icon in the closed anchor; icon-less rows are one-line text.
- SelectRow in SideCardSection rides the primitives Menu (portal); single-pick
commits and closes, multi toggles and stays open. Wired for both host-prefs
toggles and plugin-owned pluginToggles via the new onSelectValue seam.
- The editorExplorer merged-mode pref is now an iconed select (merged vs
separate) instead of a switch; the stored value stays boolean.
- Advertise the capability as 'settingSelect' in SIDEBAR_FEATURES.
* feat(editor): unify explorer into the editor surface, resizable tree dock, hoisted toolbar
- One tree implementation, two presentations: the shared TreePanel (global
name search + refresh + FileTree) docks as the editor tab's right panel
and — in merged mode — fills the explorer tab's window; the pref-off
explorer keeps its legacy header shell.
- The docked panel drag-resizes from its left edge (160-480px clamp),
persisted as tab.meta.treeWidth alongside treeOpen.
- The text editor's preview/edit/save toolbar moves into the path-input
header row: FileViewerProps gains internal toolbar fields ('host' mode
skips the viewer's own row, reports EditorToolbarState and registers
EditorToolbarControls); non-merged mode is byte-identical to before.
* feat(editor): single files window with in-place switching; explorer descriptor removed
- editor tab replaces explorer on the + menu (order 10, Files); persisted
explorer tabs migrate to the editor home tab via sanitizeState
- editorExplorer now only controls open behavior: merged = in-place
updateTab, independent = openSidebarFile; both modes share the merged
chrome (path input + hoisted preview/edit/save toolbar + tree toggle)
- file tree context menu gains 'open in new tab' / 'open to the side'
(mintTabId avoids the id safety net; insertLeafAt splits right)
- tree dock resize uses pointer capture (touch-action none, 6px handle)
- defaults: openByDefault off, sidebar width 35%
- file tree clips horizontal overflow (no sideways scroll)
- e2e: mount lane arms the editor-chunk wait before goto and clicks the
tree row's left edge (hover @-reference button sits mid-row); drag lane
expands the panel first (collapsed push writes 0px), waits for the
slide-in to settle, and picks the leftmost col-resize strip; 'Files'
title assertions require draggable to skip the bottom panel's welcome
cards
* feat(editor): split mode turns the path-less window into the standalone explorer
In independent (split) mode a path-less files window renders ONLY the
tree panel (search + FileTree, full-window form) — no path input, no
hoisted toolbar, no tree toggle. File clicks open per-path editor tabs
(full chrome, tree docked closed by default) through openSidebarFile,
unchanged. Merged mode is untouched (chrome + docked tree, in-place
switching). TreePanel's previously reserved 'full' prop now has its
consumer.
This commit is contained in:
@@ -83,28 +83,8 @@ interface FrameSample {
|
||||
test('width drag tracks the shell 1:1 with transitions disabled (issue #92)', async ({ page }) => {
|
||||
await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' })
|
||||
await expect(page.locator('#root > *')).not.toHaveCount(0, { timeout: 90_000 })
|
||||
// The seeded session opens the right panel by default: the layout push
|
||||
// variable becomes live once the panel mounts (session activation lags
|
||||
// the shell render).
|
||||
await expect
|
||||
.poll(async () => (
|
||||
await page.evaluate(() => document.documentElement.style.getPropertyValue('--dsh-sidebar-width'))
|
||||
), { timeout: 90_000 })
|
||||
.not.toBe('')
|
||||
|
||||
// The width drag strip is the panel's left-edge hit strip. There is no
|
||||
// dedicated hook (the skinning contract is token-driven), so locate it
|
||||
// semantically: the only `cursor: col-resize` element in the sidebar.
|
||||
const stripBox = await page.evaluate(() => {
|
||||
const host = document.querySelector('[data-dsh-better-sidebar]')
|
||||
if (host === null) return null
|
||||
const found = [...host.querySelectorAll<HTMLElement>('*')]
|
||||
.find(el => getComputedStyle(el).cursor === 'col-resize')
|
||||
if (found === undefined) return null
|
||||
const r = found.getBoundingClientRect()
|
||||
return { x: r.x, y: r.y, width: r.width, height: r.height }
|
||||
})
|
||||
expect(stripBox, 'the width drag strip must be present (cursor: col-resize)').not.toBeNull()
|
||||
const sidebar = page.locator('[data-dsh-better-sidebar]')
|
||||
await expect(sidebar).toBeAttached({ timeout: 90_000 })
|
||||
|
||||
// Dismiss whatever onboarding takeover is present (same dance as the mount
|
||||
// lane), so the pointer can reach the strip without a masking overlay.
|
||||
@@ -131,12 +111,72 @@ test('width drag tracks the shell 1:1 with transitions disabled (issue #92)', as
|
||||
if (!dismissed) break
|
||||
}
|
||||
|
||||
// openByDefault defaults OFF: a fresh session's panel starts collapsed, and
|
||||
// the collapsed layout push still writes `--dsh-sidebar-width: 0px` — so the
|
||||
// geometry checks below are meaningless until the panel is expanded through
|
||||
// the toggle cluster.
|
||||
const expandButton = sidebar.getByRole('button', { name: 'Expand sidebar' })
|
||||
await expect(expandButton, 'the collapsed toggle cluster must offer the expand button').toHaveCount(1)
|
||||
await expandButton.click()
|
||||
|
||||
// The layout push variable becomes live (non-zero) once the panel opens
|
||||
// (session activation lags the shell render).
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const value = await page.evaluate(() => document.documentElement.style.getPropertyValue('--dsh-sidebar-width'))
|
||||
return value !== '' && value !== '0px'
|
||||
}, { timeout: 90_000 })
|
||||
.toBe(true)
|
||||
|
||||
// The width drag strip is the panel's left-edge hit strip. There is no
|
||||
// dedicated hook (the skinning contract is token-driven), so locate it
|
||||
// semantically among the sidebar's `cursor: col-resize` elements — the files
|
||||
// window's tree-dock handle matches too, but the panel strip is always the
|
||||
// LEFTMOST one (the dock sits at the panel's right edge).
|
||||
const locateStrip = `(() => {
|
||||
const host = document.querySelector('[data-dsh-better-sidebar]')
|
||||
if (host === null) return null
|
||||
const boxes = [...host.querySelectorAll('*')]
|
||||
.filter(el => getComputedStyle(el).cursor === 'col-resize')
|
||||
.map(el => el.getBoundingClientRect())
|
||||
.filter(r => r.width > 0 && r.height > 0)
|
||||
.sort((a, b) => a.x - b.x)
|
||||
const r = boxes[0]
|
||||
if (r === undefined) return null
|
||||
const varWidth = parseFloat(document.documentElement.style.getPropertyValue('--dsh-sidebar-width'))
|
||||
return {
|
||||
x: r.x, y: r.y, width: r.width, height: r.height,
|
||||
varWidth: Number.isNaN(varWidth) ? 0 : varWidth,
|
||||
innerWidth: window.innerWidth,
|
||||
}
|
||||
})()`
|
||||
type StripBox = { x: number; y: number; width: number; height: number; varWidth: number; innerWidth: number }
|
||||
// The panel SLIDES IN from the right on expand: locating the strip before
|
||||
// the open transition settles captures a mid-animation box at the viewport
|
||||
// edge, and the drag lands off-panel. Wait until the strip sits at the
|
||||
// pushed layout edge (its right edge ≈ innerWidth - the push variable).
|
||||
await expect
|
||||
.poll(async () => {
|
||||
const box = await page.evaluate<StripBox | null>(locateStrip)
|
||||
if (box === null) return false
|
||||
return Math.abs((box.x + box.width) - (box.innerWidth - box.varWidth)) <= 8
|
||||
}, { timeout: 30_000 })
|
||||
.toBe(true)
|
||||
const stripBox = await page.evaluate<StripBox | null>(locateStrip)
|
||||
expect(stripBox, 'the width drag strip must be present (cursor: col-resize)').not.toBeNull()
|
||||
|
||||
// Instrument a per-frame sampler BEFORE the drag begins.
|
||||
await page.evaluate(() => {
|
||||
type Sample = FrameSample
|
||||
const samples: Sample[] = []
|
||||
const strip = [...document.querySelectorAll<HTMLElement>('*')]
|
||||
.find(el => getComputedStyle(el).cursor === 'col-resize')
|
||||
// Same rule as the strip locator above: the LEFTMOST col-resize element
|
||||
// inside the sidebar host (the tree-dock handle is further right).
|
||||
const host = document.querySelector('[data-dsh-better-sidebar]')
|
||||
const strip = host === null
|
||||
? null
|
||||
: [...host.querySelectorAll<HTMLElement>('*')]
|
||||
.filter(el => getComputedStyle(el).cursor === 'col-resize')
|
||||
.sort((a, b) => a.getBoundingClientRect().x - b.getBoundingClientRect().x)[0]
|
||||
// The conversation column: the grid item the layout push squeezes (the
|
||||
// same nth-child(2) layout.css targets for the vertical push; its right
|
||||
// edge is where the width push lands).
|
||||
|
||||
+54
-22
@@ -13,10 +13,13 @@
|
||||
* plugin's `[data-dsh-better-sidebar]` host mount;
|
||||
* 3. asserts the plugin's crash markers never appear (no RenderBoundary /
|
||||
* fail() strips, no `pageerror`, no plugin-prefixed console errors);
|
||||
* 4. sweeps every built-in tab (Explorer / Source Control / Tasks /
|
||||
* Terminal / Browser) — including the lazily-fetched terminal chunk —
|
||||
* and then opens a seeded file through the Explorer to force the
|
||||
* lazily-fetched editor chunk (client-editor.js) to load as well.
|
||||
* 4. expands the collapsed panel (openByDefault defaults off), sweeps every
|
||||
* built-in tab (Files / Source Control / Tasks / Terminal / Browser) —
|
||||
* including the lazily-fetched terminal chunk — and then opens a seeded
|
||||
* file through the Files window's tree (in-place mode: the seeded home
|
||||
* tab itself switches to the file, no new tab), while a response wait
|
||||
* armed before goto proves the lazily-fetched editor chunk
|
||||
* (client-editor.js) loaded.
|
||||
*
|
||||
* Deterministic by construction: every wait is on a DOM/network marker, the
|
||||
* suite is serial (one server instance), and any crash trips the very next
|
||||
@@ -35,8 +38,8 @@ if (!BASE_URL) {
|
||||
/** Workspace the sidebar renders against (created by the lane's seeding). */
|
||||
const WORKSPACE_PATH = process.env.DSH_E2E_WORKSPACE ?? join(tmpdir(), 'dsh-e2e-workspace')
|
||||
|
||||
/** A file seeded into the workspace, opened through the Explorer to force the
|
||||
* lazily-packed editor chunk (client-editor.js) to load. */
|
||||
/** A file seeded into the workspace, opened through the Files window's tree to
|
||||
* exercise the file-open path (editor chunk = client-editor.js). */
|
||||
const SEEDED_FILE = 'hello.txt'
|
||||
|
||||
/**
|
||||
@@ -47,7 +50,7 @@ const SEEDED_FILE = 'hello.txt'
|
||||
const CRASH_STRIP_PATTERNS = [/^dsh-better-sidebar:/, /^\[dsh-better-sidebar\]/]
|
||||
|
||||
/** Built-in tab titles the sweep drives (en-US copy; follows DSH locale). */
|
||||
const BUILTIN_TABS = ['Explorer', 'Source Control', 'Tasks', 'Terminal', 'Browser']
|
||||
const BUILTIN_TABS = ['Files', 'Source Control', 'Tasks', 'Terminal', 'Browser']
|
||||
|
||||
let api: APIRequestContext
|
||||
|
||||
@@ -91,6 +94,15 @@ test('plugin mounts into the DSH shell and survives a built-in tab sweep', async
|
||||
|
||||
// Load the shell. The app renders into #root; the plugin appends its own
|
||||
// [data-dsh-better-sidebar] host once its client half activates.
|
||||
//
|
||||
// The editor chunk (client-editor.js) loads as soon as ANY files-window tab
|
||||
// renders — the seeded home tab mounts the moment the panel expands, long
|
||||
// before the tree click below — so the response wait must be armed BEFORE
|
||||
// goto, or it misses the fetch and times out.
|
||||
const editorChunk = page.waitForResponse(
|
||||
(response) => response.url().includes('/sidebar/bundle/editor.js'),
|
||||
{ timeout: 120_000 },
|
||||
)
|
||||
await page.goto(BASE_URL, { waitUntil: 'domcontentloaded' })
|
||||
await expect(page.locator('#root > *')).not.toHaveCount(0, { timeout: 90_000 })
|
||||
const sidebar = page.locator('[data-dsh-better-sidebar]')
|
||||
@@ -134,6 +146,12 @@ test('plugin mounts into the DSH shell and survives a built-in tab sweep', async
|
||||
const tabBar = sidebar.locator('[title]')
|
||||
await expect(tabBar.first()).toBeAttached({ timeout: 90_000 })
|
||||
|
||||
// openByDefault defaults OFF: a fresh session's panel starts collapsed.
|
||||
// Expand it through the toggle cluster before the layout push can apply.
|
||||
const expandButton = sidebar.getByRole('button', { name: 'Expand sidebar' })
|
||||
await expect(expandButton, 'the collapsed toggle cluster must offer the expand button').toHaveCount(1)
|
||||
await expandButton.click()
|
||||
|
||||
// The skinning contract is token-driven (AGENTS.md §8): the panels consume
|
||||
// `--dsw-alias-bg-layer-1`, so switching a skin re-skins the sidebar with
|
||||
// no per-skin code. The layout push variable must be live once the panel
|
||||
@@ -179,22 +197,36 @@ test('plugin mounts into the DSH shell and survives a built-in tab sweep', async
|
||||
await assertNoCrash()
|
||||
}
|
||||
|
||||
// The editor tab is hidden from the + menu — its CodeMirror chunk
|
||||
// (client-editor.js) only loads when a file is opened. Exercise that path
|
||||
// explicitly: reopen Explorer, open the seeded file, and require the chunk
|
||||
// round-trip, so a missing/corrupt editor chunk fails the lane.
|
||||
await newTabButton.click()
|
||||
const explorerItem = page.getByRole('menuitem', { name: 'Explorer' }).first()
|
||||
await expect(explorerItem, 'Explorer must be re-openable for the editor-chunk probe').toHaveCount(1)
|
||||
await explorerItem.click()
|
||||
const editorChunk = page.waitForResponse(
|
||||
(response) => response.url().includes('/sidebar/bundle/editor.js'),
|
||||
{ timeout: 30_000 },
|
||||
)
|
||||
const fileRow = sidebar.locator(`[role="button"][title$="${SEEDED_FILE}"]`)
|
||||
await expect(fileRow, `the seeded "${SEEDED_FILE}" file must appear in the Explorer tree`).toHaveCount(1, { timeout: 30_000 })
|
||||
await fileRow.click()
|
||||
// The editor chunk (client-editor.js) only loads when a files-window tab
|
||||
// renders. Exercise the file-open path explicitly through the Files window's
|
||||
// own tree: the seeded home tab ("Files") is already open with its tree
|
||||
// panel pinned — activate it from the tab strip, open the seeded file, and
|
||||
// require the chunk round-trip (armed before goto), so a missing/corrupt
|
||||
// editor chunk fails the lane.
|
||||
// Tab-strip tabs carry `draggable="true"`; the always-mounted (hidden)
|
||||
// bottom panel's empty-pane welcome cards repeat the + menu labels with
|
||||
// `title="Files"`, so a bare `[title="Files"]` match is ambiguous.
|
||||
const filesTab = sidebar.locator('[title="Files"][draggable="true"]').first()
|
||||
await expect(filesTab, 'the seeded files-window home tab must be in the tab strip').toHaveCount(1)
|
||||
await filesTab.click()
|
||||
// Inactive tabs stay mounted (display:none); only the ACTIVE files
|
||||
// window's embedded tree is visible — match the visible row.
|
||||
const fileRow = sidebar.locator(`[role="button"][title$="${SEEDED_FILE}"]:visible`)
|
||||
await expect(fileRow, `the seeded "${SEEDED_FILE}" file must appear in the files window's tree`).toHaveCount(1, { timeout: 30_000 })
|
||||
// Click near the row's LEFT edge: hovering reveals an @-reference button at
|
||||
// the row's right end, and a center click on a narrow dock lands on it
|
||||
// (referencing the file into the composer instead of opening it).
|
||||
await fileRow.click({ position: { x: 8, y: 8 } })
|
||||
await editorChunk
|
||||
// In-place mode (editorExplorer default): the SAME tab switches to the
|
||||
// file — its title is rewritten, no new tab appears. One "Files" tab
|
||||
// remains: the second files window the sweep opened via the + menu.
|
||||
await expect(
|
||||
sidebar.locator('[title="Files"][draggable="true"]'),
|
||||
'in-place mode rewrites the activated home tab instead of opening a new one',
|
||||
).toHaveCount(1)
|
||||
const pathInput = sidebar.locator('input[placeholder^="File path"]:visible')
|
||||
await expect(pathInput, 'the files window header path input shows the opened file').toHaveValue(new RegExp(`${SEEDED_FILE}$`))
|
||||
await page.waitForTimeout(1_500)
|
||||
await assertNoCrash()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user