1037365 - Railroad diagrams for regular expressions

Status: NEW

(DevTools :: Debugger, enhancement, P5)

Description

[Panos Astithas (he/him) [:past] (please ni?)]

The debugger bubble popup allows the inspection of the runtime value of the hovered variable or property. It would be nice to expand it to allow inspection of regular expressions via railroad diagrams (like the ones in json.org).

Such an inspection popup would also make a lot of sense in the editor, since it doesn't depend on runtime information, so that WebIDE and Scratchpad can benefit from it as well. Brackets and Atom have open-source plugins that already provide that capability:

Railroad diagrams (CC0-licensed): https://github.com/tabatkins/railroad-diagrams
Atom extension in CoffeeScript (MIT-licensed, uses the above): https://github.com/klorenz/atom-regex-railroad-diagrams
Brackets extension in JS (MIT-licensed, uses the above two): https://github.com/warpdesign/brackets-regex-diagram

Comment 1

[Eddy Bruel [:ejpbruel]]

Attachment: Initial attempt

I've done an initial attempt at this by grabbing the files we need from the library with the brackets extension, but the results looks less than appealing (i.e. completely broken). It's like were missing some css files or something, but there are none in that library that I haven't already included. Could it be that this plugin depends on some CSS defined by atom?

I've attached a zip file with my initial attempt in case anybody wants to play with it. I might give it another shot myself later, but in the meantime other people are welcome to pick this up.

Comment 2

[Tom Tromey :tromey]

Still seems relevant.
I wonder if this could be in reps.