Feat:-Added open in editor to appear by default #26949

Biki-das · 2023-06-14T14:22:27Z

Currently the Open in editor just is a placeholder input where the developer would need to type the whole Vscode file path being shown as a placeholder, we can make this process a little easier by just already setting the URL .

Screen.Recording.2023-06-14.at.8.03.28.PM.mov

Earlier it used to be a placeholder describing the URL

cc @hoxyq

hoxyq

Great idea!

I left some comments, please also consider that we support setting the placeholder for the url value from environment variable EDITOR_URL. If this variable is set, we should display Custom option by default.

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

hoxyq · 2023-06-14T17:14:50Z

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

+    if (openInEditorURLPreset === 'vscode') {
+      setOpenInEditorURL('vscode://file/{path}:{line}');
+    } else {
+      setOpenInEditorURL('custom link');


Can we leave it empty? Since the option label will be already "Custom"?

Also, why are you using useEffect for it? Can we update editorURL in onChange callback of select?

Also, why are you using useEffect for it? Can we update editorURL in onChange callback of select?

😅 ah! i was about to refactor dropping the useEffect, something like below

const selectedValue = currentTarget.value; setOpenInEditorURLPreset(selectedValue); if (selectedValue === 'vscode') { setOpenInEditorURL('vscode://file/{path}:{line}'); } else if (selectedValue === 'custom') { setOpenInEditorURL(''); } }}>

Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>

Biki-das · 2023-06-14T17:57:56Z

@hoxyq will look at this tommorow , thanks for the nits!

Biki-das · 2023-06-15T08:44:37Z

@hoxyq made a few changes as per your request, waiting for another set of review!

i feel this UI feels more reasonable

Screen.Recording.2023-06-15.at.1.43.17.PM.mov

hoxyq

Thanks!

I thing we need two more things before merging this:

Can you please add a small margin between select and input?
Can you update / add new tests for this logic inside these react components? For both internal case (when EDITOR_URL env variable is set) and for public with custom url case

hoxyq · 2023-06-15T15:07:17Z

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

+            placeholder={
+              process.env.EDITOR_URL ? 'vscode://file/{path}:{line}' : ''
+            }


Suggested change

placeholder={

process.env.EDITOR_URL ? 'vscode://file/{path}:{line}' : ''

}

placeholder={getDefaultOpenInEditorURL()}

Or process.env.EDITOR_URL ? process.env.EDITOR_URL : ''

hoxyq · 2023-06-15T15:09:15Z

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

