packages/react-devtools-timeline/src/content-views/constants.js - main - githubmr/facebook-react

packages/react-devtools-timeline/src/content-views/constants.js
308 строк10 KB
Jan Kassens
Update Flow to 0.257 (#34253)
21 авг 2025, 20:30
21 авг 2025, 20:30ec5dd0a
/**
 * 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 DPR: number = window.devicePixelRatio || 1;
export const LABEL_SIZE = 80;
export const MARKER_HEIGHT = 20;
export const MARKER_TICK_HEIGHT = 8;
export const FONT_SIZE = 10;
export const MARKER_TEXT_PADDING = 8;
export const COLOR_HOVER_DIM_DELTA = 5;
export const TOP_ROW_PADDING = 4;
export const NATIVE_EVENT_HEIGHT = 14;
export const SUSPENSE_EVENT_HEIGHT: number = 14;
export const PENDING_SUSPENSE_EVENT_SIZE = 8;
export const REACT_EVENT_DIAMETER = 6;
export const USER_TIMING_MARK_SIZE = 8;
export const REACT_MEASURE_HEIGHT = 14;
export const BORDER_SIZE = 1 / DPR;
export const FLAMECHART_FRAME_HEIGHT = 14;
export const TEXT_PADDING = 3;
export const SNAPSHOT_SCRUBBER_SIZE = 3;

export const INTERVAL_TIMES = [
  1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000,
];
export const MIN_INTERVAL_SIZE_PX = 70;

// TODO Replace this with "export let" vars
export let COLORS: {
  BACKGROUND: string,
  INTERNAL_MODULE_FRAME: string,
  INTERNAL_MODULE_FRAME_HOVER: string,
  INTERNAL_MODULE_FRAME_TEXT: string,
  NATIVE_EVENT: string,
  NATIVE_EVENT_HOVER: string,
  NETWORK_PRIMARY: string,
  NETWORK_PRIMARY_HOVER: string,
  NETWORK_SECONDARY: string,
  NETWORK_SECONDARY_HOVER: string,
  PRIORITY_BACKGROUND: string,
  PRIORITY_BORDER: string,
  PRIORITY_LABEL: string,
  REACT_COMMIT: string,
  REACT_COMMIT_HOVER: string,
  REACT_COMMIT_TEXT: string,
  REACT_IDLE: string,
  REACT_IDLE_HOVER: string,
  REACT_LAYOUT_EFFECTS: string,
  REACT_LAYOUT_EFFECTS_HOVER: string,
  REACT_LAYOUT_EFFECTS_TEXT: string,
  REACT_PASSIVE_EFFECTS: string,
  REACT_PASSIVE_EFFECTS_HOVER: string,
  REACT_PASSIVE_EFFECTS_TEXT: string,
  REACT_RENDER: string,
  REACT_RENDER_HOVER: string,
  REACT_RENDER_TEXT: string,
  REACT_RESIZE_BAR: string,
  REACT_RESIZE_BAR_ACTIVE: string,
  REACT_RESIZE_BAR_BORDER: string,
  REACT_RESIZE_BAR_DOT: string,
  REACT_SCHEDULE: string,
  REACT_SCHEDULE_HOVER: string,
  REACT_SUSPENSE_REJECTED_EVENT: string,
  REACT_SUSPENSE_REJECTED_EVENT_HOVER: string,
  REACT_SUSPENSE_RESOLVED_EVENT: string,
  REACT_SUSPENSE_RESOLVED_EVENT_HOVER: string,
  REACT_SUSPENSE_UNRESOLVED_EVENT: string,
  REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: string,
  REACT_THROWN_ERROR: string,
  REACT_THROWN_ERROR_HOVER: string,
  REACT_WORK_BORDER: string,
  SCROLL_CARET: string,
  SCRUBBER_BACKGROUND: string,
  SCRUBBER_BORDER: string,
  SEARCH_RESULT_FILL: string,
  TEXT_COLOR: string,
  TEXT_DIM_COLOR: string,
  TIME_MARKER_LABEL: string,
  USER_TIMING: string,
  USER_TIMING_HOVER: string,
  WARNING_BACKGROUND: string,
  WARNING_BACKGROUND_HOVER: string,
  WARNING_TEXT: string,
  WARNING_TEXT_INVERED: string,
} = {
  BACKGROUND: '',
  INTERNAL_MODULE_FRAME: '',
  INTERNAL_MODULE_FRAME_HOVER: '',
  INTERNAL_MODULE_FRAME_TEXT: '',
  NATIVE_EVENT: '',
  NATIVE_EVENT_HOVER: '',
  NETWORK_PRIMARY: '',
  NETWORK_PRIMARY_HOVER: '',
  NETWORK_SECONDARY: '',
  NETWORK_SECONDARY_HOVER: '',
  PRIORITY_BACKGROUND: '',
  PRIORITY_BORDER: '',
  PRIORITY_LABEL: '',
  USER_TIMING: '',
  USER_TIMING_HOVER: '',
  REACT_IDLE: '',
  REACT_IDLE_HOVER: '',
  REACT_RENDER: '',
  REACT_RENDER_HOVER: '',
  REACT_RENDER_TEXT: '',
  REACT_COMMIT: '',
  REACT_COMMIT_HOVER: '',
  REACT_COMMIT_TEXT: '',
  REACT_LAYOUT_EFFECTS: '',
  REACT_LAYOUT_EFFECTS_HOVER: '',
  REACT_LAYOUT_EFFECTS_TEXT: '',
  REACT_PASSIVE_EFFECTS: '',
  REACT_PASSIVE_EFFECTS_HOVER: '',
  REACT_PASSIVE_EFFECTS_TEXT: '',
  REACT_RESIZE_BAR: '',
  REACT_RESIZE_BAR_ACTIVE: '',
  REACT_RESIZE_BAR_BORDER: '',
  REACT_RESIZE_BAR_DOT: '',
  REACT_SCHEDULE: '',
  REACT_SCHEDULE_HOVER: '',
  REACT_SUSPENSE_REJECTED_EVENT: '',
  REACT_SUSPENSE_REJECTED_EVENT_HOVER: '',
  REACT_SUSPENSE_RESOLVED_EVENT: '',
  REACT_SUSPENSE_RESOLVED_EVENT_HOVER: '',
  REACT_SUSPENSE_UNRESOLVED_EVENT: '',
  REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: '',
  REACT_THROWN_ERROR: '',
  REACT_THROWN_ERROR_HOVER: '',
  REACT_WORK_BORDER: '',
  SCROLL_CARET: '',
  SCRUBBER_BACKGROUND: '',
  SCRUBBER_BORDER: '',
  SEARCH_RESULT_FILL: '',
  TEXT_COLOR: '',
  TEXT_DIM_COLOR: '',
  TIME_MARKER_LABEL: '',
  WARNING_BACKGROUND: '',
  WARNING_BACKGROUND_HOVER: '',
  WARNING_TEXT: '',
  WARNING_TEXT_INVERED: '',
};

export function updateColorsToMatchTheme(element: Element): boolean {
  const computedStyle = getComputedStyle(element);

  // Check to see if styles have been initialized...
  if (computedStyle.getPropertyValue('--color-background') == null) {
    return false;
  }

  COLORS = {
    BACKGROUND: computedStyle.getPropertyValue('--color-background'),
    INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
      '--color-timeline-internal-module',
    ),
    INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-internal-module-hover',
    ),
    INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-internal-module-text',
    ),
    NATIVE_EVENT: computedStyle.getPropertyValue(
      '--color-timeline-native-event',
    ),
    NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-native-event-hover',
    ),
    NETWORK_PRIMARY: computedStyle.getPropertyValue(
      '--color-timeline-network-primary',
    ),
    NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-network-primary-hover',
    ),
    NETWORK_SECONDARY: computedStyle.getPropertyValue(
      '--color-timeline-network-secondary',
    ),
    NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-network-secondary-hover',
    ),
    PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
      '--color-timeline-priority-background',
    ),
    PRIORITY_BORDER: computedStyle.getPropertyValue(
      '--color-timeline-priority-border',
    ),
    PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
    USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
    USER_TIMING_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-user-timing-hover',
    ),
    REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
    REACT_IDLE_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-idle-hover',
    ),
    REACT_RENDER: computedStyle.getPropertyValue(
      '--color-timeline-react-render',
    ),
    REACT_RENDER_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-render-hover',
    ),
    REACT_RENDER_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-render-text',
    ),
    REACT_COMMIT: computedStyle.getPropertyValue(
      '--color-timeline-react-commit',
    ),
    REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-commit-hover',
    ),
    REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-commit-text',
    ),
    REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
      '--color-timeline-react-layout-effects',
    ),
    REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-layout-effects-hover',
    ),
    REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-layout-effects-text',
    ),
    REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
      '--color-timeline-react-passive-effects',
    ),
    REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-passive-effects-hover',
    ),
    REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-passive-effects-text',
    ),
    REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
    REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
      '--color-resize-bar-active',
    ),
    REACT_RESIZE_BAR_BORDER: computedStyle.getPropertyValue(
      '--color-resize-bar-border',
    ),
    REACT_RESIZE_BAR_DOT: computedStyle.getPropertyValue(
      '--color-resize-bar-dot',
    ),
    REACT_SCHEDULE: computedStyle.getPropertyValue(
      '--color-timeline-react-schedule',
    ),
    REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-schedule-hover',
    ),
    REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-rejected',
    ),
    REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-rejected-hover',
    ),
    REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-resolved',
    ),
    REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-resolved-hover',
    ),
    REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-unresolved',
    ),
    REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-unresolved-hover',
    ),
    REACT_THROWN_ERROR: computedStyle.getPropertyValue(
      '--color-timeline-thrown-error',
    ),
    REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-thrown-error-hover',
    ),
    REACT_WORK_BORDER: computedStyle.getPropertyValue(
      '--color-timeline-react-work-border',
    ),
    SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
    SCRUBBER_BACKGROUND: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-rejected',
    ),
    SEARCH_RESULT_FILL: computedStyle.getPropertyValue(
      '--color-timeline-react-suspense-rejected',
    ),
    SCRUBBER_BORDER: computedStyle.getPropertyValue(
      '--color-timeline-text-color',
    ),
    TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
    TEXT_DIM_COLOR: computedStyle.getPropertyValue(
      '--color-timeline-text-dim-color',
    ),
    TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
    WARNING_BACKGROUND: computedStyle.getPropertyValue(
      '--color-warning-background',
    ),
    WARNING_BACKGROUND_HOVER: computedStyle.getPropertyValue(
      '--color-warning-background-hover',
    ),
    WARNING_TEXT: computedStyle.getPropertyValue('--color-warning-text-color'),
    WARNING_TEXT_INVERED: computedStyle.getPropertyValue(
      '--color-warning-text-color-inverted',
    ),
  };

  return true;
}