From dac36b040ae854b4863c105af108a52ed8bb00ac Mon Sep 17 00:00:00 2001 From: Aditya Vaish Date: Sat, 12 Jul 2025 13:12:34 -0700 Subject: [PATCH] issues fixed --- packages/react-devtools-shared/src/Logger.js | 4 +- .../src/devtools/ContextMenu/ContextMenu.js | 2 +- .../src/devtools/views/Button.css | 43 +++++++++++++++++++ packages/react-devtools-shell/package.json | 3 ++ .../react-devtools-shell/webpack-server.js | 22 ++++------ packages/shared/ReactVersion.js | 16 +------ 6 files changed, 59 insertions(+), 31 deletions(-) diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js index d37a33cf1c7eb..8e849f8925cae 100644 --- a/packages/react-devtools-shared/src/Logger.js +++ b/packages/react-devtools-shared/src/Logger.js @@ -11,10 +11,10 @@ import {enableLogger} from 'react-devtools-feature-flags'; export type LoggerEvent = | { - +event_name: 'loaded-dev-tools', + +event_name: 'loaded-dev-tools'; } | { - +event_name: 'error', + +event_name: 'error'; +error_message: string | null, +error_stack: string | null, +error_component_stack: string | null, diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js index a96634fbe46a0..02dd5ef933d60 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js @@ -98,7 +98,7 @@ export default function ContextMenu({ ownerWindow.removeEventListener('resize', hide); }; - }, []); + }, [hide, items, ownerDocument, position.x, position.y, ref]); if (portalContainer == null || items.length === 0) { return null; diff --git a/packages/react-devtools-shared/src/devtools/views/Button.css b/packages/react-devtools-shared/src/devtools/views/Button.css index 182b1b2526d3e..1895290cb8560 100644 --- a/packages/react-devtools-shared/src/devtools/views/Button.css +++ b/packages/react-devtools-shared/src/devtools/views/Button.css @@ -6,21 +6,31 @@ border-radius: 0.25rem; flex: 0 0 auto; cursor: pointer; + transition: all 0.15s ease-in-out; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } + .ButtonContent { display: inline-flex; align-items: center; border-radius: 0.25rem; padding: 0.25rem; + transition: all 0.15s ease-in-out; } .Button:hover { color: var(--color-button-hover); + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } + .Button:active { color: var(--color-button-focus); outline: none; + transform: translateY(0); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } + .Button:focus, .ButtonContent:focus { outline: none; @@ -28,6 +38,7 @@ .Button:focus > .ButtonContent { background: var(--color-button-background-focus); + box-shadow: 0 0 0 2px var(--color-button-focus); } .Button:disabled, @@ -35,4 +46,36 @@ background: var(--color-button-background); color: var(--color-button-disabled); cursor: default; + transform: none; + box-shadow: none; +} + +/* Primary button variant */ +.Button.primary { + background: var(--color-button-primary-background, #007bff); + color: var(--color-button-primary-text, white); +} + +.Button.primary:hover { + background: var(--color-button-primary-hover, #0056b3); +} + +/* Secondary button variant */ +.Button.secondary { + background: var(--color-button-secondary-background, #6c757d); + color: var(--color-button-secondary-text, white); +} + +.Button.secondary:hover { + background: var(--color-button-secondary-hover, #545b62); +} + +/* Danger button variant */ +.Button.danger { + background: var(--color-button-danger-background, #dc3545); + color: var(--color-button-danger-text, white); +} + +.Button.danger:hover { + background: var(--color-button-danger-hover, #c82333); } diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json index 999924aefa3c2..29f38aa6bb509 100644 --- a/packages/react-devtools-shell/package.json +++ b/packages/react-devtools-shell/package.json @@ -7,6 +7,9 @@ }, "dependencies": { "immutable": "^4.0.0-rc.12", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-is": "^19.1.0", "react-native-web": "0.0.0-26873b469", "semver": "^6.3.0" }, diff --git a/packages/react-devtools-shell/webpack-server.js b/packages/react-devtools-shell/webpack-server.js index a665601b66010..b15fecc3b2cdf 100644 --- a/packages/react-devtools-shell/webpack-server.js +++ b/packages/react-devtools-shell/webpack-server.js @@ -20,13 +20,8 @@ if (!NODE_ENV) { const EDITOR_URL = process.env.EDITOR_URL || null; -const builtModulesDir = resolve( - __dirname, - '..', - '..', - 'build', - 'oss-experimental', -); +// Use npm versions instead of build directory +const builtModulesDir = resolve(__dirname, 'node_modules'); const __DEV__ = NODE_ENV === 'development'; @@ -127,13 +122,14 @@ const app = makeConfig( 'perf-regression-devtools': './src/perf-regression/devtools.js', }, { - react: resolve(builtModulesDir, 'react'), - 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'), + // Use npm versions instead of build directory + react: 'react', + 'react-debug-tools': 'react-debug-tools', 'react-devtools-feature-flags': resolveFeatureFlags('shell'), - 'react-dom/client': resolve(builtModulesDir, 'react-dom/unstable_testing'), - 'react-dom': resolve(builtModulesDir, 'react-dom'), - 'react-is': resolve(builtModulesDir, 'react-is'), - scheduler: resolve(builtModulesDir, 'scheduler'), + 'react-dom/client': 'react-dom/client', + 'react-dom': 'react-dom', + 'react-is': 'react-is', + scheduler: 'scheduler', }, ); diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js index 647a57dfd286b..49a0826f768b5 100644 --- a/packages/shared/ReactVersion.js +++ b/packages/shared/ReactVersion.js @@ -1,15 +1 @@ -/** - * 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. - */ - -// TODO: this is special because it gets imported during build. -// -// It exists as a placeholder so that DevTools can support work tag changes between releases. -// When we next publish a release, update the matching TODO in backend/renderer.js -// TODO: This module is used both by the release scripts and to expose a version -// at runtime. We should instead inject the version number as part of the build -// process, and use the ReactVersions.js module as the single source of truth. -export default '19.1.0'; +export default '19.2.0-canary-97cdd5d3-20250710';