mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-19 13:04:39 +08:00
Use trash bin icon for removing header overrides and adapt white space. (DevTools already has 2 other trash bin icons, one is coloured solidly and the other is used in the recorder panel. This CL adds a third one, taken from Material UI icons. We plan to consolidate all icons soon, but this is out of scope for this CL) Screenshots: https://i.imgur.com/vULR947.png https://i.imgur.com/oJ1h2ld.png Bug: 1297533 Change-Id: I48bc336e4407800398129034c7bbe3f5a602d09d Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3999736 Auto-Submit: Wolfgang Beyer <wolfi@chromium.org> Reviewed-by: Danil Somsikov <dsv@chromium.org> Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Adding new icons:
-
Out of a spritesheet (if you have a separately saved icon already go to 2.):
- Open a spritesheet with the icon of interest, like
largeIcons.svgin Inkscape. - Make sure it's the
src/version of the spritesheet. - Copy-paste the icon to a new page. Make sure it preserved its original size and aspect ratio, and isn't otherwise altered.
- To make sure step (3) below doesn't destroy the icon, it might be necessary to resize it. Just select everything and use the elements in the top toolbar to resize the icon (make sure the aspect ratio is preserved).
- Set the size of the page to match the icon. You may use Inkscape's Edit>Resize Page to Selection command to accomplish this.
- If you chose to include padding in the icon, make sure the icon is centered within the page.
- Save the icon with
_icon.svgsuffix. For instancelist_icon.svg.
- Open a spritesheet with the icon of interest, like
-
Add respective entries to
.gnifiles.- Update the
devtols_image_fileslist inconfig/gni/devtools_image_files.gni. - Update the
grd_files_release_sourceslist inconfig/gni/devtools_grd_files.gni.
- Update the
-
Use Icon component in the DevTools front-end:
- Visit https://docs.google.com/document/d/1EA--IokG6YW51y7unS8dIKUx6EtyjETT0uglmvIpfsg/edit#heading=h.xgjl2srtytjt for more information on that.