Repository: facebook/react
Pull request: [DevTools] Use Unicode Atom Symbol instead of Atom Emoji

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">


Changed files:
filename: packages/react-devtools-extensions/src/main/index.js
patch: @@ -185,7 +185,7 @@ function createComponentsPanel() {
   }
 
   chrome.devtools.panels.create(
-    __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Components' : 'Components',
+    __IS_CHROME__ || __IS_EDGE__ ? 'Components ⚛' : 'Components',
     __IS_EDGE__ ? 'icons/production.svg' : '',
     'panel.html',
     createdPanel => {
@@ -224,7 +224,7 @@ function createProfilerPanel() {
   }
 
   chrome.devtools.panels.create(
-    __IS_CHROME__ || __IS_EDGE__ ? '⚛️ Profiler' : 'Profiler',
+    __IS_CHROME__ || __IS_EDGE__ ? 'Profiler ⚛' : 'Profiler',
     __IS_EDGE__ ? 'icons/production.svg' : '',
     'panel.html',
     createdPanel => {

filename: packages/react-devtools-shared/src/backend/fiber/renderer.js
patch: @@ -1350,7 +1350,7 @@ export function attach(
     // Unfortunately this feature is not expected to work for React Native for now.
     // It would be annoying for us to spam YellowBox warnings with unactionable stuff,
     // so for now just skip this message...
-    //console.warn('⚛️ DevTools: Could not locate saved component filters');
+    //console.warn('⚛ DevTools: Could not locate saved component filters');
 
     // Fallback to assuming the default filters in this case.
     applyComponentFilters(getDefaultComponentFilters());

filename: packages/react-devtools-shared/src/devtools/views/hooks.js
patch: @@ -186,7 +186,7 @@ export function useLocalStorage<T>(
   );
 
   // Listen for changes to this local storage value made from other windows.
-  // This enables the e.g. "⚛️ Elements" tab to update in response to changes from "⚛️ Settings".
+  // This enables the e.g. "⚛ Elements" tab to update in response to changes from "⚛ Settings".
   useLayoutEffect(() => {
     // $FlowFixMe[missing-local-annot]
     const onStorage = event => {

filename: packages/react-reconciler/src/DebugTracing.js
patch: @@ -66,7 +66,7 @@ export function logCommitStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c commit%c (${formatLanes(lanes)})`,
+        `%c⚛%c commit%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -103,7 +103,7 @@ export function logComponentSuspended(
       const id = getWakeableID(wakeable);
       const display = (wakeable: any).displayName || wakeable;
       log(
-        `%c⚛️%c ${componentName} suspended`,
+        `%c⚛%c ${componentName} suspended`,
         REACT_LOGO_STYLE,
         'color: #80366d; font-weight: bold;',
         id,
@@ -112,7 +112,7 @@ export function logComponentSuspended(
       wakeable.then(
         () => {
           log(
-            `%c⚛️%c ${componentName} resolved`,
+            `%c⚛%c ${componentName} resolved`,
             REACT_LOGO_STYLE,
             'color: #80366d; font-weight: bold;',
             id,
@@ -121,7 +121,7 @@ export function logComponentSuspended(
         },
         () => {
           log(
-            `%c⚛️%c ${componentName} rejected`,
+            `%c⚛%c ${componentName} rejected`,
             REACT_LOGO_STYLE,
             'color: #80366d; font-weight: bold;',
             id,
@@ -137,7 +137,7 @@ export function logLayoutEffectsStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c layout effects%c (${formatLanes(lanes)})`,
+        `%c⚛%c layout effects%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -158,7 +158,7 @@ export function logPassiveEffectsStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c passive effects%c (${formatLanes(lanes)})`,
+        `%c⚛%c passive effects%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -179,7 +179,7 @@ export function logRenderStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c render%c (${formatLanes(lanes)})`,
+        `%c⚛%c render%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -203,7 +203,7 @@ export function logForceUpdateScheduled(
   if (__DEV__) {
     if (enableDebugTracing) {
       log(
-        `%c⚛️%c ${componentName} forced update %c(${formatLanes(lane)})`,
+        `%c⚛%c ${componentName} forced update %c(${formatLanes(lane)})`,
         REACT_LOGO_STYLE,
         'color: #db2e1f; font-weight: bold;',
         '',
@@ -220,7 +220,7 @@ export function logStateUpdateScheduled(
   if (__DEV__) {
     if (enableDebugTracing) {
       log(
-        `%c⚛️%c ${componentName} updated state %c(${formatLanes(lane)})`,
+        `%c⚛%c ${componentName} updated state %c(${formatLanes(lane)})`,
         REACT_LOGO_STYLE,
         'color: #01a252; font-weight: bold;',
         '',

filename: packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
patch: @@ -103,17 +103,17 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${SYNC_LANE_STRING})`,
-      'log: ⚛️ Example suspended',
-      `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
+      `group: ⚛ render (${SYNC_LANE_STRING})`,
+      'log: ⚛ Example suspended',
+      `groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
     ]);
 
     logs.splice(0);
 
     resolveFakeSuspensePromise();
     await waitForAll([]);
 
-    expect(logs).toEqual(['log: ⚛️ Example resolved']);
+    expect(logs).toEqual(['log: ⚛ Example resolved']);
   });
 
   // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense && !disableLegacyMode
@@ -139,19 +139,19 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${SYNC_LANE_STRING})`,
+      `group: ⚛ render (${SYNC_LANE_STRING})`,
       'log: <Wrapper/>',
-      `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
+      `groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
     ]);
 
     logs.splice(0);
 
     await waitForPaint([]);
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${RETRY_LANE_STRING})`,
+      `group: ⚛ render (${RETRY_LANE_STRING})`,
       'log: <Example/>',
-      `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
+      `groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
     ]);
   });
 
@@ -184,15 +184,15 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
-      'log: ⚛️ Example suspended',
-      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ render (${DEFAULT_LANE_STRING})`,
+      'log: ⚛ Example suspended',
+      `groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
     ]);
 
     logs.splice(0);
 
     await act(async () => await resolveFakeSuspensePromise());
-    expect(logs).toEqual(['log: ⚛️ Example resolved']);
+    expect(logs).toEqual(['log: ⚛ Example resolved']);
   });
 
   // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
@@ -220,12 +220,12 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ render (${DEFAULT_LANE_STRING})`,
       'log: <Wrapper/>',
-      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
-      `group: ⚛️ render (${RETRY_LANE_STRING})`,
+      `groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ render (${RETRY_LANE_STRING})`,
       'log: <Example/>',
-      `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
+      `groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
     ]);
   });
 
@@ -250,11 +250,11 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
-      `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
-      `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
-      `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ commit (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
+      `log: ⚛ Example updated state (${SYNC_LANE_STRING})`,
+      `groupEnd: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛ commit (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -283,9 +283,9 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
-      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ render (${DEFAULT_LANE_STRING})`,
+      `log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -308,11 +308,11 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
-      `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
-      `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
-      `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ commit (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
+      `log: ⚛ Example updated state (${SYNC_LANE_STRING})`,
+      `groupEnd: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛ commit (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -334,9 +334,9 @@ describe('DebugTracing', () => {
       );
     });
     expect(logs).toEqual([
-      `group: ⚛️ passive effects (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
-      `groupEnd: ⚛️ passive effects (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ passive effects (${DEFAULT_LANE_STRING})`,
+      `log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛ passive effects (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -359,9 +359,9 @@ describe('DebugTracing', () => {
     });
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
-      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ render (${DEFAULT_LANE_STRING})`,
+      `log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -381,9 +381,9 @@ describe('DebugTracing', () => {
     );
 
     expect(logs).toEqual([
-      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `group: ⚛ render (${DEFAULT_LANE_STRING})`,
       'log: Hello from user code',
-      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
     ]);
   });