1274089 - Investigate Process for Automating and Streamlining Asset Creation

Status: NEW

(Firefox :: Theme, defect)

Description

[Stephen Horlander [:shorlander]]

Bug 1054016 is looking into the performance impact of using SVG icons for the primary browser toolbar.

In the meantime we are already shipping SVG icons for a variety of surfaces. Currently we have no unified way of formatting or shipping SVGs for use in product. We are also starting to duplicate icons in multiple files.

For more context I have outlined the problem and possible solutions in this document:
https://docs.google.com/document/d/1lwKOHavo-ngB473LyW1WH9abUt-Jv_hBEwntEeZwn-o/edit?usp=sharing

A good test case for an automated process that partially addresses the concerns in that document would be the Preferences icons.

Goals:
- Have one folder of individual SVG icons
- Combine these icons into one SVG file with Styling and IDs that can be referenced 

What this could look like (but doesn't have to look like exactly):
- Folder with individual glyph-preferences-general-32.svg, glyph-search-32.svg, glyph-addons-32.svg, etc.
- Config file that specifies fill value, and files to combine
- Output one combined file: icons-preferences.svg

Comment 1

[Matthew N. [:MattN]]

(In reply to Stephen Horlander [:shorlander] from comment #0)
> - Combine these icons into one SVG file with Styling and IDs that can be referenced 

Do you actually prefer one file or is this just a performance optimization? For debugging and overlaying, not have image regions/rects by having separate files is desirable.

Comment 2

[Stephen Horlander [:shorlander]]

(In reply to Matthew N. [:MattN] (behind on reviews) from comment #1)
> (In reply to Stephen Horlander [:shorlander] from comment #0)
> > - Combine these icons into one SVG file with Styling and IDs that can be referenced 
> 
> Do you actually prefer one file or is this just a performance optimization?
> For debugging and overlaying, not have image regions/rects by having
> separate files is desirable.

I think I would prefer separate files if we could use the color overlay approach. It would mean less replication. But then again if the process is automated it probably doesn't matter that much. Jwatt suggested that one file would probably perform better though. Still waiting on the perf investigation into the tests I posted in bug 1054016.

But I wasn't suggesting using rect/regions, I was suggesting using full URLs like we are already doing. E.g. https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/incontentprefs/preferences.inc.css#67

Comment 3

[Matthew N. [:MattN]]

(In reply to Stephen Horlander [:shorlander] from comment #2)
> But I wasn't suggesting using rect/regions, I was suggesting using full URLs
> like we are already doing. E.g.
> https://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/
> incontentprefs/preferences.inc.css#67

Oops, of course.

Comment 4

[Stephen Horlander [:shorlander]]

Going to hold off on this for now. Jwatt is working on bug 1058040 which will allow us to have a better process for using SVG icons.

See: https://bugzilla.mozilla.org/show_bug.cgi?id=1054016#c93

Comment 5

[Blake Winton (:bwinton) (:☕️)]

To make sure we're ready for when that bug is fixed, and to help Jwatt by giving him a real-world use case, we should implement the new process behind a compile-time flag.

Comment 6

[Blake Winton (:bwinton) (:☕️)]

It looks like we mostly have this working…  I'm un-assigning myself, but feel free to close it if you think we're good, Stephen!