Skip to content

Commit 9e1ffed

Browse files
devjiwonchoidevjiwonchoi
committed
use forked devtools indicator
1 parent 336e19e commit 9e1ffed

File tree

4 files changed

+127
-133
lines changed

4 files changed

+127
-133
lines changed

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@ import {
99
MENU_CURVE,
1010
MENU_DURATION_MS,
1111
} from '../errors/dev-tools-indicator/utils'
12-
import { ACTION_ERROR_OVERLAY_TOGGLE, STORAGE_KEY_POSITION } from '../../shared'
12+
import {
13+
ACTION_DEV_TOOLS_PANEL_TOGGLE,
14+
ACTION_ERROR_OVERLAY_TOGGLE,
15+
STORAGE_KEY_POSITION,
16+
} from '../../shared'
1317
import { getInitialPosition } from '../errors/dev-tools-indicator/dev-tools-info/preferences'
1418
import { Draggable } from '../errors/dev-tools-indicator/draggable'
1519

@@ -37,7 +41,9 @@ export function DevToolsIndicator({
3741
dispatch({ type: ACTION_ERROR_OVERLAY_TOGGLE })
3842
}
3943

40-
const onTriggerClick = () => {}
44+
const toggleDevToolsPanel = () => {
45+
dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
46+
}
4147

4248
return (
4349
<Toast
@@ -71,7 +77,7 @@ export function DevToolsIndicator({
7177
data-nextjs-dev-tools-button
7278
disabled={state.disableDevIndicator}
7379
issueCount={errorCount}
74-
onTriggerClick={onTriggerClick}
80+
onTriggerClick={toggleDevToolsPanel}
7581
toggleErrorOverlay={toggleErrorOverlay}
7682
isDevBuilding={state.buildingIndicator}
7783
isDevRendering={state.renderingIndicator}

‎packages/next/src/next-devtools/dev-overlay/components/dev-tools-panel/dev-tools-panel.tsx renamed to ‎packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

File renamed without changes.

‎packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.tsx

Lines changed: 117 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import type { CSSProperties, Dispatch, SetStateAction } from 'react'
22
import {
33
ACTION_ERROR_OVERLAY_OPEN,
44
ACTION_ERROR_OVERLAY_TOGGLE,
5-
ACTION_DEV_TOOLS_PANEL_TOGGLE,
65
STORAGE_KEY_POSITION,
76
type OverlayDispatch,
87
type OverlayState,
@@ -235,11 +234,6 @@ function DevToolsPopover({
235234
}
236235

237236
function onTriggerClick() {
238-
if (process.env.__NEXT_DEVTOOL_NEW_PANEL_UI) {
239-
dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
240-
return
241-
}
242-
243237
if (open === OVERLAYS.Root) {
244238
setOpen(null)
245239
} else {
@@ -311,130 +305,124 @@ function DevToolsPopover({
311305
/>
312306
</Draggable>
313307

314-
{process.env.__NEXT_DEVTOOL_NEW_PANEL_UI ? null : (
315-
<>
316-
{/* Route Info */}
317-
<RouteInfo
318-
isOpen={isRouteInfoOpen}
319-
close={closeToRootMenu}
320-
triggerRef={triggerRef}
321-
style={popover}
322-
routerType={routerType}
323-
routeType={isStaticRoute ? 'Static' : 'Dynamic'}
324-
/>
325-
326-
{/* Turbopack Info */}
327-
<TurbopackInfo
328-
isOpen={isTurbopackInfoOpen}
329-
close={closeToRootMenu}
330-
triggerRef={triggerRef}
331-
style={popover}
332-
/>
333-
334-
{/* Preferences */}
335-
<UserPreferences
336-
isOpen={isPreferencesOpen}
337-
close={closeToRootMenu}
338-
triggerRef={triggerRef}
339-
style={popover}
340-
hide={handleHideDevtools}
341-
setPosition={setPosition}
342-
position={position}
343-
scale={scale}
344-
setScale={setScale}
345-
/>
346-
347-
{/* Page Segment Explorer */}
348-
{process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
349-
<SegmentsExplorer
350-
isOpen={isSegmentExplorerOpen}
351-
close={closeToRootMenu}
352-
triggerRef={triggerRef}
353-
style={popover}
354-
/>
355-
) : null}
356-
357-
{/* Dropdown Menu */}
358-
{menuMounted && (
359-
<div
360-
ref={menuRef}
361-
id="nextjs-dev-tools-menu"
362-
role="menu"
363-
dir="ltr"
364-
aria-orientation="vertical"
365-
aria-label="Next.js Dev Tools Items"
366-
tabIndex={-1}
367-
className="dev-tools-indicator-menu"
368-
onKeyDown={onMenuKeydown}
369-
data-rendered={menuRendered}
370-
style={popover}
371-
>
372-
<Context.Provider
373-
value={{
374-
closeMenu,
375-
selectedIndex,
376-
setSelectedIndex,
377-
}}
378-
>
379-
<div className="dev-tools-indicator-inner">
380-
{issueCount > 0 && (
381-
<MenuItem
382-
title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}
383-
index={0}
384-
label="Issues"
385-
value={<IssueCount>{issueCount}</IssueCount>}
386-
onClick={openErrorOverlay}
387-
/>
388-
)}
389-
<MenuItem
390-
title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}
391-
label="Route"
392-
index={1}
393-
value={isStaticRoute ? 'Static' : 'Dynamic'}
394-
onClick={() => setOpen(OVERLAYS.Route)}
395-
data-nextjs-route-type={
396-
isStaticRoute ? 'static' : 'dynamic'
397-
}
398-
/>
399-
{isTurbopack ? (
400-
<MenuItem
401-
title="Turbopack is enabled."
402-
label="Turbopack"
403-
value="Enabled"
404-
/>
405-
) : (
406-
<MenuItem
407-
index={2}
408-
title="Learn about Turbopack and how to enable it in your application."
409-
label="Try Turbopack"
410-
value={<ChevronRight />}
411-
onClick={() => setOpen(OVERLAYS.Turbo)}
412-
/>
413-
)}
414-
</div>
415-
416-
<div className="dev-tools-indicator-footer">
417-
<MenuItem
418-
data-preferences
419-
label="Preferences"
420-
value={<GearIcon />}
421-
onClick={() => setOpen(OVERLAYS.Preferences)}
422-
index={isTurbopack ? 2 : 3}
423-
/>
424-
{process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
425-
<MenuItem
426-
data-segment-explorer
427-
label="Segment Explorer"
428-
value={<ChevronRight />}
429-
onClick={() => setOpen(OVERLAYS.SegmentExplorer)}
430-
index={isTurbopack ? 3 : 4}
431-
/>
432-
) : null}
433-
</div>
434-
</Context.Provider>
308+
{/* Route Info */}
309+
<RouteInfo
310+
isOpen={isRouteInfoOpen}
311+
close={closeToRootMenu}
312+
triggerRef={triggerRef}
313+
style={popover}
314+
routerType={routerType}
315+
routeType={isStaticRoute ? 'Static' : 'Dynamic'}
316+
/>
317+
318+
{/* Turbopack Info */}
319+
<TurbopackInfo
320+
isOpen={isTurbopackInfoOpen}
321+
close={closeToRootMenu}
322+
triggerRef={triggerRef}
323+
style={popover}
324+
/>
325+
326+
{/* Preferences */}
327+
<UserPreferences
328+
isOpen={isPreferencesOpen}
329+
close={closeToRootMenu}
330+
triggerRef={triggerRef}
331+
style={popover}
332+
hide={handleHideDevtools}
333+
setPosition={setPosition}
334+
position={position}
335+
scale={scale}
336+
setScale={setScale}
337+
/>
338+
339+
{/* Page Segment Explorer */}
340+
{process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
341+
<SegmentsExplorer
342+
isOpen={isSegmentExplorerOpen}
343+
close={closeToRootMenu}
344+
triggerRef={triggerRef}
345+
style={popover}
346+
/>
347+
) : null}
348+
349+
{/* Dropdown Menu */}
350+
{menuMounted && (
351+
<div
352+
ref={menuRef}
353+
id="nextjs-dev-tools-menu"
354+
role="menu"
355+
dir="ltr"
356+
aria-orientation="vertical"
357+
aria-label="Next.js Dev Tools Items"
358+
tabIndex={-1}
359+
className="dev-tools-indicator-menu"
360+
onKeyDown={onMenuKeydown}
361+
data-rendered={menuRendered}
362+
style={popover}
363+
>
364+
<Context.Provider
365+
value={{
366+
closeMenu,
367+
selectedIndex,
368+
setSelectedIndex,
369+
}}
370+
>
371+
<div className="dev-tools-indicator-inner">
372+
{issueCount > 0 && (
373+
<MenuItem
374+
title={`${issueCount} ${issueCount === 1 ? 'issue' : 'issues'} found. Click to view details in the dev overlay.`}
375+
index={0}
376+
label="Issues"
377+
value={<IssueCount>{issueCount}</IssueCount>}
378+
onClick={openErrorOverlay}
379+
/>
380+
)}
381+
<MenuItem
382+
title={`Current route is ${isStaticRoute ? 'static' : 'dynamic'}.`}
383+
label="Route"
384+
index={1}
385+
value={isStaticRoute ? 'Static' : 'Dynamic'}
386+
onClick={() => setOpen(OVERLAYS.Route)}
387+
data-nextjs-route-type={isStaticRoute ? 'static' : 'dynamic'}
388+
/>
389+
{isTurbopack ? (
390+
<MenuItem
391+
title="Turbopack is enabled."
392+
label="Turbopack"
393+
value="Enabled"
394+
/>
395+
) : (
396+
<MenuItem
397+
index={2}
398+
title="Learn about Turbopack and how to enable it in your application."
399+
label="Try Turbopack"
400+
value={<ChevronRight />}
401+
onClick={() => setOpen(OVERLAYS.Turbo)}
402+
/>
403+
)}
404+
</div>
405+
406+
<div className="dev-tools-indicator-footer">
407+
<MenuItem
408+
data-preferences
409+
label="Preferences"
410+
value={<GearIcon />}
411+
onClick={() => setOpen(OVERLAYS.Preferences)}
412+
index={isTurbopack ? 2 : 3}
413+
/>
414+
{process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER ? (
415+
<MenuItem
416+
data-segment-explorer
417+
label="Segment Explorer"
418+
value={<ChevronRight />}
419+
onClick={() => setOpen(OVERLAYS.SegmentExplorer)}
420+
index={isTurbopack ? 3 : 4}
421+
/>
422+
) : null}
435423
</div>
436-
)}
437-
</>
424+
</Context.Provider>
425+
</div>
438426
)}
439427
</Toast>
440428
)

‎packages/next/src/next-devtools/dev-overlay/dev-overlay.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { DarkTheme } from './styles/dark-theme'
1212
import { useDevToolsScale } from './components/errors/dev-tools-indicator/dev-tools-info/preferences'
1313
import type { HydrationErrorState } from '../shared/hydration-error'
1414
import { DevToolsIndicator as DevToolsIndicatorNew } from './components/devtools-indicator/devtools-indicator'
15-
import { DevToolsPanel } from './components/dev-tools-panel/dev-tools-panel'
15+
import { DevToolsPanel } from './components/devtools-panel/devtools-panel'
1616

1717
export function DevOverlay({
1818
state,

0 commit comments

Comments
 (0)