1517189 - Update toolbox icons to Photon style

Status: RESOLVED FIXED

(DevTools :: General, enhancement)

Description

[Florens Verschelde :fvsch]

Attachment: Toolbox Icons.svg

This bug is for implementing the design in:
https://github.com/devtools-html/ux/issues/36

We're updating all toolbox icons to a Photon style (16px icons, 2px main strokes, 1px secondary strokes, rounded). Some discussion is still ongoing for specific icons.

Figma source: https://www.figma.com/file/SvG26G5QeMmQ4iM6BMrfrmrh/Toolbox-Icons
(SVG export will be attached.)

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1517189 - Use Photon styling for toolbox icons (inspector, console, etc.); r=gl

Comment 2

[Florens Verschelde :fvsch]

I have a patch up for a first round of review. The actual SVG paths may change, so we should focus on the CSS changes unless there's a visible bug in some SVG code. Note: there are two icons where I have paths for 2 variants of the same icon, with one commented out. We should remove that ultimately.

On the CSS side:

- Renamed the --theme-toolbar-photon-icon-color variable to remove the "-photon-" part. Virtually all our color variables try to follow Photon guidelines, and this was the only variable with "photon" in it.
- Made the toolbox buttons a bit wider (26px instead of 24px) to account for the visually larger icons (often painted on the full 16px canvas instead of the 14px previously). We could go up to 28px and get fully square buttons.
- Made the toolbox tabs a bit more compact, with 8px of padding on the sides instead of 10px. (We're trying to use 4px, 8px and 20px padding wherever it makes sense to follow the Photon 4px grid, but that's not a strong requirement if we find that we want to keep 10px.)

Comment 3

[Florens Verschelde :fvsch]

There were two code style issues discussed:

1. Dimensions in the SVG sources. Discussed with :gl and :ntim. Basically we can use either `viewBox="0 0 16 16"` or `width="16" height="16"`, or both. Current icons tend to use both, and some only use viewBox. Using width/height has some benefits because it prevents cases where `<img src="some-icon.svg">` takes 100% of its parent's width (resulting in enormous icons); we size images in CSS, but having width/height is a bit more robust. For reference, the Photon image gallery uses both. For now I've decided to use width/height.

2. Images declared as CSS variables in toolbox.css and only used once. Discussed with :ntim and :birtles. This was apparently done to support the Firebug theme in bug 1265985. Since we don't have the Firebug theme anymore and don't want to support multiple icon sets, it's best to avoid creating useless variables (see also bug 1492008). So I've removed the variables.

For the SVG code style issue, I'm considering updating the docs at https://docs.firefox-dev.tools/frontend/svgs.html with a "template" SVG document looking like:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill #0c0c0d">
  <path d="..."/>
</svg>

Comment 4

[Florens Verschelde :fvsch]

Correction: I've updated to use both width/height and viewBox to be more consistent with other icons in Firefox which tend to use both, and icons from the Photon icon gallery.

The template SVG document would be:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
  <path d="..."/>
</svg>

Comment 5

[Florens Verschelde :fvsch]

Try push: https://treeherder.mozilla.org/#/jobs?repo=try&revision=4682ab7101dc939d3fe928b68a2e0405253687ab

Comment 6

[Tim Nguyen :ntim]

(In reply to Florens Verschelde [:fvsch] from comment #4)
> Correction: I've updated to use both width/height and viewBox to be more
> consistent with other icons in Firefox which tend to use both, and icons
> from the Photon icon gallery.
> 
> The template SVG document would be:
> 
> <!-- This Source Code Form is subject to the terms of the Mozilla Public
>    - License, v. 2.0. If a copy of the MPL was not distributed with this
>    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0
> 16 16" fill="context-fill #0c0c0d">
>   <path d="..."/>
> </svg>

FYI, the #0c0c0d part acts as a fallback color when context-fill isn't used. I'm not sure it's very useful in our case.

Comment 7

[Florens Verschelde :fvsch]

> FYI, the #0c0c0d part acts as a fallback color when context-fill isn't used. I'm not sure it's very useful in our case.

Since we're either providing a context-fill or (for the Debugger) using the icon as an opacity mask, I guess the default black fallback color works too, and we can simplify this bit.

I've filed bug 1517791 to further document and tweak the icon coding style.

Comment 8

[Florens Verschelde :fvsch]

UI review+: https://github.com/devtools-html/ux/issues/36#issuecomment-451253199
One more try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=17fe797e63f9b2ae665b6448fbe8f1a200abce5f

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d37414596419
Use Photon styling for toolbox icons (inspector, console, etc.); r=gl,ntim

Comment 10

[Florens Verschelde :fvsch]

Attachment: Toolbox Icons.svg

Updating the design document.
(The "Option 1" row is what was implemented in this bug.)

Comment 11

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/d37414596419