1268575 - Provide CSS classes for different icons used across tools

Status: REOPENED

(DevTools :: Shared Components, enhancement, P3)

Description

[Tim Nguyen :ntim]

It would be nice to introduce classes for icons that are used across different tools. It avoids us having bugs like bug 1268188 or bug 1261430.

List of icons that are used across various tools:
- pane toggle (inspector, debugger, netmonitor, web audio) 
- add (inspector, rules view)
- play/pause (Debugger, Canvas debugger, animation inspector)
- Step over/in/out (debugger and canvas debugger)
- profiler stopwatch (profiler, canvas debugger, netmonitor)
- toggle visibility (style editor, shader editor, debugger)
- element picker (command button, anim inspector)
- highlight element (rules view, console)
- "X" icon
- clear
- options
- eyedropper (command button, color picker)
- screenshot (new RDM, command button, memory)

Perhaps in the future:
- diff (perhaps we want a diff functionality for the inspector)
- import (maybe we want to switch to an icon?)

Proposed usage:
Icon button:
<button class="devtools-button devtools-clear-icon"></button>

Icon text button:
<button class="devtools-button devtools-stopwatch-icon">2 requests (3KB)</button>

Icon button without the button styles:
<button class="devtools-icon devtools-remove-icon"></button>

Comment 1

[Patrick Brosset <:pbro>]

DevTools bug triage (filter on CLIMBING SHOES).

Comment 2

[BMO Automation]

Per policy at https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Inactive_Bugs. If this bug is not an enhancement request or a bug not present in a supported release of Firefox, then it may be reopened.

Comment 3

[Mellina Y.]

Hi Tim,

Can I offer my help on this one? It seems straightforward, although time-consuming.

Thanks!