Browser-laptop: Various Developer Tools features are broken

[jonathansampson]

Did you search for similar issues before submitting this one?
Yes

Describe the issue you encountered:

• When the developer tools window is too narrow to display all section titles, a dropdown list is created. This list is not visible in Brave. This is the case both for Developer Tools on the application, and Developer Tools on the webview.
• Right clicking does not seem to work (see https://github.com/brave/browser-laptop/issues/3832)

Expected behavior:
Sections can be accessed via the dropdown menu.

Platform: Windows 10

Brave Version (revision SHA): https://github.com/brave/browser-laptop/commit/ca68a99e28d2b39d78c9855f0fc54778c431c9a8

Related Issues:

• #3832 Right clicking devtools not working

Screenshot if needed:

[jonathansampson]

This issue is seen elsewhere in the Developer Tools as well.

[bsclifton]

Similar to https://github.com/brave/browser-laptop/issues/6725 this will need some investigation. This would be a good place to start snooping https://github.com/brave/muon/blob/a642ebb32f7bef754cd8ebad46b8e75eda82f5cf/vendor/brightray/browser/inspectable_web_contents.h

Moving back to 1.0 (if you disagree, please re-assign and let's talk 😄 )

[NejcZdovc]

I think that is really important issue, because right now Brave is not usable for a developers, because right click menu and basic menu is not visible.

[luixxiul]

@NejcZdovc totally agreed, if you would be able to fix the issue, would you please take it if you don't mind?

[NejcZdovc]

@luixxiul right now I have two, three tasks already in my pipeline and honestly I programed my last line of code in C++ at the University, so it's bean a while :smiley:

[bsclifton]

+1 from https://github.com/brave/browser-laptop/issues/7539 (Investigation : Dev tools export network data)

@alexwykoff @luixxiul Key takeaways from the investigation:

HAR - Browser Support

• Save as HAR is available as a feature in Dev Tools for: Chrome, FF, Edge
• Save as HAR does not appear to have native support within Safari.

Save as HAR option: Specific differences between Brave and Chrome in Dev Tools:

• _Within dev tools, Chrome allows for the right click menu_ which contains the Save as HAR option.
• Brave does not allow the same right click behavior within Dev Tools.

• _Chrome allows for_ the keyboard shortcut ctrl+a on PC and cmd+a on Mac OS to select all network request events in the Network tab.
• _Brave does not allow_ the same keyboard shortcut commands in Dev Tools

If the select all and right click options were available in Brave dev tools, this might resolve the issue. Just in case it doesn't, I've included links in the Chromium source code for HAR saving options.

Charles Proxy supports importing HAR and exporting CSV from imported files as a workaround for a lack of .json and .csv export from the browser.

[lukemulks]

+1 for this being an important item

IMO, if this had to be prioritized, I'd recommend getting _right-click_ and _select-all_ keyboard functionality working in the Network panel and others at the top of the list.

Those are the first two things I notice I'm unable to do and think:

_Something's not quite consistent here, I can do this in dev tools in other browsers._

@jonathansampson might have some other feedback though from devrelations that I've not had exposure to, so tagging in case there are more hi-pri items around devtools than that.

[bsclifton]

Removing milestone for now- this is important for sure, but we don't have a clear owner identified. Please feel free to assign yourself / adjust milestone if you're willing to grab it

[jonathansampson]

@bsclifton @bridiver @darkdh @bbondy Do any of you have an opening to address the context-menu issue here? Just about everything else can wait, but not having the ability to right-click around the developer tools effectively breaks them to a large degree.

[bbondy]

I'll take a look

[NejcZdovc]

If this lands in 0.15.1 I will be so so happy :heart_eyes:

[bsclifton]

+1 from user @patrick99e99 via https://github.com/brave/browser-laptop/issues/9883

[jonathansampson]

+1 from Discord.

[Jacalz]

+1 from me this is super annoying and one of two things that keeps me needing to still have chrome installed

[tadhgpearson]

+1
Also right click on requests in the Network panel is broken :(

[twisterghost]

Experiencing the same problem, I swear this worked at some point, but maybe I'm misremembering?

Issue experienced on OSX 10.12.6 and Windows 10. Right click event is coming through, as it does a word highlight, but the context menu does not appear in the devtools window.

[bsclifton]

+1 from @pingram3541 via https://github.com/brave/browser-laptop/issues/13549

When opening dev tools and wanting to modify a dom element the right-click menu of choices is missing:

Additionally, double-clicking a node does not allow for editing, i.e. add a new div inside an existing one.

[jonathansampson]

@pingram3541 For now, you can select the node and press F2.

[bsclifton]

+1 from @pixelass via https://github.com/brave/browser-laptop/issues/5944

Dev tools colorpicker (dropper) not working correctly

1. Open the web inspector
2. Choose an element with a color property
3. activate the colorpicker
4. try picking colors outside the context

• Screenshot if needed:
  

[cyboman]

This issue is showing up for me in v0.23.31. I open the Inspector, try to click on the arrows next to Event Listeners, and nothing shows up.

[bsclifton]

Similar to https://github.com/brave/browser-laptop/issues/3555, I'm going close this issue as wontfix since the developer tools are fixed with Brave Core. There are experimental downloads available if you wanted to give it a try 😄