zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-01 09:47:56 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
fde72bcc0ef2b2392c952e64f0708aaccfdfd708
react-native-devtools-frontend/front_end/Images
T
History
chait pinnamaneni 750a2d1627 Adds fields for client hints form in Device settings and added the same form in network conditions panel 
Improves UX for adding client hints in device settings screen. Instead of adding semi-colon separated value for brands, users will be able to input in different fields. Also added the same form to network conditions panel, so users can easily change client hints from network conditions. In network conditions, user agent client hints gets automatically updated when user changes device from dropdown.

Device settings:
Before: https://i.imgur.com/sn3E1dV.png
After: https://i.imgur.com/rBMNjQt.png

Network conditions panel:
https://i.imgur.com/Sk9k3Bb.png

Bug:1215598
Change-Id: Ie9f75456c67e30bb133675bef756a828fa117719
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2933920
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Brandon Walderman <brwalder@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Maksim Orlovich <morlovich@chromium.org>
Commit-Queue: Chait Pinnamaneni <cpinnamaneni@microsoft.com>
2021-06-16 18:26:58 +00:00
..
src
Adds fields for client hints form in Device settings and added the same form in network conditions panel
2021-06-16 18:26:58 +00:00
accelerometer-bottom.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +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
Rename to devtools_svg_sources
2021-06-14 12:12:34 +00:00
checker.png
Losslessly optimize PNG image assets
2019-12-12 12:23:13 +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
cssoverview_icons_2x.avif
Use AVIF for CSS Overview icons
2020-12-28 11:08:20 +00:00
generate-css-vars.js
Dynamically optimize svgs
2021-06-10 10:09:30 +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.avif
Reland "Use AVIF for Node.js icon"
2020-12-28 11:44:20 +00:00
OWNERS
Move owners files into config/owners
2021-04-08 12:25:52 +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
Dynamically optimize svgs
2021-06-10 10:09:30 +00:00
resourcesTimeGraphIcon.avif
Use AVIF for resourcesTimeGraphIcon
2020-12-31 10:38:35 +00:00
rollup.config.js
Dynamically optimize svgs
2021-06-10 10:09:30 +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
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
whatsnew.avif
What's New in DevTools 92
2021-05-20 09:44:05 +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 config/gni/devtools_image_files.gni.
    • Update the grd_files_release_sources list in config/gni/devtools_grd_files.gni.

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

Reference in New Issue View Git Blame Copy Permalink