zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-10 21:54:47 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
779b46bac3bb2ca8aa997d683183eded1971fadc
react-native-devtools-frontend/front_end/Images
T
History
Michael Liao 4f62c670fe [Icon]: Change dropdown arrow to svg and add dark theme dropdown arrow 
Issue:
- chrome-select inputs have slightly blurry dropdown arrow
- chrome-select inputs in dark theme have a hard to see dropdown arrow due to contrast

Changes:
- changing dropdown arrow icons to .svg
- adding dark theme dropdown arrow

Pictures:

Before - Settings in Dark Theme: https://imgur.com/NePBXu6
After - Settings in Dark Theme: https://imgur.com/aGjk7UM

Before - Settings in Light Theme: https://imgur.com/78VAoee
After - Settings in Light Theme: https://imgur.com/kLCyEqM

Bug: 1164031
Change-Id: I2d7c10788692cf973e24a23f4c22b12e22a26919
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2616383
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
2021-01-11 19:03:56 +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.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
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