zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-08 12:53:45 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
fdf2a0cecd0116bc13e2c838b485e59cd6bfbc46
react-native-devtools-frontend/front_end/Images
T
History
Alex Rudenko 3d1724d16d Add flex-wrap icons 
The icons rotate depending on flex-direction to indicate how
the wraping would work.

Bug: chromium:1175699
Change-Id: I0cbb32c6d810ac82ad3afc85209e38d857fab3b9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2678694
Reviewed-by: Jan Scheffler <janscheffler@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
2021-02-09 11:10:01 +00:00
..
src
Add flex-wrap icons
2021-02-09 11:10:01 +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.svg
[Icon]: Change dropdown arrow to svg and add dark theme dropdown arrow
2021-01-11 19:03:56 +00:00
chromeSelectDark.svg
[Icon]: Change dropdown arrow to svg and add dark theme dropdown arrow
2021-01-11 19:03:56 +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
flex-nowrap-icon.svg
Add flex-wrap icons
2021-02-09 11:10:01 +00:00
flex-wrap-icon.svg
Add flex-wrap icons
2021-02-09 11:10:01 +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_memory_16x16.svg
[lmi] Add memory icon to Scope and Console preview.
2021-02-04 10:16:07 +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
issue-text-icon.svg
Extract issue text icon to svg file
2021-01-18 10:55:33 +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
sources_panel_icon.svg
Add sources_panel_icon
2021-01-19 08:04:06 +00:00
speech.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
switcherIcon.svg
[Switcher Icon]: Using ui/components/Icon to render switcher icon
2021-01-29 17:43:38 +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
Update What's New UI for Chrome 89
2021-01-14 07:57:26 +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