flutter / flutter/devtools

DevTools Debugger Page: UX Punch List 2020

未关闭
#1,972 8 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
P3 screen: debugger ux punchlist
主要语言
Dart
星标
1.7k
派生
404
平均合并
6 天 17 小时
30 天内合并 PR
18

描述

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

![image](https://user-images.githubusercontent.com/8105802/83310988-b031c300-a1c2-11ea-88d8-976ccf40a805.png)

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

![image](https://user-images.githubusercontent.com/8105802/83311047-e40ce880-a1c2-11ea-8268-0b97fb5223b6.png)

## Images
#### Current ( DevTools 0.2.5 Debugger Page)

![image](https://user-images.githubusercontent.com/8105802/82094111-46d58e80-96b1-11ea-94e3-47ee635e28ce.png)
![image](https://user-images.githubusercontent.com/8105802/82094178-68367a80-96b1-11ea-8e07-ed5d7906eb84.png)

:sparkles:
#### UX Punch List Updates:
![image](https://user-images.githubusercontent.com/8105802/82093922-eba39c00-96b0-11ea-9b69-391ec5151a91.png)
![image](https://user-images.githubusercontent.com/8105802/82093947-f8c08b00-96b0-11ea-995f-d014ba8cefb4.png)

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。