+            const selectedValue = currentTarget.value;
+            setOpenInEditorURLPreset(selectedValue);
+            if (selectedValue === 'vscode') {
+              setOpenInEditorURL('vscode://file/{path}:{line}');


Can you please move 'vscode://file/{path}:{line}' to a constant somewhere at the top?

Biki-das · 2023-06-15T15:21:27Z

@hoxyq thanks for the nits! i would try to make the changes as you requested! Could you confirm the test file location for the ones you asked me to write tests! packages/react-devtools-shared/src/__tests__/componentStacks-test.js is this the one!

hoxyq · 2023-06-16T10:41:41Z

@hoxyq thanks for the nits! i would try to make the changes as you requested! Could you confirm the test file location for the ones you asked me to write tests! packages/react-devtools-shared/src/__tests__/componentStacks-test.js is this the one!

No, I think you need to create a new one, something like ComponentSettings-test.js, because this is the component that you will test

Biki-das · 2023-06-16T17:46:05Z

@hoxyq on running the test getting this error

Error

$ C:\Users\bikid\react-1\node_modules.bin\jest ComponentSettings-test.js
FAIL src/tests/ComponentSettings-test.js
● Test suite failed to run

ReferenceError: __DEV__ is not defined

  10 |
  11 | const emptyObject = {};
> 12 | if (__DEV__) {
     | ^
  13 |   Object.freeze(emptyObject);
  14 | }
  15 |

  at Object.<anonymous> (../react/src/ReactBaseClasses.js:12:1)
  at Object.<anonymous> (../react/src/React.js:25:1)
  at Object.<anonymous> (../react/index.js:33:1)
  at Object.<anonymous> (src/__tests__/ComponentSettings-test.js:10:1)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.555 s
Ran all test suites matching /ComponentSettings-test.js/i.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

/**
 * 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
 */

import React from 'react';
import {render, fireEvent} from '@testing-library/react';
import ComponentsSettings from './ComponentsSettings';

describe('ComponentsSettings', () => {
  it('should add a filter when "Add filter" button is clicked', () => {
    const {getByText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');

    fireEvent.click(addButton);

    // Assert that a new filter is added
    expect(getByText('Filter matches')).toBeInTheDocument();
  });

  it('should remove a filter when "Delete filter" button is clicked', () => {
    const {getByText, queryByText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');
    const deleteButton = getByText('Delete filter');

    fireEvent.click(addButton);
    fireEvent.click(deleteButton);

    // Assert that the filter is removed
    expect(queryByText('Filter matches')).toBeNull();
  });

  it('should update the collapseNodesByDefault setting when expand/collapse checkbox is clicked', () => {
    const {getByLabelText} = render(<ComponentsSettings />);
    const expandCollapseCheckbox = getByLabelText(
      'Expand component tree by default',
    );

    fireEvent.click(expandCollapseCheckbox);

    // Assert that the setting is updated
    expect(expandCollapseCheckbox.checked).toBe(false);
  });

  it('should update the parseHookNames setting when parse hook names checkbox is clicked', () => {
    const {getByLabelText} = render(<ComponentsSettings />);
    const parseHookNamesCheckbox = getByLabelText(
      'Always parse hook names from source',
    );

    fireEvent.click(parseHookNamesCheckbox);

    // Assert that the setting is updated
    expect(parseHookNamesCheckbox.checked).toBe(true);
  });

  it('should update the openInEditorURLPreset and openInEditorURL settings when selecting a different preset', () => {
    const {getByLabelText, getByPlaceholderText} = render(
      <ComponentsSettings />,
    );
    const openInEditorURLPresetSelect = getByLabelText('Open in Editor URL:');
    const openInEditorURLInput = getByPlaceholderText(
      'vscode://file/{path}:{line}',
    );

    // Select the "VS Code" preset
    fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'vscode'}});

    // Assert that the preset and URL input are updated
    expect(openInEditorURLPresetSelect.value).toBe('vscode');
    expect(openInEditorURLInput.value).toBe('vscode://file/{path}:{line}');

    // Select the "Custom" preset
    fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'custom'}});

    // Assert that the preset and URL input are updated
    expect(openInEditorURLPresetSelect.value).toBe('custom');
    expect(openInEditorURLInput.value).toBe('');

    // Update the custom URL input
    fireEvent.change(openInEditorURLInput, {
      target: {value: 'https://example.com'},
    });

    // Assert that the custom URL input is updated
    expect(openInEditorURLInput.value).toBe('https://example.com');
  });

  it('should update the filter type when selecting a different type in the filter dropdown', () => {
    const {getByText, getByLabelText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');
    fireEvent.click(addButton);

    const filterTypeSelect = getByLabelText('Filter type:');
    fireEvent.change(filterTypeSelect, {target: {value: 'location'}});

    // Assert that the filter type is updated
    expect(filterTypeSelect.value).toBe('location');
  });

  it('should update the filter value when entering a value in the filter input field', () => {
    const {getByText, getByPlaceholderText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');
    fireEvent.click(addButton);

    const filterInput = getByPlaceholderText('Enter filter value');
    fireEvent.change(filterInput, {target: {value: 'example'}});

    // Assert that the filter value is updated
    expect(filterInput.value).toBe('example');
  });

  // Add more test cases for other functionality and interactions
});

hoxyq · 2023-06-16T18:02:57Z

@hoxyq on running the test getting this error

Error

$ C:\Users\bikid\react-1\node_modules.bin\jest ComponentSettings-test.js FAIL src/tests/ComponentSettings-test.js ● Test suite failed to run

ReferenceError: __DEV__ is not defined

  10 |
  11 | const emptyObject = {};
> 12 | if (__DEV__) {
     | ^
  13 |   Object.freeze(emptyObject);
  14 | }
  15 |

  at Object.<anonymous> (../react/src/ReactBaseClasses.js:12:1)
  at Object.<anonymous> (../react/src/React.js:25:1)
  at Object.<anonymous> (../react/index.js:33:1)
  at Object.<anonymous> (src/__tests__/ComponentSettings-test.js:10:1)

Test Suites: 1 failed, 1 total Tests: 0 total Snapshots: 0 total Time: 1.555 s Ran all test suites matching /ComponentSettings-test.js/i. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

/**
 * 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
 */

import React from 'react';
import {render, fireEvent} from '@testing-library/react';
import ComponentsSettings from './ComponentsSettings';

