Closed
Bug 1485185
Opened 6 years ago
Closed 6 years ago
Replace current RDM icon with updated icon
Categories
(DevTools :: Responsive Design Mode, enhancement, P3)
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)
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•6 years ago
|
Assignee: nobody → yash.johar1992
Status: NEW → ASSIGNED
Updated•6 years ago
|
Component: General → Responsive Design Mode
Updated•6 years ago
|
Priority: -- → P3
Assignee | ||
Comment 1•6 years ago
|
||
Reporter | ||
Comment 2•6 years ago
|
||
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•6 years ago
|
||
I've amended the comment with the new attachment. Thanks Victoria!
Flags: needinfo?(yash.johar1992)
Comment 4•6 years ago
|
||
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•6 years ago
|
||
Hi Gabriel, thanks for pointing that out. Unnecessary tags and attributes have been removed.
Comment 6•6 years ago
|
||
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•6 years 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•6 years ago
|
||
Reporter | ||
Comment 9•6 years ago
|
||
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
Comment 10•6 years ago
|
||
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•6 years 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•6 years 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 13•6 years ago
|
||
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•6 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/498b35c45ec1
Status: ASSIGNED → RESOLVED
Closed: 6 years 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.
Description
•