[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">
Sebastian Markbåge committed
Sep 10, 2024 at 00:09 UTC
d160aa0fbb1bd2d00ea8c771c551c9cb5b47f1e9
5 files changed
+50
-50
packages/react-devtools-extensions/src/main/index.js
+2
-2
@@ -185,7 +185,7 @@ function createComponentsPanel() {
185
}
186
187
chrome.devtools.panels.create(
188
- __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Components' : 'Components',
188
+ __IS_CHROME__ || __IS_EDGE__ ? 'Components ⚛' : 'Components',
189
__IS_EDGE__ ? 'icons/production.svg' : '',
190
'panel.html',
191
createdPanel => {
@@ -224,7 +224,7 @@ function createProfilerPanel() {
224
}
225
226
chrome.devtools.panels.create(
227
- __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Profiler' : 'Profiler',
227
+ __IS_CHROME__ || __IS_EDGE__ ? 'Profiler ⚛' : 'Profiler',
228
__IS_EDGE__ ? 'icons/production.svg' : '',
229
'panel.html',
230
createdPanel => {
packages/react-devtools-shared/src/backend/fiber/renderer.js
+1
-1
@@ -1350,7 +1350,7 @@ export function attach(
1350
// Unfortunately this feature is not expected to work for React Native for now.
1351
// It would be annoying for us to spam YellowBox warnings with unactionable stuff,
1352
// 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');
1354
1355
// Fallback to assuming the default filters in this case.
1356
applyComponentFilters(getDefaultComponentFilters());
packages/react-devtools-shared/src/devtools/views/hooks.js
+1
-1
@@ -186,7 +186,7 @@ export function useLocalStorage<T>(
186
);
187
188
// 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".
190
useLayoutEffect(() => {
191
// $FlowFixMe[missing-local-annot]
192
const onStorage = event => {
packages/react-reconciler/src/DebugTracing.js
+9
-9
@@ -66,7 +66,7 @@ export function logCommitStarted(lanes: Lanes): void {
66
if (__DEV__) {
67
if (enableDebugTracing) {
68
group(
69
- `%c⚛️%c commit%c (${formatLanes(lanes)})`,
69
+ `%c⚛%c commit%c (${formatLanes(lanes)})`,
70
REACT_LOGO_STYLE,
71
'',
72
'font-weight: normal;',
@@ -103,7 +103,7 @@ export function logComponentSuspended(
103
const id = getWakeableID(wakeable);
104
const display = (wakeable: any).displayName || wakeable;
105
log(
106
- `%c⚛️%c ${componentName} suspended`,
106
+ `%c⚛%c ${componentName} suspended`,
107
REACT_LOGO_STYLE,
108
'color: #80366d; font-weight: bold;',
109
id,
@@ -112,7 +112,7 @@ export function logComponentSuspended(
112
wakeable.then(
113
() => {
114
log(
115
- `%c⚛️%c ${componentName} resolved`,
115
+ `%c⚛%c ${componentName} resolved`,
116
REACT_LOGO_STYLE,
117
'color: #80366d; font-weight: bold;',
118
id,
@@ -121,7 +121,7 @@ export function logComponentSuspended(
121
},
122
() => {
123
log(
124
- `%c⚛️%c ${componentName} rejected`,
124
+ `%c⚛%c ${componentName} rejected`,
125
REACT_LOGO_STYLE,
126
'color: #80366d; font-weight: bold;',
127
id,
@@ -137,7 +137,7 @@ export function logLayoutEffectsStarted(lanes: Lanes): void {
137
if (__DEV__) {
138
if (enableDebugTracing) {
139
group(
140
- `%c⚛️%c layout effects%c (${formatLanes(lanes)})`,
140
+ `%c⚛%c layout effects%c (${formatLanes(lanes)})`,
141
REACT_LOGO_STYLE,
142
'',
143
'font-weight: normal;',
@@ -158,7 +158,7 @@ export function logPassiveEffectsStarted(lanes: Lanes): void {
158
if (__DEV__) {
159
if (enableDebugTracing) {
160
group(
161
- `%c⚛️%c passive effects%c (${formatLanes(lanes)})`,
161
+ `%c⚛%c passive effects%c (${formatLanes(lanes)})`,
162
REACT_LOGO_STYLE,
163
'',
164
'font-weight: normal;',
@@ -179,7 +179,7 @@ export function logRenderStarted(lanes: Lanes): void {
179
if (__DEV__) {
180
if (enableDebugTracing) {
181
group(
182
- `%c⚛️%c render%c (${formatLanes(lanes)})`,
182
+ `%c⚛%c render%c (${formatLanes(lanes)})`,
183
REACT_LOGO_STYLE,
184
'',
185
'font-weight: normal;',
@@ -203,7 +203,7 @@ export function logForceUpdateScheduled(
203
if (__DEV__) {
204
if (enableDebugTracing) {
205
log(
206
- `%c⚛️%c ${componentName} forced update %c(${formatLanes(lane)})`,
206
+ `%c⚛%c ${componentName} forced update %c(${formatLanes(lane)})`,
207
REACT_LOGO_STYLE,
208
'color: #db2e1f; font-weight: bold;',
209
'',
@@ -220,7 +220,7 @@ export function logStateUpdateScheduled(
220
if (__DEV__) {
221
if (enableDebugTracing) {
222
log(
223
- `%c⚛️%c ${componentName} updated state %c(${formatLanes(lane)})`,
223
+ `%c⚛%c ${componentName} updated state %c(${formatLanes(lane)})`,
224
REACT_LOGO_STYLE,
225
'color: #01a252; font-weight: bold;',
226
'',
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+37
-37
@@ -103,9 +103,9 @@ describe('DebugTracing', () => {
103
);
104
105
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})`,
109
]);
110
111
logs.splice(0);
@@ -113,7 +113,7 @@ describe('DebugTracing', () => {
113
resolveFakeSuspensePromise();
114
await waitForAll([]);
115
116
- expect(logs).toEqual(['log: ⚛️ Example resolved']);
116
+ expect(logs).toEqual(['log: ⚛ Example resolved']);
117
});
118
119
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense && !disableLegacyMode
@@ -139,9 +139,9 @@ describe('DebugTracing', () => {
139
);
140
141
expect(logs).toEqual([
142
- `group: ⚛️ render (${SYNC_LANE_STRING})`,
142
+ `group: ⚛ render (${SYNC_LANE_STRING})`,
143
'log: <Wrapper/>',
144
- `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
144
+ `groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
145
]);
146
147
logs.splice(0);
@@ -149,9 +149,9 @@ describe('DebugTracing', () => {
149
await waitForPaint([]);
150
151
expect(logs).toEqual([
152
- `group: ⚛️ render (${RETRY_LANE_STRING})`,
152
+ `group: ⚛ render (${RETRY_LANE_STRING})`,
153
'log: <Example/>',
154
- `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
154
+ `groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
155
]);
156
});
157
@@ -184,15 +184,15 @@ describe('DebugTracing', () => {
184
);
185
186
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})`,
190
]);
191
192
logs.splice(0);
193
194
await act(async () => await resolveFakeSuspensePromise());
195
- expect(logs).toEqual(['log: ⚛️ Example resolved']);
195
+ expect(logs).toEqual(['log: ⚛ Example resolved']);
196
});
197
198
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
@@ -220,12 +220,12 @@ describe('DebugTracing', () => {
220
);
221
222
expect(logs).toEqual([
223
- `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
223
+ `group: ⚛ render (${DEFAULT_LANE_STRING})`,
224
'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})`,
227
'log: <Example/>',
228
- `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
228
+ `groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
229
]);
230
});
231
@@ -250,11 +250,11 @@ describe('DebugTracing', () => {
250
);
251
252
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})`,
258
]);
259
});
260
@@ -283,9 +283,9 @@ describe('DebugTracing', () => {
283
);
284
285
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})`,
289
]);
290
});
291
@@ -308,11 +308,11 @@ describe('DebugTracing', () => {
308
);
309
310
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})`,
316
]);
317
});
318
@@ -334,9 +334,9 @@ describe('DebugTracing', () => {
334
);
335
});
336
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})`,
340
]);
341
});
342
@@ -359,9 +359,9 @@ describe('DebugTracing', () => {
359
});
360
361
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})`,
365
]);
366
});
367
@@ -381,9 +381,9 @@ describe('DebugTracing', () => {
381
);
382
383
expect(logs).toEqual([
384
- `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
384
+ `group: ⚛ render (${DEFAULT_LANE_STRING})`,
385
'log: Hello from user code',
386
- `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
386
+ `groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
387
]);
388
});
389