describe('ComponentsSettings', () => {
  it('should add a filter when "Add filter" button is clicked', () => {
    const {getByText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');

    fireEvent.click(addButton);

    // Assert that a new filter is added
    expect(getByText('Filter matches')).toBeInTheDocument();
  });

  it('should remove a filter when "Delete filter" button is clicked', () => {
    const {getByText, queryByText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');
    const deleteButton = getByText('Delete filter');

    fireEvent.click(addButton);
    fireEvent.click(deleteButton);

    // Assert that the filter is removed
    expect(queryByText('Filter matches')).toBeNull();
  });

  it('should update the collapseNodesByDefault setting when expand/collapse checkbox is clicked', () => {
    const {getByLabelText} = render(<ComponentsSettings />);
    const expandCollapseCheckbox = getByLabelText(
      'Expand component tree by default',
    );

    fireEvent.click(expandCollapseCheckbox);

    // Assert that the setting is updated
    expect(expandCollapseCheckbox.checked).toBe(false);
  });

  it('should update the parseHookNames setting when parse hook names checkbox is clicked', () => {
    const {getByLabelText} = render(<ComponentsSettings />);
    const parseHookNamesCheckbox = getByLabelText(
      'Always parse hook names from source',
    );

    fireEvent.click(parseHookNamesCheckbox);

    // Assert that the setting is updated
    expect(parseHookNamesCheckbox.checked).toBe(true);
  });

  it('should update the openInEditorURLPreset and openInEditorURL settings when selecting a different preset', () => {
    const {getByLabelText, getByPlaceholderText} = render(
      <ComponentsSettings />,
    );
    const openInEditorURLPresetSelect = getByLabelText('Open in Editor URL:');
    const openInEditorURLInput = getByPlaceholderText(
      'vscode://file/{path}:{line}',
    );

    // Select the "VS Code" preset
    fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'vscode'}});

    // Assert that the preset and URL input are updated
    expect(openInEditorURLPresetSelect.value).toBe('vscode');
    expect(openInEditorURLInput.value).toBe('vscode://file/{path}:{line}');

    // Select the "Custom" preset
    fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'custom'}});

    // Assert that the preset and URL input are updated
    expect(openInEditorURLPresetSelect.value).toBe('custom');
    expect(openInEditorURLInput.value).toBe('');

    // Update the custom URL input
    fireEvent.change(openInEditorURLInput, {
      target: {value: 'https://example.com'},
    });

    // Assert that the custom URL input is updated
    expect(openInEditorURLInput.value).toBe('https://example.com');
  });

  it('should update the filter type when selecting a different type in the filter dropdown', () => {
    const {getByText, getByLabelText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');
    fireEvent.click(addButton);

    const filterTypeSelect = getByLabelText('Filter type:');
    fireEvent.change(filterTypeSelect, {target: {value: 'location'}});

    // Assert that the filter type is updated
    expect(filterTypeSelect.value).toBe('location');
  });

  it('should update the filter value when entering a value in the filter input field', () => {
    const {getByText, getByPlaceholderText} = render(<ComponentsSettings />);
    const addButton = getByText('Add filter');
    fireEvent.click(addButton);

    const filterInput = getByPlaceholderText('Enter filter value');
    fireEvent.change(filterInput, {target: {value: 'example'}});

    // Assert that the filter value is updated
    expect(filterInput.value).toBe('example');
  });

  // Add more test cases for other functionality and interactions
});

Can you try to run this test via yarn test --project devtools --build ComponentSettings?

Biki-das · 2023-06-17T05:20:22Z

