flutter / flutter/devtools

DevTools Debugger Page: UX Punch List 2020

Abierto
#1,972 8 comentarios 0 reacciones 0 asignados Ver en GitHub
P3 screen: debugger ux punchlist
Lenguaje dominante
Dart
Estrellas
1.7k
Forks
404
Merge medio
6 d 17 h
PR fusionados (30 d)
18

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
dart
Área
developer-experience, frontend, tooling
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
20/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.