mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
a7b829524b
## Summary This PR improves the Trace Updates feature by letting developers see component names directly on the update overlay. Before this change, the overlay only highlighted updated regions, leaving it unclear which components were involved. With this update, you can now match visual updates to their corresponding components, making it much easier to debug rendering performance. ### New Feature: Show component names while highlighting When the new **"Show component names while highlighting"** setting is enabled, the update overlay display the names of affected components above the rectangles, along with the update count. This gives immediate context about what’s rendering and why. The preference is stored in local storage and synced with the backend, so it’s remembered across sessions. ### Improvements to Drawing Logic The drawing logic has been updated to make the overlay sharper and easier to read. Overlay now respect device pixel ratios, so they look great on high-DPI screens. Outlines have also been made crisper, which makes it easier to spot exactly where updates are happening. > [!NOTE] > **Grouping Logic and Limitations** > Updates are grouped by their screen position `(left, top coordinates)` to combine overlapping or nearby regions into a single group. Groups are sorted by the highest update count within each group, making the most frequently updated components stand out. > Overlapping labels may still occur when multiple updates involve components that overlap but are not in the exact same position. This is intentional, as the logic aims to maintain a straightforward mapping between update regions and component names without introducing unnecessary complexity. ### Testing This PR also adds tests for the new `groupAndSortNodes` utility, which handles the logic for grouping and sorting updates. The tests ensure the behavior is reliable across different scenarios. ## Before & After https://github.com/user-attachments/assets/6ea0fe3e-9354-44fa-95f3-9a867554f74c https://github.com/user-attachments/assets/32af4d98-92a5-47dd-a732-f05c2293e41b --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>
62 lines
2.5 KiB
JavaScript
62 lines
2.5 KiB
JavaScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @flow
|
|
*/
|
|
|
|
export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
|
|
export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
|
|
export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
|
|
|
|
// Flip this flag to true to enable verbose console debug logging.
|
|
export const __DEBUG__ = false;
|
|
|
|
// Flip this flag to true to enable performance.mark() and performance.measure() timings.
|
|
export const __PERFORMANCE_PROFILE__ = false;
|
|
|
|
export const TREE_OPERATION_ADD = 1;
|
|
export const TREE_OPERATION_REMOVE = 2;
|
|
export const TREE_OPERATION_REORDER_CHILDREN = 3;
|
|
export const TREE_OPERATION_UPDATE_TREE_BASE_DURATION = 4;
|
|
export const TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS = 5;
|
|
export const TREE_OPERATION_REMOVE_ROOT = 6;
|
|
export const TREE_OPERATION_SET_SUBTREE_MODE = 7;
|
|
|
|
export const PROFILING_FLAG_BASIC_SUPPORT = 0b01;
|
|
export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;
|
|
|
|
export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
|
|
export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY =
|
|
'React::DevTools::componentFilters';
|
|
export const SESSION_STORAGE_LAST_SELECTION_KEY =
|
|
'React::DevTools::lastSelection';
|
|
export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL =
|
|
'React::DevTools::openInEditorUrl';
|
|
export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
|
|
'React::DevTools::openInEditorUrlPreset';
|
|
export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
|
|
'React::DevTools::parseHookNames';
|
|
export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
|
|
'React::DevTools::recordChangeDescriptions';
|
|
export const SESSION_STORAGE_RECORD_TIMELINE_KEY =
|
|
'React::DevTools::recordTimeline';
|
|
export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
|
|
'React::DevTools::reloadAndProfile';
|
|
export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
|
|
export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
|
|
'React::DevTools::traceUpdatesEnabled';
|
|
export const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
|
|
'React::DevTools::supportsProfiling';
|
|
export const LOCAL_STORAGE_SHOW_NAMES_WHEN_TRACING_KEY =
|
|
'React::DevTools::showNamesWhenTracing';
|
|
|
|
export const PROFILER_EXPORT_VERSION = 5;
|
|
|
|
export const FIREFOX_CONSOLE_DIMMING_COLOR = 'color: rgba(124, 124, 124, 0.75)';
|
|
export const ANSI_STYLE_DIMMING_TEMPLATE = '\x1b[2;38;2;124;124;124m%s\x1b[0m';
|
|
export const ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK =
|
|
'\x1b[2;38;2;124;124;124m%s %o\x1b[0m';
|