• Stars
    star
    103
  • Rank 333,046 (Top 7 %)
  • Language
  • License
    Mozilla Public Li...
  • Created about 6 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Firefox DevTools UX Community

Contributing to Firefox DevTools UX

Welcome, and thanks for your interest in contributing to DevTools UX! The issues in this repository are currently in need of some cleanup/updating; however, if you see something you would like to work on, please get in touch! —Victoria

First Steps

  1. Join the friendly Firefox DevTools Slack community!
    • The new #ux channel 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 #general
  2. Check out the Firefox DevTools design system.

Process

  1. Claim a UX issue by commenting in it. Anything tagged good-first-issue is a great place to start, especially if you're new to design. Feel free to ask on Slack for help in choosing a first task. (Some tasks have some preliminary work done, but may still be available.)

  2. 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.
  3. 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 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 :).
  4. Post high-res screenshots in the relevant github issue and on #ux to get feedback. Make iterations as needed.

  5. Get a final sign-off from @victoria to send your design into development mode!

Tips

  • 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:

Communications

Mozilla People

Mentors:

  • @victoria - Senior DevTools UX
  • @yzen - Accessibility mentor
  • @gl - Developer mentor

Project people:

  • @Martin Balfanz - DesignTools PM (Inspector, RDM, Style Editor, Accessibility…)
  • @digitarald - DevTools PM (Console, Debugger, Network…)

More Repositories

1

debugger

The faster and smarter Debugger for Firefox DevTools 🔥🦊🛠
4,614
star
2

profiler

Firefox Profiler — Web app for Firefox performance analysis
JavaScript
1,156
star
3

vscode-firefox-debug

VS Code Debug Adapter for Firefox
TypeScript
389
star
4

devtools-core

🚀 Packages for Firefox DevTools
JavaScript
142
star
5

har-export-trigger

Trigger HAR export any time directly from within a page.
JavaScript
55
star
6

debugger-examples

Collection of good debugging examples
JavaScript
41
star
7

extension-examples

DevTools extension examples
JavaScript
27
star
8

devtools-examples

Code examples that accompany the MDN Firefox Developer Tools documentation
HTML
26
star
9

rust-cdp

🔨 Chrome DevTools Protocol toolkit for Rust
Rust
25
star
10

docs

Documentation for Firefox Developer Tools
HTML
24
star
11

Gecko-Profiler-Addon

(deprecated) Addon to control the Gecko Built-in Profiler
HTML
22
star
12

profiler-server

Firefox Profiler server and data storage infrastructure
TypeScript
17
star
13

rfcs

RFCs for changes to DevTools
15
star
14

reps

Firefox DevTools Reps
11
star
15

firefox-devtools.github.io

Community & Documentation
HTML
11
star
16

bidi-webconsole-prototype

CSS
10
star
17

demos

INACTIVE - http://mzl.la/ghe-archive - Demos for new features in Firefox DevTools
HTML
10
star
18

performance-dashboard

Dashboard to track performance of Firefox DevTools
JavaScript
7
star
19

bidi-har-export

Experimental module to compile WebDriver BiDi network events as a HAR file
JavaScript
7
star
20

hello-world

DevTools Hello World Tool
JavaScript
5
star
21

working-on-the-new-console

Advice if you're contributing to the new console front-end
5
star
22

webcompat-helper

INACTIVE - http://mzl.la/ghe-archive
JavaScript
4
star
23

performance-scenarios

JavaScript
3
star
24

storage-assessment

A test page to assess the status of storage panels
HTML
2
star
25

snippets-for-removing-the-sdk

A list of snippets and advice for removing SDK bits of code in our codebase, in response to https://bugzilla.mozilla.org/show_bug.cgi?id=1350645
2
star
26

debugger-docker

Scripts for working with Docker images for debugger.html
Makefile
2
star
27

remote-settings-mdn-browser-compat-data

Scripts to ingest MDN compat data in RemoteSettings
JavaScript
1
star
28

good-first-bugsify

A WebExtension to help you mark Firefox Developer Tools bugs in Bugzilla as good first bugs.
JavaScript
1
star