Issue 5973 - broken icons on Firefox v50-53

skin/icons/trash.svg

Index: skin/icons/trash.svg
===================================================================
--- a/skin/icons/trash.svg
+++ b/skin/icons/trash.svg
@@ -1,1 +1,13 @@
-<svg id="e4fee3cd-bcdb-4c90-95b7-79c640275902" data-name="artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><title>trash</title><rect x="22.96" y="16" width="2" height="22"/><rect x="29.96" y="16" width="2" height="22"/><rect x="15.96" y="16" width="2" height="22"/><path d="M44,7H33V5a5,5,0,0,0-5-5H20a5,5,0,0,0-5,5V7H4V9H6.68V39a9,9,0,0,0,9,9H32.23a9,9,0,0,0,9-9V9H44ZM17,5a3,3,0,0,1,3-3h8a3,3,0,0,1,3,3V7H17ZM39.23,39a7,7,0,0,1-7,7H15.68a7,7,0,0,1-7-7V9H39.23Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <view id="default" viewBox="0 0 48 48"/>
+  <rect x="22.96" y="16" width="2" height="22" fill="#099DD1"/>
+  <rect x="29.96" y="16" width="2" height="22" fill="#099DD1"/>
+  <rect x="15.96" y="16" width="2" height="22" fill="#099DD1"/>
+  <path d="M44,7H33V5a5,5,0,0,0-5-5H20a5,5,0,0,0-5,5V7H4V9H6.68V39a9,9,0,0,0,9,9H32.23a9,9,0,0,0,9-9V9H44ZM17,5a3,3,0,0,1,3-3h8a3,3,0,0,1,3,3V7H17ZM39.23,39a7,7,0,0,1-7,7H15.68a7,7,0,0,1-7-7V9H39.23Z" fill="#099DD1"/>
+
+  <view id="hover" viewBox="0 48 48 48"/>

[Thomas Greiner, 2017/11/03 19:04:10]

Detail: Let's add a comment above to explain why we need this workaround so that
we can get rid of it as soon as we drop support for older Firefox versions which
don't support the "mask" property.

This also applies to other SVG files with this workaround.

[saroyanm, 2017/11/03 19:18:17]

This approach looks to be more performant, don't you think that it's better to
keep this approach rather than using masks ? 

[Thomas Greiner, 2017/11/03 19:47:36]

If performance is more important than maintainability. At this point I'm not
sure this is the case but even if it is, we should still be able to find ways to
improve maintainability even without "mask". We'll need to look at that later
on.

+  <rect x="22.96" y="16" width="2" height="22" transform="translate(0, 48)" fill="#5CBCE1"/>
+  <rect x="29.96" y="16" width="2" height="22" transform="translate(0, 48)" fill="#5CBCE1"/>
+  <rect x="15.96" y="16" width="2" height="22" transform="translate(0, 48)" fill="#5CBCE1"/>
+  <path d="M44,7H33V5a5,5,0,0,0-5-5H20a5,5,0,0,0-5,5V7H4V9H6.68V39a9,9,0,0,0,9,9H32.23a9,9,0,0,0,9-9V9H44ZM17,5a3,3,0,0,1,3-3h8a3,3,0,0,1,3,3V7H17ZM39.23,39a7,7,0,0,1-7,7H15.68a7,7,0,0,1-7-7V9H39.23Z" transform="translate(0, 48)" fill="#5CBCE1"/>

[Thomas Greiner, 2017/11/03 19:04:10]

Suggestion: You can avoid duplicating the "transform" attribute for each
element, you can group all them inside a `<g>` element and add it to this one
instead.

[saroyanm, 2017/11/03 19:18:16]

Interesting approach, will test and update accordingly.

[saroyanm, 2017/11/03 19:35:09]

Done.

+</svg>