Skip to content

Commit 51d58a5

Browse files
devjiwonchoidevjiwonchoi
committed
use data
1 parent 8646a3f commit 51d58a5

File tree

1 file changed

+130
-143
lines changed
  • packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab

1 file changed

+130
-143
lines changed

‎packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel-tab/settings.tsx

Lines changed: 130 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -106,174 +106,161 @@ export function Settings({
106106
}
107107

108108
return (
109-
<div>
110-
<h2 className="dev-tools-info-section-title">General</h2>
111-
<div className="preferences-container">
112-
<div className="preference-section">
113-
<div className="preference-header">
114-
<label htmlFor="theme">Theme</label>
115-
<p className="preference-description">
116-
Select your theme preference.
117-
</p>
118-
</div>
119-
<Select
120-
id="theme"
121-
name="theme"
122-
prefix={<ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />}
123-
value={theme}
124-
onChange={handleThemeChange}
125-
>
126-
<option value="system">System</option>
127-
<option value="light">Light</option>
128-
<option value="dark">Dark</option>
129-
</Select>
109+
<div data-nextjs-devtools-panel-settings>
110+
<div data-nextjs-devtools-panel-settings-section>
111+
<div data-nextjs-devtools-panel-settings-section-header>
112+
<label htmlFor="theme">Theme</label>
113+
<p data-nextjs-devtools-panel-settings-section-description>
114+
Select your theme preference.
115+
</p>
130116
</div>
117+
<Select
118+
id="theme"
119+
name="theme"
120+
prefix={<ThemeIcon theme={theme as 'dark' | 'light' | 'system'} />}
121+
value={theme}
122+
onChange={handleThemeChange}
123+
>
124+
<option value="system">System</option>
125+
<option value="light">Light</option>
126+
<option value="dark">Dark</option>
127+
</Select>
128+
</div>
131129

132-
<div className="preference-section">
133-
<div className="preference-header">
134-
<label htmlFor="position">Position</label>
135-
<p className="preference-description">
136-
Adjust the placement of your dev tools.
137-
</p>
138-
</div>
139-
<Select
140-
id="position"
141-
name="position"
142-
value={state.indicatorPosition}
143-
onChange={handlePositionChange}
144-
>
145-
<option value="bottom-left">Bottom Left</option>
146-
<option value="bottom-right">Bottom Right</option>
147-
<option value="top-left">Top Left</option>
148-
<option value="top-right">Top Right</option>
149-
</Select>
130+
<div data-nextjs-devtools-panel-settings-section>
131+
<div data-nextjs-devtools-panel-settings-section-header>
132+
<label htmlFor="position">Position</label>
133+
<p data-nextjs-devtools-panel-settings-section-description>
134+
Adjust the placement of your dev tools.
135+
</p>
150136
</div>
137+
<Select
138+
id="position"
139+
name="position"
140+
value={state.indicatorPosition}
141+
onChange={handlePositionChange}
142+
>
143+
<option value="bottom-left">Bottom Left</option>
144+
<option value="bottom-right">Bottom Right</option>
145+
<option value="top-left">Top Left</option>
146+
<option value="top-right">Top Right</option>
147+
</Select>
148+
</div>
151149

152-
<div className="preference-section">
153-
<div className="preference-header">
154-
<label htmlFor="size">Size</label>
155-
<p className="preference-description">
156-
Adjust the size of your dev tools.
157-
</p>
158-
</div>
159-
<Select
160-
id="size"
161-
name="size"
162-
value={state.scale}
163-
onChange={handleSizeChange}
150+
<div data-nextjs-devtools-panel-settings-section>
151+
<div data-nextjs-devtools-panel-settings-section-header>
152+
<label htmlFor="size">Size</label>
153+
<p data-nextjs-devtools-panel-settings-section-description>
154+
Adjust the size of your dev tools.
155+
</p>
156+
</div>
157+
<Select
158+
id="size"
159+
name="size"
160+
value={state.scale}
161+
onChange={handleSizeChange}
162+
>
163+
{Object.entries(NEXT_DEV_TOOLS_SCALE).map(([key, value]) => {
164+
return (
165+
<option value={value} key={key}>
166+
{key}
167+
</option>
168+
)
169+
})}
170+
</Select>
171+
</div>
172+
173+
<div data-nextjs-devtools-panel-settings-section>
174+
<div data-nextjs-devtools-panel-settings-section-header>
175+
<label id="hide-dev-tools">Hide Dev Tools for this session</label>
176+
<p data-nextjs-devtools-panel-settings-section-description>
177+
Hide Dev Tools until you restart your dev server, or 1 day.
178+
</p>
179+
</div>
180+
<div>
181+
<button
182+
aria-describedby="hide-dev-tools"
183+
name="hide-dev-tools"
184+
data-hide-dev-tools
185+
data-nextjs-devtools-panel-settings-section-action-button
186+
onClick={hide}
164187
>
165-
{Object.entries(NEXT_DEV_TOOLS_SCALE).map(([key, value]) => {
166-
return (
167-
<option value={value} key={key}>
168-
{key}
169-
</option>
170-
)
171-
})}
172-
</Select>
188+
<EyeIcon />
189+
<span>Hide</span>
190+
</button>
173191
</div>
192+
</div>
174193

175-
<div className="preference-section">
176-
<div className="preference-header">
177-
<label id="hide-dev-tools">Hide Dev Tools for this session</label>
178-
<p className="preference-description">
179-
Hide Dev Tools until you restart your dev server, or 1 day.
180-
</p>
181-
</div>
182-
<div className="preference-control">
183-
<button
184-
aria-describedby="hide-dev-tools"
185-
name="hide-dev-tools"
186-
data-hide-dev-tools
187-
className="action-button"
188-
onClick={hide}
189-
>
190-
<EyeIcon />
191-
<span>Hide</span>
192-
</button>
193-
</div>
194+
<div data-nextjs-devtools-panel-settings-section>
195+
<div data-nextjs-devtools-panel-settings-section-header>
196+
<label>Disable Dev Tools for this project</label>
197+
<p data-nextjs-devtools-panel-settings-section-description>
198+
To disable this UI completely, set{' '}
199+
<code className="dev-tools-info-code">devIndicators: false</code> in
200+
your <code className="dev-tools-info-code">next.config</code> file.
201+
</p>
194202
</div>
203+
</div>
195204

196-
<div className="preference-section">
197-
<div className="preference-header">
198-
<label>Disable Dev Tools for this project</label>
199-
<p className="preference-description">
200-
To disable this UI completely, set{' '}
201-
<code className="dev-tools-info-code">devIndicators: false</code>{' '}
202-
in your <code className="dev-tools-info-code">next.config</code>{' '}
203-
file.
204-
</p>
205-
</div>
205+
<div data-nextjs-devtools-panel-settings-section>
206+
<div data-nextjs-devtools-panel-settings-section-header>
207+
<label id="restart-dev-server">Restart Dev Server</label>
208+
<p data-nextjs-devtools-panel-settings-section-description>
209+
Restarts the development server without needing to leave the
210+
browser.
211+
</p>
212+
</div>
213+
<div>
214+
<button
215+
aria-describedby="restart-dev-server"
216+
title="Restarts the development server without needing to leave the browser."
217+
name="restart-dev-server"
218+
data-restart-dev-server
219+
data-nextjs-devtools-panel-settings-section-action-button
220+
onClick={handleRestartDevServer}
221+
>
222+
<span>Restart</span>
223+
</button>
206224
</div>
207225
</div>
208-
<h2 className="dev-tools-info-section-title">Development Server</h2>
209-
<div className="preferences-container">
210-
<div className="preference-section">
211-
<div className="preference-header">
212-
<label id="restart-dev-server">Restart Dev Server</label>
213-
<p className="preference-description">
214-
Restarts the development server without needing to leave the
215-
browser.
226+
227+
{process.env.__NEXT_TURBOPACK_PERSISTENT_CACHE ? (
228+
<div data-nextjs-devtools-panel-settings-section>
229+
<div data-nextjs-devtools-panel-settings-section-header>
230+
<label id="reset-bundler-cache">Reset Bundler Cache</label>
231+
<p data-nextjs-devtools-panel-settings-section-description>
232+
Clears the bundler cache and restarts the dev server. Helpful if
233+
you are seeing stale errors or changes are not appearing.
216234
</p>
217235
</div>
218-
<div className="preference-control">
236+
<div>
219237
<button
220-
aria-describedby="restart-dev-server"
221-
title="Restarts the development server without needing to leave the browser."
222-
name="restart-dev-server"
223-
data-restart-dev-server
224-
className="action-button"
238+
aria-describedby="reset-bundler-cache"
239+
title="Clears the bundler cache and restarts the dev server. Helpful if you are seeing stale errors or changes are not appearing."
240+
name="reset-bundler-cache"
241+
data-reset-bundler-cache
242+
data-nextjs-devtools-panel-settings-section-action-button
225243
onClick={handleRestartDevServer}
226244
>
227-
<span>Restart</span>
245+
<span>Reset Cache</span>
228246
</button>
229247
</div>
230248
</div>
231-
</div>
232-
{process.env.__NEXT_TURBOPACK_PERSISTENT_CACHE ? (
233-
<div className="preferences-container">
234-
<div className="preference-section">
235-
<div className="preference-header">
236-
<label id="reset-bundler-cache">Reset Bundler Cache</label>
237-
<p className="preference-description">
238-
Clears the bundler cache and restarts the dev server. Helpful if
239-
you are seeing stale errors or changes are not appearing.
240-
</p>
241-
</div>
242-
<div className="preference-control">
243-
<button
244-
aria-describedby="reset-bundler-cache"
245-
title="Clears the bundler cache and restarts the dev server. Helpful if you are seeing stale errors or changes are not appearing."
246-
name="reset-bundler-cache"
247-
data-reset-bundler-cache
248-
className="action-button"
249-
onClick={handleRestartDevServer}
250-
>
251-
<span>Reset Cache</span>
252-
</button>
253-
</div>
254-
</div>
255-
</div>
256249
) : null}
257250
</div>
258251
)
259252
}
260253

261254
export const DEVTOOLS_PANEL_TAB_SETTINGS_STYLES = css`
262-
.preferences-container {
263-
width: 100%;
264-
}
265-
266-
@media (min-width: 576px) {
267-
.preferences-container {
268-
width: 480px;
269-
}
255+
[data-nextjs-devtools-panel-settings] {
256+
padding: 16px;
270257
}
271258
272-
.preference-section:first-child {
259+
[data-nextjs-devtools-panel-settings-section]:first-child {
273260
padding-top: 0;
274261
}
275262
276-
.preference-section {
263+
[data-nextjs-devtools-panel-settings-section] {
277264
padding: 12px 0;
278265
border-bottom: 1px solid var(--color-gray-400);
279266
display: flex;
@@ -282,30 +269,30 @@ export const DEVTOOLS_PANEL_TAB_SETTINGS_STYLES = css`
282269
gap: 24px;
283270
}
284271
285-
.preference-section:last-child {
272+
[data-nextjs-devtools-panel-settings-section]:last-child {
286273
border-bottom: none;
287274
}
288275
289-
.preference-header {
276+
[data-nextjs-devtools-panel-settings-section-header] {
290277
margin-bottom: 0;
291278
flex: 1;
292279
}
293280
294-
.preference-header label {
281+
[data-nextjs-devtools-panel-settings-section-header] label {
295282
font-size: var(--size-14);
296283
font-weight: 500;
297284
color: var(--color-gray-1000);
298285
margin: 0;
299286
}
300287
301-
.preference-description {
288+
[data-nextjs-devtools-panel-settings-section-description] {
302289
color: var(--color-gray-900);
303290
font-size: var(--size-14);
304291
margin: 0;
305292
}
306293
307294
[data-nextjs-select],
308-
.action-button {
295+
[data-nextjs-devtools-panel-settings-section-action-button] {
309296
display: flex;
310297
align-items: center;
311298
gap: 8px;

0 commit comments

Comments
 (0)