Closed Bug 1485185 Opened 2 years ago Closed 2 years ago

Replace current RDM icon with updated icon

Categories

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

63 Branch
enhancement

Tracking

(firefox63 fixed)

RESOLVED FIXED
Firefox 63
Tracking Status
firefox63 --- fixed

People

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

Details

Attachments

(2 files, 3 obsolete files)

Attached 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
Assignee: nobody → yash.johar1992
Status: NEW → ASSIGNED
Component: General → Responsive Design Mode
Priority: -- → P3
Attached 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)
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.
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
Attached image icon with negative spacing (obsolete) —
Attached 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>
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 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+
https://hg.mozilla.org/mozilla-central/rev/498b35c45ec1
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
You need to log in before you can comment on or make changes to this bug.