Open Bug 1262914 Opened 9 years ago Updated 1 year ago

Add support for Custom Formatters in devtools

Categories

(DevTools :: Console, enhancement, P3)

46 Branch
enhancement

Tracking

(Not tracked)

People

(Reporter: bgrins, Unassigned)

References

(Depends on 1 open bug, Blocks 1 open bug, )

Details

(Keywords: parity-chrome, Whiteboard: [newconsole-reserve])

Some links:

Documentation: https://docs.google.com/document/d/1FTascZXT9cxfetuPRT2eXPQKXui4nWFivUnS_335T3U/preview
Some basic examples: https://gist.github.com/paulirish/ac138a480ac971a0b500 
Chrome’s code for parsing the JSONML: https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/devtools/front_end/components/CustomPreviewSection.js 
Tutorial: http://www.mattzeunert.com/2016/02/19/custom-chrome-devtools-object-formatters.html

Basic implementation plan:

1) The Object actor would loop through window.devtoolsFormatters to see if it should be used for an object, and if so to gather the JSON ML and validate it
2) Pass the JSON ML (if any) along in the object grip to frontend
3) When Rep on frontend is expanded and prototypeAndProperties is fetched the children (which are also object actors) will also go through step 1
4) New JSONML Rep component will integrate with the tree to handle the nesting / rendering of the specified DOM

This depends at least on the DOM panel, which is integrating reps with object actors and a tree.  For it to work in the webconsole, it also depends on Bug 1243802 (expandable objects / reps inline in the output)
For whatever it is worth, my personal use-case for this is Immutable.js: they are pretty ugly to log directly. In Chrome I use an extension[1] that displays them nicely; it'd be great to do the same in Firefox.

[1] https://github.com/andrewdavey/immutable-devtools
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Whiteboard: [console-html][triage]
Whiteboard: [console-html][triage] → [reserve-console-html]
Severity: normal → enhancement
Priority: -- → P1
Whiteboard: [reserve-console-html] → [reserve-console-html]
Whiteboard: [reserve-console-html] → [newconsole-mvp]
This bug should be used to add the support for Custom Formaters on the server, i.e. returning a new flavor of object grip (JSONML) when an object is handled by the global handler.
Component: Developer Tools: Object Inspector → Developer Tools: Console
Unassigning since it's not in the goals for Q1. Can be placed in the reserve blacklog
Status: ASSIGNED → NEW
Priority: P1 → P2
Assignee: nchevobbe → nobody
Priority: P2 → P3
Whiteboard: [newconsole-mvp] → [newconsole-reserve]
Product: Firefox → DevTools

What's the status on this? ClojureScript relies on Chrome's custom formatters as well to print out data structures.

We are aware of ClojureScript's dependency and have talked to the team about what can be done here. So far this has not made it into our planning, but we will discuss our backlog again and will consider this.

Keywords: parity-chrome

Another bump - this would be extremely useful for clojurescript development. Especially considering Chrome is considering removing custom formatters altogether https://github.com/ChromeDevTools/devtools-frontend/commit/85e196bd4bc68ca7850c458eaa0fb00eb379f3d3#diff-3cf273a40d7f903d23ccccd12a43b157R64.

As a twitter poll showed, such a feature is very popular amongst ClojureScript and Immutable.js users:
https://www.reddit.com/r/Clojure/comments/gpqvu5/we_did_it_reddit/
so +1 for me too!

Depends on: 1642461

We won't add custom formatters as Chrome does it right now. A coordinated DevTools initiative needs to figure out how to create formatters in an extensible, secure way.

Meanwhile, I filed bug 1642461 to build CLJS natively into DevTools, similar to how we already support other frameworks in the Debugger for collapsing call stacks and file types. We would love help from the CLJS community on bug 1642461 and would support this with hands-on mentoring.

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.