Replace iPod-looking icon with the awesomely recognizable phone/tablet icon designed by Yash Johar. Steps: - Build and run the Firefox code https://docs.firefox-dev.tools/getting-started/build.html - Download attached svg file - clean up the svg code and add a license as explained in https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/SVG_Guidelines - Add svg file and submit a patch for review
Assignee: nobody → yash.johar1992
Status: NEW → ASSIGNED
Hi Yash! We looked at your commit and it looks good, except I just realized I should have re-saved this in Adobe Illustrator which makes it half as many bytes. Looks like this: <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>Artboard 1</title><path d="M4,5H5.09V1h9.82V15H4A1.23,1.23,0,0,0,5.2,16h9.6A1.27,1.27,0,0,0,16,14.67V1.33A1.27,1.27,0,0,0,14.8,0H5.2A1.27,1.27,0,0,0,4,1.33Z"/><path d="M2,4H7A1,1,0,0,1,8,5V15a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V5A1,1,0,0,1,2,4ZM2,6v8H7V6Z"/></svg> I attached the new SVG file I made to this bug. If you could amend your commit with this new file, that would be great. Sorry for the extra step!
Attachment #9002949 - Attachment is obsolete: true
I've amended the comment with the new attachment. Thanks Victoria!
Hey Yash, we can almost go ahead with removing the id and data-name attributes, and <title> since they are not necessary.
Hi Gabriel, thanks for pointing that out. Unnecessary tags and attributes have been removed.
Sorry for the delay on the review, I know Victoria is still playing around with making the icon look more like our photon styled buttons by playing around with the line widths.
Yes, sorry to send this back into design-mode! We can continue the discussion here: https://github.com/devtools-html/ux/issues/18
Thanks Yash, attached is the compressed version from Illustrator. Also, inspired by this work, Gabe and I started discussing with the rest of the DevTools team about this requirement of adding of the MPL license to SVGs - it seemed a shame to add so many bytes when the SVGs are so carefully cleaned up otherwise. I think we can go ahead and not include the license for this, as many other icons in Firefox haven't added it anyway.
A good tool for optimizing SVGs is https://jakearchibald.github.io/svgomg/ (For 16px icons, a precision of 2 decimals is enough.) Icons should have `fill="context-fill #0b0b0b" on the root element. The final SVG code might look like this: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b"> <path d="…"/> </svg>
Thanks Florens. The SVG code now looks like: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b"> <path d="…"/> </svg>
Pushed by email@example.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/498b35c45ec1 Replace current RDM icon with phone/tablet icon; r=gl
Comment on attachment 9003271 [details] Bug 1485185: Replace current RDM icon with phone/tablet icon; r=gl Gabriel [:gl] (ΦωΦ) has approved the revision.
Attachment #9003271 - Flags: review+
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
status-firefox63: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.