Replace current RDM icon with updated icon

RESOLVED FIXED in Firefox 63

Status

P3
normal
RESOLVED FIXED
7 months ago
6 months ago

People

(Reporter: victoria, Assigned: yash.johar1992, Mentored)

Tracking

63 Branch
Firefox 63

Firefox Tracking Flags

(firefox63 fixed)

Details

Attachments

(2 attachments, 3 obsolete attachments)

(Reporter)

Description

7 months ago
Posted image rdmicon.svg (obsolete) —
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
(Reporter)

Updated

7 months ago
Assignee: nobody → yash.johar1992
Status: NEW → ASSIGNED
Component: General → Responsive Design Mode
Priority: -- → P3
(Reporter)

Comment 2

7 months ago
Posted image rdm.svg (obsolete) —
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
Flags: needinfo?(yash.johar1992)
(Assignee)

Comment 3

7 months ago
I've amended the comment with the new attachment. Thanks Victoria!
Flags: needinfo?(yash.johar1992)
Hey Yash, we can almost go ahead with removing the id and data-name attributes, and <title> since they are not necessary.
(Assignee)

Comment 5

7 months ago
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.
(Reporter)

Comment 7

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

Comment 8

7 months ago
Posted image icon with negative spacing (obsolete) —
(Reporter)

Comment 9

7 months ago
Posted image 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.
Attachment #9003276 - Attachment is obsolete: true
Attachment #9004902 - Attachment is obsolete: true
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>
(Assignee)

Comment 11

7 months ago
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

7 months ago
Pushed by gabriel.luong@gmail.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+

Comment 14

7 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/498b35c45ec1
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.