DevTools Design
This is a working draft Report issue
Firefox Developer Tools follow the same general Photon principles as Firefox, but in many cases, special guidelines and UI components and are needed for its more compact developer-focused interfaces.
Principles
- Keeping both beginners and experienced users in mind
- Optimizing for both design-in-brower and debugging
- (more later)
Panel Overview:
Under Active Development
- Inspector
- Flexbox Inspector: Undergoing major design & dev, not yet launched
- Fonts Editor: 1.0 launching soon
- Track Changes: In early development
- Responsive Design Mode: Recently updated, major features planned
- Animation Inspector: Actively developed
- Grid Inspector: 1.0 done, polish and subgrid planned
- Color Picker: Redesign in development
- Shape Editor: Recently launched
- Console
- Debugger
- Network
- about:debugging
- Top-level toolbar and its tabs and menus
- Accessibility: 1.0 recently launched by @yzen
Not Currently Under Development
- Performance (see Perf.html for current performance tooling)
- Style Editor
- Memory
- Scratchpad
- Storage: Will be merged with new Application panel
DevTools-Specific Components
(In progress)
Additions to Photon Guidelines
(In progress)