Skip to content

Commit 0a29888

Browse files
devjiwonchoidevjiwonchoi
authored
[backport] fix: devtools initial position should be from next config (#83571) (#83994)
backports #83571
1 parent 7a53950 commit 0a29888

File tree

10 files changed

+162
-2
lines changed

10 files changed

+162
-2
lines changed

‎packages/next/src/next-devtools/dev-overlay/shared.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,9 @@ function getStackIgnoringStrictMode(stack: string | undefined) {
251251
const shouldDisableDevIndicator =
252252
process.env.__NEXT_DEV_INDICATOR?.toString() === 'false'
253253

254+
const devToolsInitialPositionFromNextConfig = (process.env
255+
.__NEXT_DEV_INDICATOR_POSITION ?? 'bottom-left') as Corners
256+
254257
export const INITIAL_OVERLAY_STATE: Omit<
255258
OverlayState,
256259
'isErrorOverlayOpen' | 'routerType'
@@ -272,9 +275,9 @@ export const INITIAL_OVERLAY_STATE: Omit<
272275
refreshState: { type: 'idle' },
273276
versionInfo: { installed: '0.0.0', staleness: 'unknown' },
274277
debugInfo: { devtoolsFrontendUrl: undefined },
275-
devToolsPosition: 'bottom-left',
278+
devToolsPosition: devToolsInitialPositionFromNextConfig,
276279
devToolsPanelPosition: {
277-
[STORE_KEY_SHARED_PANEL_LOCATION]: 'bottom-left',
280+
[STORE_KEY_SHARED_PANEL_LOCATION]: devToolsInitialPositionFromNextConfig,
278281
},
279282
devToolsPanelSize: {},
280283
scale: NEXT_DEV_TOOLS_SCALE.Medium,

‎test/development/app-dir/devtools-position/app/layout.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { ReactNode } from 'react'
2+
3+
export default function RootLayout({ children }: { children: ReactNode }) {
4+
return (
5+
<html>
6+
<body>{children}</body>
7+
</html>
8+
)
9+
}

‎test/development/app-dir/devtools-position/app/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <p>hello world</p>
3+
}

‎test/development/app-dir/devtools-position/bottom-left.test.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
import { getDevIndicatorPosition } from './utils'
3+
4+
describe('devtools-position-bottom-left', () => {
5+
const { next } = nextTestSetup({
6+
files: __dirname,
7+
nextConfig: {
8+
devIndicators: {
9+
position: 'bottom-left',
10+
},
11+
},
12+
})
13+
14+
it('should devtools indicator position initially be bottom-left when configured', async () => {
15+
const browser = await next.browser('/')
16+
const style = await getDevIndicatorPosition(browser)
17+
expect(style).toContain('bottom: 20px')
18+
expect(style).toContain('left: 20px')
19+
})
20+
})

‎test/development/app-dir/devtools-position/bottom-right-position.test.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
import { getDevIndicatorPosition } from './utils'
3+
4+
describe('devtools-position-bottom-right', () => {
5+
const { next } = nextTestSetup({
6+
files: __dirname,
7+
nextConfig: {
8+
devIndicators: {
9+
position: 'bottom-right',
10+
},
11+
},
12+
})
13+
14+
it('should devtools indicator position initially be bottom-right when configured', async () => {
15+
const browser = await next.browser('/')
16+
const style = await getDevIndicatorPosition(browser)
17+
expect(style).toContain('bottom: 20px')
18+
expect(style).toContain('right: 20px')
19+
})
20+
})

‎test/development/app-dir/devtools-position/default-position.test.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
import { getDevIndicatorPosition } from './utils'
3+
4+
describe('devtools-position-default', () => {
5+
const { next } = nextTestSetup({
6+
files: __dirname,
7+
})
8+
9+
it('should devtools indicator position initially be bottom-left by default', async () => {
10+
const browser = await next.browser('/')
11+
const style = await getDevIndicatorPosition(browser)
12+
expect(style).toContain('bottom: 20px')
13+
expect(style).toContain('left: 20px')
14+
})
15+
})

‎test/development/app-dir/devtools-position/position-persistence.test.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
import { getDevIndicatorPosition } from './utils'
3+
4+
describe('devtools-position-persistence', () => {
5+
const { next } = nextTestSetup({
6+
files: __dirname,
7+
nextConfig: {
8+
devIndicators: {
9+
position: 'top-right',
10+
},
11+
},
12+
})
13+
14+
it('should maintain devtools indicator position after navigation', async () => {
15+
const browser = await next.browser('/')
16+
17+
let style = await getDevIndicatorPosition(browser)
18+
19+
expect(style).toContain('top: 20px')
20+
expect(style).toContain('right: 20px')
21+
22+
// Navigate and check devtools indicator position is maintained
23+
await browser.refresh()
24+
await browser.waitForIdleNetwork()
25+
26+
style = await getDevIndicatorPosition(browser)
27+
28+
expect(style).toContain('top: 20px')
29+
expect(style).toContain('right: 20px')
30+
})
31+
})

‎test/development/app-dir/devtools-position/top-left-position.test.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
import { getDevIndicatorPosition } from './utils'
3+
4+
describe('devtools-position-top-left', () => {
5+
const { next } = nextTestSetup({
6+
files: __dirname,
7+
nextConfig: {
8+
devIndicators: {
9+
position: 'top-left',
10+
},
11+
},
12+
})
13+
14+
it('should devtools indicator position initially be top-left when configured', async () => {
15+
const browser = await next.browser('/')
16+
const style = await getDevIndicatorPosition(browser)
17+
expect(style).toContain('top: 20px')
18+
expect(style).toContain('left: 20px')
19+
})
20+
})

‎test/development/app-dir/devtools-position/top-right-position.test.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { nextTestSetup } from 'e2e-utils'
2+
import { getDevIndicatorPosition } from './utils'
3+
4+
describe('devtools-position-top-right', () => {
5+
const { next } = nextTestSetup({
6+
files: __dirname,
7+
nextConfig: {
8+
devIndicators: {
9+
position: 'top-right',
10+
},
11+
},
12+
})
13+
14+
it('should devtools indicator position initially be top-right when configured', async () => {
15+
const browser = await next.browser('/')
16+
const style = await getDevIndicatorPosition(browser)
17+
expect(style).toContain('top: 20px')
18+
expect(style).toContain('right: 20px')
19+
})
20+
})

‎test/development/app-dir/devtools-position/utils.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { Playwright } from '../../../lib/next-webdriver'
2+
import { assertHasDevToolsIndicator } from 'next-test-utils'
3+
4+
export async function getDevIndicatorPosition(browser: Playwright) {
5+
// assert before eval() to prevent race condition
6+
await assertHasDevToolsIndicator(browser)
7+
8+
const style = await browser.eval(() => {
9+
return (
10+
[].slice
11+
.call(document.querySelectorAll('nextjs-portal'))
12+
.find((p) => p.shadowRoot.querySelector('[data-nextjs-toast]'))
13+
// portal
14+
?.shadowRoot?.querySelector('[data-nextjs-toast]')
15+
?.getAttribute('style') || ''
16+
)
17+
})
18+
return style || ''
19+
}

0 commit comments

Comments
 (0)