Skip to content

DevTools: Add shortcut keys for standalone version #18226

@bvaughn

Description

@bvaughn
Contributor

Suggested keys:

  • ⌘1 - Switch to "Components" tab
  • ⌘2 - Switch to "Profiler" tab

Note that these shortcut keys should only be implemented for the standalone DevTools since (1) the browser already uses these shortcut keys and (2) the "Component" and "Profiler" tabs are only part of DevTools in the standalone version anyway.

Activity

kerolloz

kerolloz commented on Mar 5, 2020

@kerolloz
Contributor

Hello @bvaughn, I want to get started with this issue, I am not sure which one is the "standalone DevTools".
I think https://github.com/facebook/react/tree/master/packages/react-devtools is what you mean, right?

bvaughn

bvaughn commented on Mar 5, 2020

@bvaughn
ContributorAuthor

Yes, that's the one.

bvaughn

bvaughn commented on Mar 5, 2020

@bvaughn
ContributorAuthor

This issue is all yours! 😄

I've added the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

kerolloz

kerolloz commented on Mar 5, 2020

@kerolloz
Contributor

Thank you @bvaughn 😄

for the past two hours, I have been trying to get started with building the package from source as mentioned.
I did yarn build-for-devtools but it throws the following error
image

➜ yarn build-for-devtools

yarn run v1.22.0
$ cross-env RELEASE_CHANNEL=experimental yarn build -- react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer --type=NODE
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ node ./scripts/rollup/build.js react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer --type=NODE
 BUILDING  react.development.js (node_dev)
 COMPLETE  react.development.js (node_dev)

 BUILDING  react.production.min.js (node_prod)
 OH NOES!  react.production.min.js (node_prod)
                                                                                                                                                                                            
-- PLUGIN_ERROR (scripts/rollup/plugins/closure-plugin) --                                                                                                                                  
Error: Picked up _JAVA_OPTIONS: -Dawt.useSystemAAFontSettings=on -Dswing.aatext=true                                                                                                        
                                                                                                                                                                                            
    at /home/kerolloz/react/scripts/rollup/plugins/closure-plugin.js:16:16                                                                                                                  
    at ChildProcess.<anonymous> (/home/kerolloz/react/node_modules/google-closure-compiler/lib/node/closure-compiler.js:103:9)                                                              
    at ChildProcess.emit (events.js:321:20)                                                                                                                                                 
    at maybeClose (internal/child_process.js:1026:16)                                                                                                                                       
    at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)                                                                                                                
error Command failed with exit code 1.                                                                                                                                                      
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

more info:
image

is this a problem with Java?

bvaughn

bvaughn commented on Mar 5, 2020

@bvaughn
ContributorAuthor

You'll need Java to build React source, because of the Closure Compiler, but I suggest just using the download script instead.

./scripts/release/download-experimental-build.js

Should only take a few seconds.

kerolloz

kerolloz commented on Mar 5, 2020

@kerolloz
Contributor

Thank you @bvaughn 😄
I tried using the script but it depends on some packages that didn't exist despite running yarn in the main root directory.


back to the yarn build-for-devtools command
I followed the stack trace of the error and I managed to fix it.

function compile(flags) {
return new Promise((resolve, reject) => {
const closureCompiler = new ClosureCompiler(flags);
closureCompiler.run(function(exitCode, stdOut, stdErr) {
if (!stdErr) {
resolve(stdOut);
} else {
reject(new Error(stdErr));
}
});
});
}

I changed line 13 to be if (!exitCode) instead of if (!stdErr) and the issue was fixed and I managed to compile it.

kerolloz

kerolloz commented on Mar 5, 2020

@kerolloz
Contributor

oh my bad
I should have run yarn first inside the scripts/release dir. Sorry.

kerolloz

kerolloz commented on Mar 5, 2020

@kerolloz
Contributor

for the sake of documenting the errors I face, when I try to run yarn start at react/packages/react-devtools nothing happens. I tried running the electron executable at node_modules dir and the following error was given

➜ ./node_modules/.bin/electron 
[112941:0306/004904.433464:FATAL:setuid_sandbox_host.cc(157)] The SUID sandbox helper binary was found, but is not configured correctly. Rather than run without sandboxing I'm aborting now. You need to make sure that /home/kerolloz/react/node_modules/electron/dist/chrome-sandbox is owned by root and has mode 4755.

That is how I managed to solve it.

sudo sysctl kernel.unprivileged_userns_clone=1

refer to: electron/electron#17972

kerolloz

kerolloz commented on Mar 6, 2020

@kerolloz
Contributor

Hi @bvaughn
I have been playing around the devtools packages codebase the whole night. I'm a little bit confused, I should implement the tab switching shortcut feature in the rect-devtools dir. I don't really get to understand how the standalone devtools is connected to the frontend part. I see frontend bridge. what is the right approach to get started implementing the shortcuts feature only for the standalone version. According to Electron documentation, the keyboard shortcuts suggests 3 approaches, I see that the first approach might be a good choice (Local Shortcuts). but how can I manage the frontend part and switch tab from the electron part?

bvaughn

bvaughn commented on Mar 6, 2020

@bvaughn
ContributorAuthor

@kerolloz In case the READMEs aren't clear, here's a high level overview of the DevTools packages:

Working on this feature will mean you'll want to test the following packages:

  • packages/react-devtools-core: This is the standalone UI with built-in tabs.
  • packages/react-devtools-inline: This UI has built-in tabs too.
  • packages/react-devtools-shell: This UI has tabs too and also allows you to test the change more quickly when you're initially working on it.

You will also likely end up needing to work with packages/react-devtools-shared since it's where most of the code lives. 🙂 Specifically, you may end up adding code to:

  • DevTools to remember the last selected tab, set the right default, and wire up the shortcut keys. (Although please be sure to only do this if showTabBar is true.)
  • TabBar since this is where the Tabs live. (You may not need to do anything here though.)

I do not expected that you would end up needing to do anything in either packages/react-devtools or packages/react-devtools-extensions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    Participants

    @bvaughn@kerolloz

    Issue actions

      DevTools: Add shortcut keys for standalone version · Issue #18226 · facebook/react