DevTools Debugger Page: UX Punch List 2020

## 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:

This is a broad UX punch list for the DevTools Debugger Page covering tables, themes, search, shortcuts, breakpoints, and debugger-state notifications. Start by reviewing the unchecked sections and the linked key-shortcuts issue (flutter/devtools#3867); done would require narrowing the scope and completing the selected items with agreement on the intended UX.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.