flutter / flutter/devtools

DevTools Debugger Page: UX Punch List 2020

Offen
#1,972 8 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
P3 screen: debugger ux punchlist
Vorherrschende Sprache
Dart
Sterne
1.7k
Forks
404
Ø Merge
6 T. 17 Std.
Gemergte PRs (30 T.)
18

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
dart
Bereich
developer-experience, frontend, tooling
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
20/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.