@hoxyq , does not seem to work :-(

yarn test --project devtools --build ComponentSettings
yarn run v1.22.19
error Command "test" not found. Did you mean "jest"?

hoxyq · 2023-06-17T07:53:24Z

@hoxyq , does not seem to work :-(

yarn test --project devtools --build ComponentSettings
yarn run v1.22.19
error Command "test" not found. Did you mean "jest"?

Are you running this command from root folder?

Biki-das · 2023-06-17T08:23:58Z

@hoxyq , does not seem to work :-(
yarn test --project devtools --build ComponentSettings
yarn run v1.22.19
error Command "test" not found. Did you mean "jest"?
Are you running this command from root folder?

yep tried from the repo root folder and also by making the cd to the test file , both did not work!


react-1 on  devtools-editor-patch [!?] via  v16.20.0
❯ yarn test --project devtools --build ComponentSettings
yarn run v1.22.19
$ node ./scripts/jest/jest-cli.js --project devtools --build ComponentSettings

Build directory does not exist, please run `yarn build` or remove the --build option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

react-1 on  devtools-editor-patch [!?] via  v16.20.0
❯

hoxyq · 2023-06-19T10:41:12Z

@hoxyq , does not seem to work :-(
yarn test --project devtools --build ComponentSettings
yarn run v1.22.19
error Command "test" not found. Did you mean "jest"?
Are you running this command from root folder?

yep tried from the repo root folder and also by making the cd to the test file , both did not work!


react-1 on  devtools-editor-patch [!?] via  v16.20.0
❯ yarn test --project devtools --build ComponentSettings
yarn run v1.22.19
$ node ./scripts/jest/jest-cli.js --project devtools --build ComponentSettings

Build directory does not exist, please run `yarn build` or remove the --build option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

react-1 on  devtools-editor-patch [!?] via  v16.20.0
❯

Try to run yarn build before this command, as it is recommended in the error message:

Build directory does not exist, please run yarn build or remove the --build option.

Biki-das · 2023-06-19T12:13:56Z

hey @hoxyq test have started to run , am i allowed to install the react-testing-library? also what could be the reason, the test are being skipped by Jest!

this is where i have created the test file, it ain't wrong i guess!

packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js

Biki-das · 2023-06-19T14:47:54Z

@hoxyq can i install react testing library to write the tests?

Biki-das · 2023-06-19T15:07:59Z

@hoxyq can i install react testing library to write the tests?

Rest all work is done, the input now renders with a small amount of margin from left

confused while running the test,

 TypeError: Cannot read properties of null (reading 'parseHookNames')

      57 | export default function ComponentsSettings(_: {}): React.Node {
      58 |   const store = useContext(StoreContext);
    > 59 |   const {parseHookNames, setParseHookNames} = useContext(SettingsContext);

i think an example from you running the test might help, the test are running but i am not able to understand the error messages!

hoxyq · 2023-06-20T10:02:42Z

@hoxyq can i install react testing library to write the tests?

Will this work properly with the fact that we are using React from source?

TypeError: Cannot read properties of null (reading 'parseHookNames')

I believe you need to mock the SettingsContext.

subashcs · 2023-06-20T15:32:19Z

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

+          <input
+            className={styles.Input}
+            type="text"
+            placeholder={process.env.EDITOR_URL ? process.env.EDITOR_URL : ''}


{process.env.EDITOR_URL || ' ' } would be a cleaner approach.

Biki-das · 2023-06-24T06:26:55Z

@hoxyq tried mocking the setting context still not able to write tests properly, could you help out to write a few tests so we can progress with this PR, if you find some time!

Biki-das · 2023-06-27T04:41:31Z

@Jack-Works could you help out with the test i am sort of confused on writing it, a small help would be appreciated :-)

see comment
#26949 (review)

Jack-Works · 2023-06-27T05:34:15Z

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

+          <input
+            className={styles.Input}
+            type="text"
+            placeholder={process.env.EDITOR_URL ? process.env.EDITOR_URL : ''}


please add a try-catch around process.env.EDITOR_URL, it might throw an error because process is undefined

Could you possibly help out with the tests, i tried to but could not wrap my head around the structure for the same! The file is already initialized could you try something up :-)

I wonder if there is an old test for the settings panel and you can add things there

Jack-Works · 2023-06-27T09:45:22Z

packages/react-devtools-shared/src/constants.js

+export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
+  'React::DevTools::openInEditorUrlPreset';
+


I suggest removing this new config, then if the React::DevTools::openInEditorUrl equals to 'vscode://file/{path}:{line}', you select the VSCode option. That will be simpler.

hi @Biki-das will you consider this? also cc @hoxyq

hi @Biki-das will you consider this? also cc @hoxyq

I think this adds kinda wrong dependency, you should select the preset first and then based on its value, you either do nothing or update the link template.

For example, if I select "custom" and then put "vscode://file/{path}:{line}", should we automatically switch to VSCode option and hide input?

hi @Biki-das will you consider this? also cc @hoxyq

I think this adds kinda wrong dependency, you should select the preset first and then based on its value, you either do nothing or update the link template.

For example, if I select "custom" and then put "vscode://file/{path}:{line}", should we automatically switch to VSCode option and hide input?

yup current implementation looks right i think @hoxyq

For example, if I select "custom" and then put "vscode://file/{path}:{line}", should we automatically switch to VSCode option and hide input?

Yes. I think this is good, but plz continue this PR if you don't agree with me!

hoxyq · 2023-06-29T14:28:24Z

packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js

+    const useContextMock = jest.fn().mockReturnValue({
+      collapseNodesByDefault: true,
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+    });
+
+    render(<ComponentsSettings />, container);


Could you please try to render ComponentsSettings wrapper in required contexts?
Like this:

render( <StoreContext.Provider value={...}> <SettingsContext.Provider value={...}> <ComponentsSettings /> </SettingsContext.Provider> </StoreContext.Provider>, container );

I think this should resolve your problem with mocking contexts and you won't be required to mock useContextMock

cc @Biki-das, have you tried this?

@hoxyq let me try :-) , was busy with other stuff!

the issue here is i don't have experience testing react components without rtl 😅, so i am really struggline to make this up!
Plain jest tests are hard to come up with

There is no rush, thanks for working on this!

@hoxyq did you looked the test files?

Not yet, sorry, I am finishing something and then will take a look at this, it is still in my queue

I've tried to find a workaround for these tests, but I think we will need to find a better approach on how they should be implemented.

We can remove these tests for now:

We don't have a good example with unit tests for custom components, some tests seem outdated and cover integration with user code

It is quite painful atm to write tests with using dispatchEvent because of how SyntheticEvents work

yup that's what i felt too, when i started out, so for now we would remove the test and get this merged?

yup that's what i felt too, when i started out, so for now we would remove the test and get this merged?

Yes, I will review the PR after your changes and hope we can ship this soon :)

hoxyq · 2023-06-29T14:29:20Z

packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js

+    container = null;
+  });
+
+  // @reactVersion >= 17


