Photonize toolbox button icons

[fvsch]

“Toolbox buttons” are the optional buttons that appear at the right of the DevTools main toolbar. In #18 we redesigned the “Responsive Design Mode” and “Pick an iframe…” icons, and it would be great if we could have updated icons in Photon style shipping in the same release (probably Firefox 64, so we have a few weeks).

Firefox's Photon Design System has precise guidelines for icons. Current DevTools icon predate those, and use a different style.

Since we’re moving to Photon styling for some button icons, and those updated icons are all in the right-hand side, we could try to do a visual update to all the right-hand icons for now.

@violasong @mcroud:

• Do we already have some work for this?
• Is this something we should try to make progress on this release cycle?

Current icons

With all those buttons enabled (in preferences):

There are five icons:

1. Painting roller brush: "Toggle paint flashing"
2. Note pad: "Scratchpad"
3. Camera: "Take a screenshot of the entire page"
4. Angled ruler: "Toggle rulers for the page"
5. Straight ruler: "Measure a portion of the page"

Possible methodology

For each icon:

1. If the current icon design is simple enough, it might be able to retrace it using Photon 2px strokes and round terminals on a 16x16 canvas.
2. Otherwise, it might be possible to simplify the design by removing some details.
3. Or, start from the current concept, and see if it can be done with a simpler design. For instance the “roller” design is often drawn differently: https://thenounproject.com/search/?q=roller
4. Alternatively, pick a different or tweaked concept. For the paint cycle, we could use a classic paint brush or a paint can, or something different altogether.

[DPX-designer]

The toolbox buttons were indeed discussed last week and are planned for a revision, I'm not sure what the plan would be moving forward though so let's await @violasong

[digitarald]

To help scope this: Scratchpad is on the soon-to-be-removed list (as Console's input work is moving forward) and doesn’t need much attention. Paint flashing is also used sparsely and can be ignored for the MVP.

[fvsch]

Fixed in #36.