mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
[backport core/1.41] fix: restore workflow tabs on browser restart (#10434)
Backport of #10336 to `core/1.41` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10434-backport-core-1-41-fix-restore-workflow-tabs-on-browser-restart-32d6d73d3650817ebd81d72613c5a29c) by [Unito](https://www.unito.io) Co-authored-by: jaeone94 <89377375+jaeone94@users.noreply.github.com>
This commit is contained in:
@@ -764,13 +764,13 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
|
||||
)
|
||||
})
|
||||
|
||||
const generateUniqueFilename = (extension = '') =>
|
||||
`${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
|
||||
|
||||
test.describe('Restore all open workflows on reload', () => {
|
||||
let workflowA: string
|
||||
let workflowB: string
|
||||
|
||||
const generateUniqueFilename = (extension = '') =>
|
||||
`${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}${extension}`
|
||||
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
|
||||
@@ -829,6 +829,82 @@ test.describe('Load workflow', { tag: '@screenshot' }, () => {
|
||||
})
|
||||
})
|
||||
|
||||
test.describe('Restore workflow tabs after browser restart', () => {
|
||||
let workflowA: string
|
||||
let workflowB: string
|
||||
|
||||
test.beforeEach(async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
|
||||
|
||||
workflowA = generateUniqueFilename()
|
||||
await comfyPage.menu.topbar.saveWorkflow(workflowA)
|
||||
workflowB = generateUniqueFilename()
|
||||
await comfyPage.menu.topbar.triggerTopbarCommand(['New'])
|
||||
await comfyPage.menu.topbar.saveWorkflow(workflowB)
|
||||
|
||||
// Wait for localStorage fallback pointers to be written
|
||||
await comfyPage.page.waitForFunction(() => {
|
||||
for (let i = 0; i < window.localStorage.length; i++) {
|
||||
const key = window.localStorage.key(i)
|
||||
if (key?.startsWith('Comfy.Workflow.LastOpenPaths:')) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
})
|
||||
|
||||
// Simulate browser restart: clear sessionStorage (lost on close)
|
||||
// but keep localStorage (survives browser restart)
|
||||
await comfyPage.page.evaluate(() => {
|
||||
sessionStorage.clear()
|
||||
})
|
||||
await comfyPage.setup({ clearStorage: false })
|
||||
})
|
||||
|
||||
test('Restores topbar workflow tabs after browser restart', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.settings.setSetting(
|
||||
'Comfy.Workflow.WorkflowTabsPosition',
|
||||
'Topbar'
|
||||
)
|
||||
// Wait for both restored tabs to render (localStorage fallback is async)
|
||||
await expect(
|
||||
comfyPage.page.locator('.workflow-tabs .workflow-label', {
|
||||
hasText: workflowA
|
||||
})
|
||||
).toBeVisible()
|
||||
|
||||
const tabs = await comfyPage.menu.topbar.getTabNames()
|
||||
const activeWorkflowName = await comfyPage.menu.topbar.getActiveTabName()
|
||||
|
||||
expect(tabs).toEqual(expect.arrayContaining([workflowA, workflowB]))
|
||||
expect(tabs.indexOf(workflowA)).toBeLessThan(tabs.indexOf(workflowB))
|
||||
expect(activeWorkflowName).toEqual(workflowB)
|
||||
})
|
||||
|
||||
test('Restores sidebar workflows after browser restart', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
await comfyPage.settings.setSetting(
|
||||
'Comfy.Workflow.WorkflowTabsPosition',
|
||||
'Sidebar'
|
||||
)
|
||||
await comfyPage.menu.workflowsTab.open()
|
||||
const openWorkflows =
|
||||
await comfyPage.menu.workflowsTab.getOpenedWorkflowNames()
|
||||
const activeWorkflowName =
|
||||
await comfyPage.menu.workflowsTab.getActiveWorkflowName()
|
||||
expect(openWorkflows).toEqual(
|
||||
expect.arrayContaining([workflowA, workflowB])
|
||||
)
|
||||
expect(openWorkflows.indexOf(workflowA)).toBeLessThan(
|
||||
openWorkflows.indexOf(workflowB)
|
||||
)
|
||||
expect(activeWorkflowName).toEqual(workflowB)
|
||||
})
|
||||
})
|
||||
|
||||
test('Auto fit view after loading workflow', async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting(
|
||||
'Comfy.EnableWorkflowViewRestore',
|
||||
|
||||
@@ -250,61 +250,125 @@ function readSessionPointer<T extends { workspaceId: string }>(
|
||||
|
||||
/**
|
||||
* Reads the active path pointer from sessionStorage.
|
||||
* Falls back to workspace-based search when clientId changes after reload.
|
||||
* Falls back to workspace-based search when clientId changes after reload,
|
||||
* then to localStorage when sessionStorage is empty (browser restart).
|
||||
*/
|
||||
export function readActivePath(
|
||||
clientId: string,
|
||||
targetWorkspaceId?: string
|
||||
): ActivePathPointer | null {
|
||||
return readSessionPointer<ActivePathPointer>(
|
||||
StorageKeys.activePath(clientId),
|
||||
StorageKeys.prefixes.activePath,
|
||||
targetWorkspaceId
|
||||
return (
|
||||
readSessionPointer<ActivePathPointer>(
|
||||
StorageKeys.activePath(clientId),
|
||||
StorageKeys.prefixes.activePath,
|
||||
targetWorkspaceId
|
||||
) ??
|
||||
(targetWorkspaceId
|
||||
? readLocalPointer<ActivePathPointer>(
|
||||
StorageKeys.lastActivePath(targetWorkspaceId),
|
||||
isValidActivePathPointer
|
||||
)
|
||||
: null)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes the active path pointer to sessionStorage.
|
||||
* Writes the active path pointer to both sessionStorage (tab-scoped)
|
||||
* and localStorage (survives browser restart).
|
||||
*/
|
||||
export function writeActivePath(
|
||||
clientId: string,
|
||||
pointer: ActivePathPointer
|
||||
): void {
|
||||
try {
|
||||
const key = StorageKeys.activePath(clientId)
|
||||
sessionStorage.setItem(key, JSON.stringify(pointer))
|
||||
} catch {
|
||||
// Best effort - ignore errors
|
||||
}
|
||||
const json = JSON.stringify(pointer)
|
||||
writeStorage(sessionStorage, StorageKeys.activePath(clientId), json)
|
||||
writeStorage(
|
||||
localStorage,
|
||||
StorageKeys.lastActivePath(pointer.workspaceId),
|
||||
json
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the open paths pointer from sessionStorage.
|
||||
* Falls back to workspace-based search when clientId changes after reload.
|
||||
* Falls back to workspace-based search when clientId changes after reload,
|
||||
* then to localStorage when sessionStorage is empty (browser restart).
|
||||
*/
|
||||
export function readOpenPaths(
|
||||
clientId: string,
|
||||
targetWorkspaceId?: string
|
||||
): OpenPathsPointer | null {
|
||||
return readSessionPointer<OpenPathsPointer>(
|
||||
StorageKeys.openPaths(clientId),
|
||||
StorageKeys.prefixes.openPaths,
|
||||
targetWorkspaceId
|
||||
return (
|
||||
readSessionPointer<OpenPathsPointer>(
|
||||
StorageKeys.openPaths(clientId),
|
||||
StorageKeys.prefixes.openPaths,
|
||||
targetWorkspaceId
|
||||
) ??
|
||||
(targetWorkspaceId
|
||||
? readLocalPointer<OpenPathsPointer>(
|
||||
StorageKeys.lastOpenPaths(targetWorkspaceId),
|
||||
isValidOpenPathsPointer
|
||||
)
|
||||
: null)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes the open paths pointer to sessionStorage.
|
||||
* Writes the open paths pointer to both sessionStorage (tab-scoped)
|
||||
* and localStorage (survives browser restart).
|
||||
*/
|
||||
export function writeOpenPaths(
|
||||
clientId: string,
|
||||
pointer: OpenPathsPointer
|
||||
): void {
|
||||
const json = JSON.stringify(pointer)
|
||||
writeStorage(sessionStorage, StorageKeys.openPaths(clientId), json)
|
||||
writeStorage(
|
||||
localStorage,
|
||||
StorageKeys.lastOpenPaths(pointer.workspaceId),
|
||||
json
|
||||
)
|
||||
}
|
||||
|
||||
function hasWorkspaceId(obj: Record<string, unknown>): boolean {
|
||||
return typeof obj.workspaceId === 'string'
|
||||
}
|
||||
|
||||
function isValidActivePathPointer(value: unknown): value is ActivePathPointer {
|
||||
if (typeof value !== 'object' || value === null) return false
|
||||
const obj = value as Record<string, unknown>
|
||||
return hasWorkspaceId(obj) && typeof obj.path === 'string'
|
||||
}
|
||||
|
||||
function isValidOpenPathsPointer(value: unknown): value is OpenPathsPointer {
|
||||
if (typeof value !== 'object' || value === null) return false
|
||||
const obj = value as Record<string, unknown>
|
||||
return (
|
||||
hasWorkspaceId(obj) &&
|
||||
Array.isArray(obj.paths) &&
|
||||
typeof obj.activeIndex === 'number'
|
||||
)
|
||||
}
|
||||
|
||||
function readLocalPointer<T>(
|
||||
key: string,
|
||||
validate: (value: unknown) => value is T
|
||||
): T | null {
|
||||
try {
|
||||
const key = StorageKeys.openPaths(clientId)
|
||||
sessionStorage.setItem(key, JSON.stringify(pointer))
|
||||
const json = localStorage.getItem(key)
|
||||
if (!json) return null
|
||||
const parsed = JSON.parse(json)
|
||||
return validate(parsed) ? parsed : null
|
||||
} catch {
|
||||
// Best effort - ignore errors
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
function writeStorage(storage: Storage, key: string, value: string): void {
|
||||
try {
|
||||
storage.setItem(key, value)
|
||||
} catch {
|
||||
// Best effort — silently degrade when storage is full or unavailable
|
||||
}
|
||||
}
|
||||
|
||||
@@ -317,7 +381,9 @@ export function clearAllV2Storage(): void {
|
||||
|
||||
const prefixes = [
|
||||
StorageKeys.prefixes.draftIndex,
|
||||
StorageKeys.prefixes.draftPayload
|
||||
StorageKeys.prefixes.draftPayload,
|
||||
StorageKeys.prefixes.lastActivePath,
|
||||
StorageKeys.prefixes.lastOpenPaths
|
||||
]
|
||||
|
||||
try {
|
||||
|
||||
@@ -72,6 +72,19 @@ export const StorageKeys = {
|
||||
return `Comfy.Workflow.OpenPaths:${clientId}`
|
||||
},
|
||||
|
||||
/**
|
||||
* localStorage copies of tab pointers for cross-session restore.
|
||||
* sessionStorage is per-tab (correct for in-session use) but lost
|
||||
* on browser restart; these keys preserve the last-written state.
|
||||
*/
|
||||
lastActivePath(workspaceId: string): string {
|
||||
return `Comfy.Workflow.LastActivePath:${workspaceId}`
|
||||
},
|
||||
|
||||
lastOpenPaths(workspaceId: string): string {
|
||||
return `Comfy.Workflow.LastOpenPaths:${workspaceId}`
|
||||
},
|
||||
|
||||
/**
|
||||
* Prefix patterns for cleanup operations.
|
||||
*/
|
||||
@@ -79,6 +92,8 @@ export const StorageKeys = {
|
||||
draftIndex: 'Comfy.Workflow.DraftIndex.v2:',
|
||||
draftPayload: 'Comfy.Workflow.Draft.v2:',
|
||||
activePath: 'Comfy.Workflow.ActivePath:',
|
||||
openPaths: 'Comfy.Workflow.OpenPaths:'
|
||||
openPaths: 'Comfy.Workflow.OpenPaths:',
|
||||
lastActivePath: 'Comfy.Workflow.LastActivePath:',
|
||||
lastOpenPaths: 'Comfy.Workflow.LastOpenPaths:'
|
||||
}
|
||||
} as const
|
||||
|
||||
Reference in New Issue
Block a user