Please remove these annotations, my change has landed on main, so these tests should be included in tests runs now

yup i was going to remove it eventually!

Biki-das · 2023-07-24T13:27:27Z

@hoxyq Now the PR is at the stage of how it was working and doing as it was expected to do, if you have any changes to request please review back and direct me the same!

hoxyq

Looks good to me, one small nit is to move constant outside of component.

Please address it, I will also poke it tomorrow and if everything is good, will merge it, thanks!

hoxyq · 2023-07-25T17:52:24Z

packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js

  const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
    LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
    getDefaultOpenInEditorURL(),
  );

+  const vscodeFilepath = 'vscode://file/{path}:{line}';


Can you move it outside of function? Same file, but outside of the component.

thanks for the review! let me do the same :-)

Updated React from 9377e1010 to cb3404a0c. ### React upstream changes - facebook/react#27190 - facebook/react#27189 - facebook/react#27201 - facebook/react#27147 - facebook/react#26949 - facebook/react#27058 - facebook/react#27142 - facebook/react#27133 - facebook/react#27130 - facebook/react#27105 - facebook/react#27117 - facebook/react#27057

List of changes: * refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https://github.com/hoxyq) in [#27215](#27215)) * refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https://github.com/hoxyq) in [#27304](#27304)) * fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https://github.com/hoxyq) in [#27067](#27067)) * refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https://github.com/hoxyq) in [#27179](#27179)) * fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https://github.com/hoxyq) in [#27147](#27147)) * Feat:-Added open in editor to appear by default ([Biki-das](https://github.com/Biki-das) in [#26949](#26949)) * fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https://github.com/hoxyq) in [#27057](#27057)) * rename SuspenseList export to unstable_SuspenseList ([noahlemen](https://github.com/noahlemen) in [#27061](#27061))

@hoxyq

Currently the Open in editor just is a placeholder input where the developer would need to type the whole Vscode file path being shown as a placeholder, we can make this process a little easier by just already setting the URL . https://github.com/facebook/react/assets/72331432/96f43230-6c49-45f7-907c-c99a0d3d8bf7 Earlier it used to be a placeholder describing the URL <img width="1284" alt="Screenshot 2023-06-14 at 7 55 38 PM" src="https://github.com/facebook/react/assets/72331432/4e8234ad-e1cd-4b55-8ef8-46dea82a9c7c"> cc @hoxyq --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com> Co-authored-by: BIKI <biki@BIKIs-MacBook-Pro.local>

