Debugger page rewrite in Flutter

[DaveShuckerow]

Debugger page Flutter web rewrite

General

• when initing state, have the script for the rootLib selected
• address some state management issues @kenzieschmoll
• the debugger should listen for reload events and see if any script source needs to be updated from the VM (Isolate / IsolateReload kind / status: "success")
• debounce some of the debugger events (optionally) so things like stepping are smoother (Consider debouncing debugger events so things like stepping are smoother #1924)

Call stack

• implement @kenzieschmoll

Variables

• implement @kenzieschmoll

breakpoints

• improve display
• update once the source line position has been resolved
• show a count in the area title
• click should jump to the source location
• setting a breakpoint on an unsupported line should set the breakpoint anyway even if it is a noop (ed: we now silently ignore the breakpoint attempt; we could change to provide more feedback to the user)
• have a way to clear all breakpoints
• persist breakpoints across sessions, per-app (Persist breakpoints across sessions, per-app #1925)

search in the running app

• improve scripts list display
• move the libraries view to the right side of the screen, have it hidden by default, and have an action button to expand it out in order to search for libraries
• allow searching for classes

debugger buttons

• Debugging controls for pause, resume, step in, step out, and step over
• improve the appearance so they don't resize on mouse hover
• show a control to configure break on exceptions

code area

• A view that can show code in Flutter (Introduce a view for showing the source of a script in Flutter with the monospaced font #1649)
• Line numbering and inline breakpoint markers
• show breakable lines in the gutter
• display the char column of the execution point
• have forward / back nav. history buttons in the title area (Debugger - add forward / back nav. history buttons in the title area #1929)
• show library imports, classes as hyperlinks in the view (based on VM info) (Show library imports and classes as hyperlinks in the debugger #1928)
• syntax highlighting (P2: Support syntax highlighting in the debugger code view #1927)

console area

• display stdout and stderr text
• allow for expression evaluation @devoncarew (Support expression evaluation in the debugger #1926)

---

Reference image for the old Flutter plugin view:

[jonahwilliams]

Drive-by syntax highlighting crazy idea: import the dart parser and use that for tokenization

[devoncarew]

For very simple dart syntax highlighting, you could use package:syntax_highlighter with RichText widgets.

However, we do get a lot of value out of codemirror (your first two bullet points). I think a very feasible option would be to use codemirror as a plugin for the flutter web build of devtools. For non-flutter web builds (like desktop), we could have a less featureful view - that would still support the usecase of using flutter desktop for development.

[jonahwilliams]

Looking at the implementation of package:syntax_highlighter, the RegExp based parsing is going to be incredibly slow in desktop AOT builds.

[devoncarew]

Yeah, I don't think the lines would be virtualized either. I think it's only an option for trivial cases.

[DaveShuckerow]

Some additional thoughts: May be worth holding off on breakpoint visualization; some open-sourced libraries are looking into this as well.

[jacob314]

Tagged as M16 for now as this will block making Flutter web the default. This one is definitely at risk of not making M16 so we will need to re-evaluate and move out of the milestone as needed.

[DaveShuckerow]

Unassigning myself on account of job change. Wish you success!