1850288 - Show path in JSON Viewer

Status: ASSIGNED

(DevTools :: JSON Viewer, enhancement, P3)

Description

[Nick]

Attachment: json_viewer_path_tool.js

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/112.0

Steps to reproduce:

Find it useful to get the path to what ever node in the JSON tree one are after. In that regard I have a script that I run in console to show this. It adds a new toolbar in the view. In addition one can edit the path to navigate the tree.

• Open a JSON file in browser.
• Open DevTools (console) and execute attached script.

This is, of course, only meant as a proof of concept ~ not production code ;)

Actual results:

Adds a new toolbar with the path to selected node in the JSON tree. If one click on a node the path gets updated. One can also edit the path in the toolbar upon which the nodes get selected.

Uses two types of notation:

• Dot notation: .foo.bar[3].baz
• Slash notation: /foo/bar/3/baz

One can toggle between the two by changing the first character in path. Change it to . (dot) to use dot notation or / (forward slash) to use slash notation.

Comment 1

[Nick]

Attachment: json_viewer_path_tool-0.2.js

Added a "Copy Node" functionality in addition to the "Copy Path". Copy the data of a sub-section of the JSON. Should perhaps be a "pretty" copy option.

Comment 2

[Zac Svoboda :zacnomore]

Very nice! This relates to bug 1833327

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

LyScott123 , is that something you'd like to give a try?

Comment 4

[LyScott123]

Yes, I would love to!!! Any additional information would be helpful! I also had a couple of questions about mercurial, which channel on Element would best to ask it? Thanks!!

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: VSCode breadcrumb

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

(In reply to LyScott123 from comment #4)

Yes, I would love to!!!

Great, I'll assign you the bug

Any additional information would be helpful!

So the idea is to add a breadcrumb at the top of the JSON content, under the toolbar we already have (the one with Save, Copy, …)
So you'd add another element in https://searchfox.org/mozilla-central/rev/6602bdf9fff5020fbc8e248c963ddddf09a77b1b/devtools/client/jsonview/components/JsonPanel.js#143-157 , below JsonToolbar

return div(
  { className: "jsonPanelBox tab-panel-inner" },
  JsonToolbar({
    actions: this.props.actions,
    dataSize: this.props.dataSize,
  }),
  div(
    {
      className: "panelContent",
      id: "json-scrolling-panel",
      tabIndex: 0,
    },
    content
  )
);

This would get updated when the user selects a given node in the JSON tree.
We will need the tree component to let us know when a node was selected (https://searchfox.org/mozilla-central/rev/6602bdf9fff5020fbc8e248c963ddddf09a77b1b/devtools/client/shared/components/tree/TreeView.js#523), maybe adding a onRowSelected prop that we could pass from JsonPanel.js, that would then be handled by the JsonBreadcrumb you'll add

In the end, It could look like what VSCode is doing for JSON file (see Comment 5)
Let me know if you have any other questions :)

I also had a couple of questions about mercurial, which channel on Element would best to ask it? Thanks!!

You can ask in https://chat.mozilla.org/#/room/#developers:mozilla.org , if it's more specific people will redirect you to other channel

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Comment 8

[Nikolai Lopin]

Hey! Happy to take this feature request

(unfortunately, I've lost access to my previous account :nlopin)

Comment 9

[Karan Yadav]

Hello, it seems no one is currently working on this issue. Could you please assign the bug to me?

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Karan Yadav from comment #9)

Hello, it seems no one is currently working on this issue. Could you please assign the bug to me?

sure, thanks for offering help Karan :)

Comment 11

[Karan Yadav]

Attachment: Bug 1850288 - [devtools] Add the component to show json path. r=#devtools-reviewers

Comment 12

[Karan Yadav]

Attachment: Bug 1850288 - [devtools] Add test for jsonview breadcrumb component. r=#devtools-reviewers