1485185 - Replace current RDM icon with updated icon

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[Victoria Wang [:victoria]]

Attachment: rdmicon.svg

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

Comment 1

[Yash Johar]

Attachment: Bug 1485185: Replace current RDM icon with phone/tablet icon; r=gl

Comment 2

[Victoria Wang [:victoria]]

Attachment: rdm.svg

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!

Comment 3

[Yash Johar]

I've amended the comment with the new attachment. Thanks Victoria!

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

Hey Yash, we can almost go ahead with removing the id and data-name attributes, and <title> since they are not necessary.

Comment 5

[Yash Johar]

Hi Gabriel, thanks for pointing that out. Unnecessary tags and attributes have been removed.

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

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.

Comment 7

[Victoria Wang [:victoria]]

Yes, sorry to send this back into design-mode! We can continue the discussion here: https://github.com/devtools-html/ux/issues/18

Comment 8

[Yash Johar]

Attachment: icon with negative spacing

Comment 9

[Victoria Wang [:victoria]]

Attachment: rdm3.svg

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.

Comment 10

[Florens Verschelde :fvsch]

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>

Comment 11

[Yash Johar]

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>

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/498b35c45ec1
Replace current RDM icon with phone/tablet icon; r=gl

Comment 13

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 9003271 [details]
Bug 1485185: Replace current RDM icon with phone/tablet icon; r=gl

Gabriel [:gl] (ΦωΦ) has approved the revision.

Comment 14

[Raul Gurzau (:RaulG)]

https://hg.mozilla.org/mozilla-central/rev/498b35c45ec1