Contributing to Firefox DevTools UX
Welcome, and thanks for your interest in contributing to DevTools UX! Our team only recently started working with design contributors, so things may be a bit disorganized initially. I’m happy to hear any feedback or ideas on improving the onboarding process. —Victoria
- Join the friendly Firefox DevTools Slack community!
- The new
#uxchannel is a place for us designers to hang out, ask questions, post mockups for feedback, and offer feedback for other designers’ mockups. We’ll be communicating with everyone through this channel.
- Feel free to introduce yourself or talk about general DevTools topics in
- The new
- Check out the Firefox DevTools design system (You can check for issues there too).
- This design system is a fork from the main Firefox design system
- We've started work on a Sketch library! Let us know if you want to help with this.
- Sign up for a GitHub account if you don’t already have one and message @victoria on Slack to be added to our team.
Once you have a task, it’s great to do a little research.
- Get ideas from similar UI in DevTools and Firefox. Download Firefox Nightly to view the latest version of the UI. When possible, try to reuse already existing colors and other visuals in DevTools/Firefox.
- Ask questions in Slack. Developers in panel-specific channels can help with questions about user needs and behaviors. You can also ask your own developer friends for ideas!
- See what Chrome, Safari, and Edge are doing for similar features. Also check out other development tools, like Atom and Xcode.
Start working on the design. There are several ways to approach this, depending on the task.
- Make a mockup. This could involve working in an existing Sketch file, modifying a screenshot, or recreating a mockup if you're interested in helping with our Sketch libraries. This is great for more involved visual changes that would be too much to code via the other methods. For small changes that really need to be tested on real content, this might not be practical. For more complex UX tasks, a low-fidelity wireframe is a great way to start.
- Inspect the toolbox via the toolbox-inspector to try out small CSS changes. This can be fraught with trouble due to the usual Inspector problem of no export/persistence features (it's in the plans!), but we use this all the time to quickly visualize a change.
- Building and running Firefox (instructions below), and trying CSS changes right in the codebase. It can be tricky to get started, but is especially useful because then you can seamlessly move on to submitting a patch :).
Post high-res screenshots in the relevant github issue and on #ux to get feedback. Make iterations as needed.
Get a final sign-off from @victoria to send your design into development mode!
- Take screenshots of every stage for your portfolio :)
- As a final step, icons should be saved/re-saved using Illustrator and follow the SVG guidelines for better performance. (A Mozilla person can help if you don't have a copy of Illustrator.) Other SVG tools can be great for this too.
Implementing Your Own Design
Do you know HTML and CSS? If so, you can make your own design a reality! The friendly engineers of Firefox DevTools can help mentor you through the process of submitting a good patch. The biggest first step is building Firefox. Here are some guides:
- Building Firefox for DevTools Development (Mac/Linux) — use the steps for Artifact Builds for much faster build times
- Debugger Contribution Guide
- General Firefox Contribution Guide (Windows)
- Profiles for running multiple Firefoxes at the same time
- @victoria - Senior DevTools UX
- @Matt Croud - DevTools UX
- @yzen - Accessibility mentor
- @erica - Developer mentor
- @gl - Developer mentor
- @bwinton - DevTools UX Manager
- @Martin Balfanz - DesignTools PM (Inspector, Style Editor, Accessibility, Canvas, Shader…)
- @digitarald - DevTools PM (Console, Debugger, Network…)