List of changes: * refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https://github.com/hoxyq) in [facebook#27215](facebook#27215)) * refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https://github.com/hoxyq) in [facebook#27304](facebook#27304)) * fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https://github.com/hoxyq) in [facebook#27067](facebook#27067)) * refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https://github.com/hoxyq) in [facebook#27179](facebook#27179)) * fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https://github.com/hoxyq) in [facebook#27147](facebook#27147)) * Feat:-Added open in editor to appear by default ([Biki-das](https://github.com/Biki-das) in [facebook#26949](facebook#26949)) * fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https://github.com/hoxyq) in [facebook#27057](facebook#27057)) * rename SuspenseList export to unstable_SuspenseList ([noahlemen](https://github.com/noahlemen) in [facebook#27061](facebook#27061))

@hoxyq

Currently the Open in editor just is a placeholder input where the developer would need to type the whole Vscode file path being shown as a placeholder, we can make this process a little easier by just already setting the URL . https://github.com/facebook/react/assets/72331432/96f43230-6c49-45f7-907c-c99a0d3d8bf7 Earlier it used to be a placeholder describing the URL <img width="1284" alt="Screenshot 2023-06-14 at 7 55 38 PM" src="https://github.com/facebook/react/assets/72331432/4e8234ad-e1cd-4b55-8ef8-46dea82a9c7c"> cc @hoxyq --------- Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com> Co-authored-by: BIKI <biki@BIKIs-MacBook-Pro.local> DiffTrain build for commit 493f72b.

Added open in editor to appear by default

81ecab9

facebook-github-bot added the CLA Signed label Jun 14, 2023

Changed default option to Vscode

a883d43

hoxyq reviewed Jun 14, 2023

View reviewed changes

Url path suggestion

f9c745b

Co-authored-by: Ruslan Lesiutin <rdlesyutin@gmail.com>

Removed useEffect and UI changes

cf2b03e

hoxyq reviewed Jun 15, 2023

View reviewed changes

BIKI added 2 commits June 19, 2023 18:15

Added margin and tests initialised

fbf83da

Added process.env

58e2099

Biki-das commented Jun 19, 2023

View reviewed changes

packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js Outdated Show resolved Hide resolved

Prettier

023c766

Tests updated

7c361a4

Biki-das requested a review from hoxyq June 20, 2023 07:15

subashcs reviewed Jun 20, 2023

View reviewed changes

Jack-Works reviewed Jun 27, 2023

View reviewed changes

hoxyq reviewed Jun 29, 2023

View reviewed changes

Revert test changes

34114ca

hoxyq approved these changes Jul 25, 2023

View reviewed changes

Moved the vs file path above the function

de9e2c4

hoxyq merged commit 493f72b into facebook:main Jul 27, 2023
34 of 35 checks passed

Biki-das deleted the devtools-editor-patch branch July 27, 2023 16:26

gnoff mentioned this pull request Aug 8, 2023

update vendored React packages to the the latest canary vercel/next.js#53742

Merged

hoxyq mentioned this pull request Aug 29, 2023

React DevTools 4.28.0 -> 4.28.1 #27305

Merged

		export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET =
		'React::DevTools::openInEditorUrlPreset';

Feat:-Added open in editor to appear by default #26949

Feat:-Added open in editor to appear by default #26949

Conversation

Biki-das commented Jun 14, 2023 • edited

hoxyq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Biki-das commented Jun 14, 2023

Biki-das commented Jun 15, 2023 • edited

hoxyq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Biki-das commented Jun 15, 2023 • edited

hoxyq commented Jun 16, 2023

Biki-das commented Jun 16, 2023

hoxyq commented Jun 16, 2023

Biki-das commented Jun 17, 2023

hoxyq commented Jun 17, 2023

Biki-das commented Jun 17, 2023 • edited

hoxyq commented Jun 19, 2023 • edited

Biki-das commented Jun 19, 2023 • edited

Biki-das commented Jun 19, 2023

Biki-das commented Jun 19, 2023 • edited

hoxyq commented Jun 20, 2023 • edited

subashcs Jun 20, 2023 • edited

Choose a reason for hiding this comment

Biki-das commented Jun 24, 2023

Biki-das commented Jun 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Jack-Works Jul 26, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Biki-das commented Jul 24, 2023

hoxyq left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Biki-das commented Jun 14, 2023 •

edited

Biki-das commented Jun 15, 2023 •

edited

Biki-das commented Jun 15, 2023 •

edited

Biki-das commented Jun 17, 2023 •

edited

hoxyq commented Jun 19, 2023 •

edited

Biki-das commented Jun 19, 2023 •

edited

Biki-das commented Jun 19, 2023 •

edited

hoxyq commented Jun 20, 2023 •

edited

subashcs Jun 20, 2023 •

edited

Jack-Works Jul 26, 2023 •

edited