tree: abe225c0f36c563803bd049bda6a172b60e83579 [path history] [tgz]
  1. src/
  2. accelerometer-back.svg
  3. accelerometer-bottom.png
  4. accelerometer-front.svg
  5. accelerometer-left.png
  6. accelerometer-right.png
  7. accelerometer-top.png
  8. audits_logo.svg
  9. breakpoint.svg
  10. breakpointConditional.svg
  11. checkboxCheckmark.svg
  12. checker.png
  13. chevrons.svg
  14. chromeDisabledSelect.png
  15. chromeDisabledSelect_2x.png
  16. chromeLeft.png
  17. chromeMiddle.png
  18. chromeRight.png
  19. chromeSelect.png
  20. chromeSelect_2x.png
  21. cssoverview_icons_2x.png
  22. errorWave.svg
  23. ic_info_black_18dp.svg
  24. ic_warning_black_18dp.svg
  25. largeIcons.svg
  26. mediumIcons.svg
  27. navigationControls.png
  28. navigationControls_2x.png
  29. nodeIcon.png
  30. popoverArrows.png
  31. profileGroupIcon.png
  32. profileIcon.png
  33. profileSmallIcon.png
  34. radioDot.png
  35. readme.md
  36. resizeDiagonal.png
  37. resizeDiagonal_2x.png
  38. resizeHorizontal.png
  39. resizeHorizontal_2x.png
  40. resizeVertical.png
  41. resizeVertical_2x.png
  42. resourceCSSIcon.png
  43. resourceDocumentIcon.png
  44. resourceDocumentIconSmall.png
  45. resourceJSIcon.png
  46. resourcePlainIcon.png
  47. resourcePlainIconSmall.png
  48. resourcesTimeGraphIcon.png
  49. searchNext.png
  50. searchPrev.png
  51. securityIcons.svg
  52. smallIcons.svg
  53. speech.png
  54. toolbarResizerVertical.png
  55. touchCursor.png
  56. touchCursor_2x.png
  57. treeoutlineTriangles.svg
  58. whatsnew.png
src/third_party/devtools/front_end/Images/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