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
bfa40d4e91ced7805cd4f74201b7624764fa9aba
react-native-devtools-frontend/front_end/Images
T
History
Peter Müller 661b3a4411 Device preview: replace PNG icons with SVGs 
Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1099211

To improve color contrast of the drag handles and to reduce file size some PNG icons are replaced by SVG files.

Before: https://imgur.com/a/23KY36e

After: https://imgur.com/a/RvK3mHe
Change-Id: Iad71e4081ebe2ba2151dc6a0b2d0e1a8e00ac449
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2375194
Commit-Queue: Peter Müller <petermueller@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-08-26 17:51:53 +00:00
..
src
Add feedback icon
2020-08-26 12:00:52 +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
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.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
chromeMiddle.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +00:00
chromeRight.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +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.png
[CSS Overview] Adds icons to headings
2019-11-07 12:22:05 +00:00
errorWave.svg
DevTools: SVG Icons
2019-06-10 23:19:12 +00:00
ic_info_black_18dp.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +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_warning_black_18dp.svg
Losslessly optimize SVG image assets
2019-12-13 09:47:48 +00:00
largeIcons.svg
Styling for 'deactivate breakpoints'-button
2020-06-26 06:28:55 +00:00
lighthouse_logo.svg
Reland "[Lighthouse] Rename Audits panel to Lighthouse"
2020-02-18 01:56:25 +00:00
mediumIcons.svg
Add feedback icon
2020-08-26 12:00:52 +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
nodeIcon.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +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
DevTools: SVG Icons
2019-06-10 23:19:12 +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.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +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
smallIcons.svg
[issues] Make all issue icons flat (3 icons in total)
2020-05-08 12:46:02 +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
whatsnew.png
Update What's New UI for Chrome 85
2020-06-24 11:27:29 +00:00

readme.md

Adding new icons

  1. Use Inkscape 0.92 or newer.
  2. Choose an existing spritesheet, like largeIcons.svg to add the icon to.
  • Make sure to edit the src/ version of the svg!
  1. Open that file with Inkscape and import the new SVG into the document
  2. Place in an open spot, and use guides to scale the icon to a good size, relative to other icons
  3. Any straight lines should be snapped to the closest pixel value.
    • Use the Edit paths by nodes tool (F2) to edit the path directly.
    • Tweak the X, Y values at the top to be integers.
  4. Optimize SVGs:
  • ./scripts/optimize_svg_images.py
  1. In ui/Icon.js add an entry in UI.Icon.Descriptors.
    • Look at the spritesheet's axes to identify the correct grid position.
  2. You may want to regenerate devtools resources:
    • ninja -C ~/chromium/src/out/Release/ devtools_frontend_resources
Reference in New Issue View Git Blame Copy Permalink