Skip to content

Commit d160aa0

Browse files
sebmarkbagesebmarkbage
authored
[DevTools] Use Unicode Atom Symbol instead of Atom Emoji (#30832)
This reverts #19603. Before: <img width="724" alt="Screenshot 2024-08-28 at 12 07 29 AM" src="https://github.com/user-attachments/assets/0613088f-c013-4f1c-92c3-fbdae8c1f109"> After: <img width="771" alt="Screenshot 2024-08-28 at 12 08 13 AM" src="https://github.com/user-attachments/assets/eef21bee-d11f-4f0a-9147-053a163f720f"> Consensus seems to be that while the purple on is a bit clearer and easier to read. The purple is not on brand so it doesn't look like React. It looks ugly. It's distracting (too eye catching). Taking away attention from other tabs in an unfair way. It also gets worse with more tabs added. We plan on both adding another tab and panes inside other tabs (elements/sources) soon. Each needs to be marked somehow as part of React but spelling it out is too long. Putting inside a second tab means two clicks and takes away real-estate from our extension and doesn't solve the problem with extension panes in other tabs. We also plan on adding multiple different tracks to the Performance tab which also needs a name other than just React and spelling out React as a prefix is too long. The Emoji is too distracting. So it seems best to uniformly apply the symbol - albeit it might just look like a dot to many. Dark mode looks close to on brand: <img width="1089" alt="Screenshot 2024-08-28 at 12 32 50 AM" src="https://github.com/user-attachments/assets/7175a540-4241-4c26-9e4d-4d367873af57">
1 parent 6066b8e commit d160aa0

File tree

5 files changed

+50
-50
lines changed

5 files changed

+50
-50
lines changed

‎packages/react-devtools-extensions/src/main/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ function createComponentsPanel() {
185185
}
186186

187187
chrome.devtools.panels.create(
188-
__IS_CHROME__ || __IS_EDGE__ ? '⚛️ Components' : 'Components',
188+
__IS_CHROME__ || __IS_EDGE__ ? 'Components ⚛' : 'Components',
189189
__IS_EDGE__ ? 'icons/production.svg' : '',
190190
'panel.html',
191191
createdPanel => {
@@ -224,7 +224,7 @@ function createProfilerPanel() {
224224
}
225225

226226
chrome.devtools.panels.create(
227-
__IS_CHROME__ || __IS_EDGE__ ? '⚛️ Profiler' : 'Profiler',
227+
__IS_CHROME__ || __IS_EDGE__ ? 'Profiler ⚛' : 'Profiler',
228228
__IS_EDGE__ ? 'icons/production.svg' : '',
229229
'panel.html',
230230
createdPanel => {

‎packages/react-devtools-shared/src/backend/fiber/renderer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1350,7 +1350,7 @@ export function attach(
13501350
// Unfortunately this feature is not expected to work for React Native for now.
13511351
// It would be annoying for us to spam YellowBox warnings with unactionable stuff,
13521352
// so for now just skip this message...
1353-
//console.warn('⚛️ DevTools: Could not locate saved component filters');
1353+
//console.warn('⚛ DevTools: Could not locate saved component filters');
13541354

13551355
// Fallback to assuming the default filters in this case.
13561356
applyComponentFilters(getDefaultComponentFilters());

‎packages/react-devtools-shared/src/devtools/views/hooks.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export function useLocalStorage<T>(
186186
);
187187

188188
// Listen for changes to this local storage value made from other windows.
189-
// This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
189+
// This enables the e.g. "⚛ Elements" tab to update in response to changes from "⚛ Settings".
190190
useLayoutEffect(() => {
191191
// $FlowFixMe[missing-local-annot]
192192
const onStorage = event => {

‎packages/react-reconciler/src/DebugTracing.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export function logCommitStarted(lanes: Lanes): void {
6666
if (__DEV__) {
6767
if (enableDebugTracing) {
6868
group(
69-
`%c⚛️%c commit%c (${formatLanes(lanes)})`,
69+
`%c⚛%c commit%c (${formatLanes(lanes)})`,
7070
REACT_LOGO_STYLE,
7171
'',
7272
'font-weight: normal;',
@@ -103,7 +103,7 @@ export function logComponentSuspended(
103103
const id = getWakeableID(wakeable);
104104
const display = (wakeable: any).displayName || wakeable;
105105
log(
106-
`%c⚛️%c ${componentName} suspended`,
106+
`%c⚛%c ${componentName} suspended`,
107107
REACT_LOGO_STYLE,
108108
'color: #80366d; font-weight: bold;',
109109
id,
@@ -112,7 +112,7 @@ export function logComponentSuspended(
112112
wakeable.then(
113113
() => {
114114
log(
115-
`%c⚛️%c ${componentName} resolved`,
115+
`%c⚛%c ${componentName} resolved`,
116116
REACT_LOGO_STYLE,
117117
'color: #80366d; font-weight: bold;',
118118
id,
@@ -121,7 +121,7 @@ export function logComponentSuspended(
121121
},
122122
() => {
123123
log(
124-
`%c⚛️%c ${componentName} rejected`,
124+
`%c⚛%c ${componentName} rejected`,
125125
REACT_LOGO_STYLE,
126126
'color: #80366d; font-weight: bold;',
127127
id,
@@ -137,7 +137,7 @@ export function logLayoutEffectsStarted(lanes: Lanes): void {
137137
if (__DEV__) {
138138
if (enableDebugTracing) {
139139
group(
140-
`%c⚛️%c layout effects%c (${formatLanes(lanes)})`,
140+
`%c⚛%c layout effects%c (${formatLanes(lanes)})`,
141141
REACT_LOGO_STYLE,
142142
'',
143143
'font-weight: normal;',
@@ -158,7 +158,7 @@ export function logPassiveEffectsStarted(lanes: Lanes): void {
158158
if (__DEV__) {
159159
if (enableDebugTracing) {
160160
group(
161-
`%c⚛️%c passive effects%c (${formatLanes(lanes)})`,
161+
`%c⚛%c passive effects%c (${formatLanes(lanes)})`,
162162
REACT_LOGO_STYLE,
163163
'',
164164
'font-weight: normal;',
@@ -179,7 +179,7 @@ export function logRenderStarted(lanes: Lanes): void {
179179
if (__DEV__) {
180180
if (enableDebugTracing) {
181181
group(
182-
`%c⚛️%c render%c (${formatLanes(lanes)})`,
182+
`%c⚛%c render%c (${formatLanes(lanes)})`,
183183
REACT_LOGO_STYLE,
184184
'',
185185
'font-weight: normal;',
@@ -203,7 +203,7 @@ export function logForceUpdateScheduled(
203203
if (__DEV__) {
204204
if (enableDebugTracing) {
205205
log(
206-
`%c⚛️%c ${componentName} forced update %c(${formatLanes(lane)})`,
206+
`%c⚛%c ${componentName} forced update %c(${formatLanes(lane)})`,
207207
REACT_LOGO_STYLE,
208208
'color: #db2e1f; font-weight: bold;',
209209
'',
@@ -220,7 +220,7 @@ export function logStateUpdateScheduled(
220220
if (__DEV__) {
221221
if (enableDebugTracing) {
222222
log(
223-
`%c⚛️%c ${componentName} updated state %c(${formatLanes(lane)})`,
223+
`%c⚛%c ${componentName} updated state %c(${formatLanes(lane)})`,
224224
REACT_LOGO_STYLE,
225225
'color: #01a252; font-weight: bold;',
226226
'',

‎packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js

+37-37
Original file line numberDiff line numberDiff line change
@@ -103,17 +103,17 @@ describe('DebugTracing', () => {
103103
);
104104

105105
expect(logs).toEqual([
106-
`group: ⚛️ render (${SYNC_LANE_STRING})`,
107-
'log: ⚛️ Example suspended',
108-
`groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
106+
`group: ⚛ render (${SYNC_LANE_STRING})`,
107+
'log: ⚛ Example suspended',
108+
`groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
109109
]);
110110

111111
logs.splice(0);
112112

113113
resolveFakeSuspensePromise();
114114
await waitForAll([]);
115115

116-
expect(logs).toEqual(['log: ⚛️ Example resolved']);
116+
expect(logs).toEqual(['log: ⚛ Example resolved']);
117117
});
118118

119119
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense && !disableLegacyMode
@@ -139,19 +139,19 @@ describe('DebugTracing', () => {
139139
);
140140

141141
expect(logs).toEqual([
142-
`group: ⚛️ render (${SYNC_LANE_STRING})`,
142+
`group: ⚛ render (${SYNC_LANE_STRING})`,
143143
'log: <Wrapper/>',
144-
`groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
144+
`groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
145145
]);
146146

147147
logs.splice(0);
148148

149149
await waitForPaint([]);
150150

151151
expect(logs).toEqual([
152-
`group: ⚛️ render (${RETRY_LANE_STRING})`,
152+
`group: ⚛ render (${RETRY_LANE_STRING})`,
153153
'log: <Example/>',
154-
`groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
154+
`groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
155155
]);
156156
});
157157

@@ -184,15 +184,15 @@ describe('DebugTracing', () => {
184184
);
185185

186186
expect(logs).toEqual([
187-
`group: ⚛️ render (${DEFAULT_LANE_STRING})`,
188-
'log: ⚛️ Example suspended',
189-
`groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
187+
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
188+
'log: ⚛ Example suspended',
189+
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
190190
]);
191191

192192
logs.splice(0);
193193

194194
await act(async () => await resolveFakeSuspensePromise());
195-
expect(logs).toEqual(['log: ⚛️ Example resolved']);
195+
expect(logs).toEqual(['log: ⚛ Example resolved']);
196196
});
197197

198198
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
@@ -220,12 +220,12 @@ describe('DebugTracing', () => {
220220
);
221221

222222
expect(logs).toEqual([
223-
`group: ⚛️ render (${DEFAULT_LANE_STRING})`,
223+
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
224224
'log: <Wrapper/>',
225-
`groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
226-
`group: ⚛️ render (${RETRY_LANE_STRING})`,
225+
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
226+
`group: ⚛ render (${RETRY_LANE_STRING})`,
227227
'log: <Example/>',
228-
`groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
228+
`groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
229229
]);
230230
});
231231

@@ -250,11 +250,11 @@ describe('DebugTracing', () => {
250250
);
251251

252252
expect(logs).toEqual([
253-
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
254-
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
255-
`log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
256-
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
257-
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
253+
`group: ⚛ commit (${DEFAULT_LANE_STRING})`,
254+
`group: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
255+
`log: ⚛ Example updated state (${SYNC_LANE_STRING})`,
256+
`groupEnd: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
257+
`groupEnd: ⚛ commit (${DEFAULT_LANE_STRING})`,
258258
]);
259259
});
260260

@@ -283,9 +283,9 @@ describe('DebugTracing', () => {
283283
);
284284

285285
expect(logs).toEqual([
286-
`group: ⚛️ render (${DEFAULT_LANE_STRING})`,
287-
`log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
288-
`groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
286+
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
287+
`log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
288+
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
289289
]);
290290
});
291291

@@ -308,11 +308,11 @@ describe('DebugTracing', () => {
308308
);
309309

310310
expect(logs).toEqual([
311-
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
312-
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
313-
`log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
314-
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
315-
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
311+
`group: ⚛ commit (${DEFAULT_LANE_STRING})`,
312+
`group: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
313+
`log: ⚛ Example updated state (${SYNC_LANE_STRING})`,
314+
`groupEnd: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
315+
`groupEnd: ⚛ commit (${DEFAULT_LANE_STRING})`,
316316
]);
317317
});
318318

@@ -334,9 +334,9 @@ describe('DebugTracing', () => {
334334
);
335335
});
336336
expect(logs).toEqual([
337-
`group: ⚛️ passive effects (${DEFAULT_LANE_STRING})`,
338-
`log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
339-
`groupEnd: ⚛️ passive effects (${DEFAULT_LANE_STRING})`,
337+
`group: ⚛ passive effects (${DEFAULT_LANE_STRING})`,
338+
`log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
339+
`groupEnd: ⚛ passive effects (${DEFAULT_LANE_STRING})`,
340340
]);
341341
});
342342

@@ -359,9 +359,9 @@ describe('DebugTracing', () => {
359359
});
360360

361361
expect(logs).toEqual([
362-
`group: ⚛️ render (${DEFAULT_LANE_STRING})`,
363-
`log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
364-
`groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
362+
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
363+
`log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
364+
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
365365
]);
366366
});
367367

@@ -381,9 +381,9 @@ describe('DebugTracing', () => {
381381
);
382382

383383
expect(logs).toEqual([
384-
`group: ⚛️ render (${DEFAULT_LANE_STRING})`,
384+
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
385385
'log: Hello from user code',
386-
`groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
386+
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
387387
]);
388388
});
389389

0 commit comments

Comments
 (0)