DevTools Debugger Page: UX Punch List 2020

[raison00]

UX PUNCH LIST 2020: DEVTOOLS DEBUGGER PAGE

Update Overall UX

• [x] Add label title to console area for consistency
• [ ] Use DevTools standard table
• [ ] Update to DevTools unified standard color themes
• [ ] Rows need alternate colors
• [ ] Unify Search & Filter Expectations for DevTools (TBD)

Key shortcuts

now tracked at (https://github.com/flutter/devtools/issues/3867)

• [ ] Match Chrome DevTools key shortcuts where possible
• [ ] Add keyboard accelerators:
• • [ ] continue - F5
• • [ ] pause - F6
• • [ ] step over - F10
• • [ ] step into - F11
• • [ ] step out - shift-F11
• • [ ] goto line - cmd-L
• • [ ] previous file location - cmd-[
• • [ ] next file history location - cmd-]

Search / Filter

• [x] Create consistent search / filter bindings

• [x] Audit ctrl + p across linux / mac / windows

• [x] Update Filter shortcut with working command (replace ctrl + p)

  Breakpoints

• [ ] Add ability to set breakpoints quickly

• [ ] Update breakpoint mapping and indications

• [ ] Add easy-to-see prominent notification of breakpoint/code content navigation

• [ ] When changing breakpoints, add highlighted row in code area

  Distinguish: Prominent notification of Debugger State when on any DevTools page

• [ ] Add notification when App is paused but we don't have frame data

• [ ] Add badge to Debugger Tab to indicate App is paused

• [ ] Add animated notification when accessing during paused App state

• [ ] Adjust pause/ play location UI & UX allowing for activate/deactivate debugging in the running app

• [ ] Add banner to App with a pause/ resume CTA

• [ ] Engaged: #a6dace
• [ ] Engaged accent: #6dc497
• [ ] Disengaged: #9a9a9b
• [ ] Disengaged accent: #ccead7
• [ ] Debug Red Banner: #802826

Images

Current ( DevTools 0.2.5 Debugger Page)

:sparkles:

UX Punch List Updates:

[devoncarew]

@raison00, re: 'Adjust pause/ play location UI & UX' above - what did you have in mind?

[devoncarew]

Also, generally, thank you for the detailed UX punch-lists! They're great, and will really help apply consistency and polish throughout the UI.

[devoncarew]

For 'Add keyboard accelerators', I suggest we use:

• continue - F5
• pause - F6
• step over - F10
• step into - F11
• step out - shift-F11

This mirrors some common debugger keybindings.

[devoncarew]

also:

• goto line - cmd-L
• previous file location - cmd-[
• next file history location - cmd-]

[raison00]

@devoncarew Adjust pause/ play location UI & UX, in this case, is allowing for activate/deactivate debugging in the running app.

It addresses the additional step of returning to the debugging page to activate/deactivate the breakpoint. It offers visual awareness of set breakpoints impacting an unresponsive page and can reduce friction spent troubleshooting why the page is unresponsive.

Design: Two suggested implementations:

A: Full-width overlay banner with pause / resume buttons in same color as debugger banner. B: Compact overlay under the debugger banner location on right with play / pause buttons.

[devoncarew]

Ah, ok, Adjust pause/ play location UI & UX means in the UI of the running app. I'll update the line item to clarify that. I agree that it would be useful. It'd also be pretty challenging with the current runtime arch. - the thread that would draw the UI is the one that's paused - but possible if we ever do something like a flutter emulator.

[raison00]

I can update the line item and tidy up the list. I did attempt this yesterday, but didn't push the changes. thanks!

[kenzieschmoll]

@elliette is there anything on this punch list that is still relevant? If not, we should be able to close this.