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 Right clicking devtools not working #3832)

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

Platform: Windows 10

Brave Version (revision SHA): ca68a99

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 #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 😃

[bsclifton]

+1 from #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 😍

[bsclifton]

+1 from user @patrick99e99 via #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 #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 #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 #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 😄