Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DevTools] Use Unicode Atom Symbol instead of Atom Emoji #30832

Merged
merged 2 commits into from
Sep 10, 2024
Merged

[DevTools] Use Unicode Atom Symbol instead of Atom Emoji #30832

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
601e98b
Use Atom Unicode Symbol instead of Emoji
sebmarkbage Aug 28, 2024
7cb7bc6
Put the icon at the end
sebmarkbage Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react-devtools-extensions/src/main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down Expand Up @@ -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 => {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/backend/fiber/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
2 changes: 1 addition & 1 deletion packages/react-devtools-shared/src/devtools/views/hooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
18 changes: 9 additions & 9 deletions packages/react-reconciler/src/DebugTracing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;',
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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;',
Expand All @@ -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;',
Expand All @@ -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;',
Expand All @@ -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;',
'',
Expand All @@ -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;',
'',
Expand Down
74 changes: 37 additions & 37 deletions packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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})`,
]);
});

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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})`,
]);
});

Expand All @@ -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})`,
]);
});

Expand Down Expand Up @@ -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})`,
]);
});

Expand All @@ -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})`,
]);
});

Expand All @@ -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})`,
]);
});

Expand All @@ -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})`,
]);
});

Expand All @@ -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})`,
]);
});

Expand Down
Loading