feat: enable webview tag support

[jakehamilton]

Why

We spoke about developer tools in the weekly team sync and one thing that was mentioned was that removing our devtools wrapper would make it more awkward to develop on Desktop since we didn't give users access to the chrome devtools there. I took some time to look into this and found that we can enable devtools for the specific webview that users will need to inspect.

What changed

The webviewTag feature has been enabled in the main browser window. This acts similarly to an iframe, but with added features supported by Electron. We don't enable any of these features for this use case so user applications should remain sandboxed like normal frames. What we do make use of is Electron's ability to open developer tools for these specific webviews since they are now managed differently internally. Because of this we can call webview.openDevTools() to give the user a real Chrome Developer Tools window that is scoped to just their webview.

The functional changes are over in repl-it-web and will rely on rendering a <webview> tag and calling the appropriate methods to open and close the developer tools.

Test plan

The functionality is in repl-it-web and is gated behind the flag flag-desktop-integrated-devtools. Adding yourself to that flag once both this pull request and the repl-it-web pull request are in will allow you to test that the native chrome devtools are used instead of our wrapper when in the desktop application.

The only functionality that should change is within the desktop app when this flag is toggled on. Web and mobile will continue working just like before with the devtools wrapper.

[sergeichestakov]

let's ship this to get it in as part of the next release but feel free to follow up with anything else in a subsequent PR

[jakehamilton]

awesome! that seems simple enough. is this all we need? what about the rest of the diff here: main...devtools-integrated ?

Yep, the other stuff was to support the alternate solution for devtools via remote debugging. Since we're going with the builtin support for webviews it's even simpler to implement here!

[sergeichestakov]

oh what's the difference exactly?

[jakehamilton]

The other solution is less ideal. It enables remote debugging for all web views which means every page that the desktop app loads would be picked up by chrome dev tools. It is also harder to work with since you have to make http calls to the remote debugging API to get the URL for the devtools page. And, probably worst of all, it used the remote debugging devtools which adds an entire unused and unremovable section on the left half of the devtools to show the URL (broken in electron) and screen (also broken in electron).

I wanted to try it out to see if I could round out some of the edges, but they proved to be tougher than I thought.

[sergeichestakov]

awesome, thanks for the context! agree this approach is better then