zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-11 06:04:55 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
d00a5cd124486ded0b170a095ce01ff7657022d2
react-native-devtools-frontend/front_end/Images
T
History
Mathias Bynens e7211eeec6 Use AVIF for resourcesTimeGraphIcon 
This saves 103 bytes:

    $ wc -c front_end/Images/resourcesTimeGraphIcon.*
        1291 front_end/Images/resourcesTimeGraphIcon.avif
        1394 front_end/Images/resourcesTimeGraphIcon.png

Bug: chromium:1161667
Change-Id: Ifcecfaa4498fc5e7a50f29a7d04f13647c8238eb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2606334
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
2020-12-31 10:38:35 +00:00
..
src
Refactor UISourceCodeFrame to use Icon component
2020-11-30 11:01:58 +00:00
accelerometer-back.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +00:00
accelerometer-bottom.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
accelerometer-front.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +00:00
accelerometer-left.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
accelerometer-right.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
accelerometer-top.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
baseline-icon.svg
Add baseline icons for flexbox properties in the Styles panel
2020-11-03 11:09:26 +00:00
breaking_change_icon.svg
Icon component
2020-10-14 15:04:42 +00:00
BUILD.gn
Move copy_inspector_images to Images/
2020-07-16 10:18:25 +00:00
checkboxCheckmark.svg
DevTools: SVG Icons
2019-06-10 23:19:12 +00:00
checker.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
chevrons.svg
DevTools: SVG Icons
2019-06-10 23:19:12 +00:00
chromeDisabledSelect_2x.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
chromeDisabledSelect.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
chromeLeft.avif
Optimize Layer panel browser chrome images
2020-12-28 07:00:20 +00:00
chromeMiddle.avif
Optimize Layer panel browser chrome images
2020-12-28 07:00:20 +00:00
chromeRight.avif
Optimize Layer panel browser chrome images
2020-12-28 07:00:20 +00:00
chromeSelect_2x.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
chromeSelect.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
cssoverview_icons_2x.avif
Use AVIF for CSS Overview icons
2020-12-28 11:08:20 +00:00
dropdown_7x6_icon.svg
Add value interpreter to linear memory inspector
2020-11-03 10:11:16 +00:00
elements_panel_icon.svg
Replace icons in the issues tab with the new Icon component
2020-10-15 08:25:03 +00:00
error_icon.svg
Refactor UISourceCodeFrame to use Icon component
2020-11-30 11:01:58 +00:00
errorWave.svg
DevTools: SVG Icons
2019-06-10 23:19:12 +00:00
feedback_thin_16x16_icon.svg
Add thin feedback icon
2020-11-04 10:16:07 +00:00
flex-align-content-center-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-content-end-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-content-space-around-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-content-space-between-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-content-space-evenly-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-content-start-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-content-stretch-icon.svg
Add align-content icons to the styles panel
2020-10-30 07:35:05 +00:00
flex-align-items-center-icon.svg
Add align-items: center icon
2020-11-09 09:51:16 +00:00
flex-align-items-flex-end-icon.svg
Add align-items icons to the styles panel
2020-11-02 16:38:00 +00:00
flex-align-items-flex-start-icon.svg
Add align-items icons to the styles panel
2020-11-02 16:38:00 +00:00
flex-align-items-stretch-icon.svg
Add align-items icons to the styles panel
2020-11-02 16:38:00 +00:00
flex-align-self-center-icon.svg
Add align-self icons to the Styles panel
2020-11-04 14:06:38 +00:00
flex-align-self-flex-end-icon.svg
Add align-self icons to the Styles panel
2020-11-04 14:06:38 +00:00
flex-align-self-flex-start-icon.svg
Add align-self icons to the Styles panel
2020-11-04 14:06:38 +00:00
flex-align-self-stretch-icon.svg
Add align-self icons to the Styles panel
2020-11-04 14:06:38 +00:00
flex-direction-icon.svg
Show icons explaining flexbox-direction:row in Styles panel
2020-10-23 13:34:31 +00:00
flex-justify-content-center-icon.svg
Add justify-content icons to the styles panel
2020-11-02 15:33:00 +00:00
flex-justify-content-flex-end-icon.svg
Add justify-content icons to the styles panel
2020-11-02 15:33:00 +00:00
flex-justify-content-flex-start-icon.svg
Add justify-content icons to the styles panel
2020-11-02 15:33:00 +00:00
flex-justify-content-space-around-icon.svg
Add justify-content icons to the styles panel
2020-11-02 15:33:00 +00:00
flex-justify-content-space-between-icon.svg
Add justify-content icons to the styles panel
2020-11-02 15:33:00 +00:00
flex-justify-content-space-evenly-icon.svg
Add justify-content icons to the styles panel
2020-11-02 15:33:00 +00:00
ic_checkmark_16x16.svg
Report Trust Token operation result in network panel
2020-12-16 12:51:14 +00:00
ic_delete_filter.svg
[Cookies] Only delete visible cookies
2020-11-13 09:33:42 +00:00
ic_delete_list.svg
[Cookies] Only delete visible cookies
2020-11-13 09:33:42 +00:00
ic_info_black_18dp.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +00:00
ic_page_next_16x16_icon.svg
Adding linear memory inspector navigator component
2020-10-20 13:41:04 +00:00
ic_page_prev_16x16_icon.svg
Adding linear memory inspector navigator component
2020-10-20 13:41:04 +00:00
ic_redo_16x16_icon.svg
Adding linear memory inspector navigator component
2020-10-20 13:41:04 +00:00
ic_show_node_16x16.svg
Add a button to reveal the element to the Layout pane
2020-08-18 07:10:18 +00:00
ic_suggest_color.svg
Reland: suggest accessible color
2020-08-19 08:09:47 +00:00
ic_undo_16x16_icon.svg
Adding linear memory inspector navigator component
2020-10-20 13:41:04 +00:00
ic_warning_black_18dp.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +00:00
largeIcons.svg
[Font Editor Prototype]: Implements Experimental Typography CSS Editor in Styles Pane
2020-12-01 19:54:05 +00:00
lighthouse_logo.svg
Reland "[Lighthouse] Rename Audits panel to Lighthouse"
2020-02-18 01:56:25 +00:00
link_icon.svg
Replace icons in the issues tab with the new Icon component
2020-10-15 08:25:03 +00:00
mediumIcons.svg
Update Images readme and add comments to the spritesheets.
2020-10-15 11:04:33 +00:00
navigationControls_2x.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
navigationControls.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
network_panel_icon.svg
Replace icons in the issues tab with the new Icon component
2020-10-15 08:25:03 +00:00
node_search_icon.svg
Icon component
2020-10-14 15:04:42 +00:00
nodeIcon.avif
Reland "Use AVIF for Node.js icon"
2020-12-28 11:44:20 +00:00
OWNERS
Seed some owners in front_end
2020-05-18 15:59:12 +00:00
popoverArrows.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
profileGroupIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
profileIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
profileSmallIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
radioDot-dark-theme.png
Improve radio button styles for dark theme
2019-12-12 09:20:57 +00:00
radioDot.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
readme.md
Update readme in front_end/Images
2020-12-07 10:19:20 +00:00
refresh_12x12_icon.svg
Adding linear memory inspector navigator component
2020-10-20 13:41:04 +00:00
resizeDiagonal.svg
Device preview: replace PNG icons with SVGs
2020-08-26 17:51:53 +00:00
resizeHorizontal.svg
Device preview: replace PNG icons with SVGs
2020-08-26 17:51:53 +00:00
resizeVertical.svg
Device preview: replace PNG icons with SVGs
2020-08-26 17:51:53 +00:00
resourceCSSIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
resourceDocumentIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
resourceDocumentIconSmall.png
The Great Blink mv for source files, part 2.
2018-04-07 15:32:37 +00:00
resourceJSIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
resourcePlainIcon.png
The Great Blink mv for source files, part 2.
2018-04-07 15:32:37 +00:00
resourcePlainIconSmall.png
The Great Blink mv for source files, part 2.
2018-04-07 15:32:37 +00:00
resourcesTimeGraphIcon.avif
Use AVIF for resourcesTimeGraphIcon
2020-12-31 10:38:35 +00:00
searchNext.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
searchPrev.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
securityIcons.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +00:00
settings_14x14_icon.svg
Add value interpreter to linear memory inspector
2020-11-03 10:11:16 +00:00
smallIcons.svg
Update Images readme and add comments to the spritesheets.
2020-10-15 11:04:33 +00:00
speech.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
toolbarResizerVertical.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
touchCursor_2x.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
touchCursor.png
The Great Blink mv for source files, part 2.
2018-04-07 15:32:37 +00:00
treeoutlineTriangles.svg
DevTools: SVG Icons
2019-06-10 23:19:12 +00:00
warning_icon.svg
Refactor UISourceCodeFrame to use Icon component
2020-11-30 11:01:58 +00:00
whatsnew.avif
Use AVIF for “what’s new” image
2020-12-24 09:32:45 +00:00

readme.md

Adding new icons:

  1. 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.svg in 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.svg suffix. For instance list_icon.svg.

  2. Add respective entries to .gni files.

    • Update the devtols_image_files list in devtools_image_files.gni.
    • Update the grd_files_release_sources list in devtools_grd_files.gni.

  3. Optimize:

    • ./scripts/optimize_svg_images.py.
    • This script produces, for example, Images/list_icon.svg from Images/src/list_icon.svg by rounding numbers and removing hopefully unnecessary content. However, it might end up distorting/destroying the icon, especially if it is too small. Make sure to open the output of the optimiztion process (e.g. Images/list_icon.svg) in Inkscape and inspect it for damage. Enlarging the input image, as desribed in step (1) usually circumvents this.

  4. Use Icon component in the DevTools front-end:

Reference in New Issue View Git Blame Copy Permalink