UI: CSS/Layout fixes on the recording page

1) Layout issues when ticking any chrome toggle:
  The problem here is that when any Chrome option is
  enabled, the corresponding config snippet contains a
  very long line without any space, that causes the
  instructions page to have a very large width. By doing
  do it screws up the grid layout:
  https://screenshot.googleplex.com/9xpAEKY1PrB
  https://screenshot.googleplex.com/afsiC5k6V9c
  Solution: use pre-wrap + break-word.

2) Layout issues in the select box:
  A very subtle width:auto in the multi-select elements
  was causing the whole record-container grid layout to
  not respect its proportions.
  Before: https://screenshot.googleplex.com/2CGTOZJSDHf
  After: https://screenshot.googleplex.com/q4QvgxzRtj9

Test: manual
Change-Id: I18ab54e4b86940aca916a22fb169e051709355da
3 files changed
tree: 05c10a0d11c1f2b91cbe4c3387ef1041b30850f5
  1. bazel/
  2. build_overrides/
  3. buildtools/
  4. debian/
  5. docs/
  6. gn/
  7. include/
  8. infra/
  9. protos/
  10. src/
  11. test/
  12. tools/
  13. ui/
  14. .clang-format
  15. .gitignore
  16. .gn
  17. .style.yapf
  18. Android.bp
  19. Android.bp.extras
  20. BUILD
  21. BUILD.extras
  22. BUILD.gn
  23. codereview.settings
  24. heapprofd.rc
  25. LICENSE
  26. MODULE_LICENSE_APACHE2
  27. NOTICE
  28. OWNERS
  29. perfetto.rc
  30. PRESUBMIT.py
  31. README.chromium
  32. README.md
  33. TEST_MAPPING
  34. WORKSPACE
README.md

Perfetto - Performance instrumentation and tracing

Perfetto is an open-source project for performance instrumentation and tracing of Linux/Android/Chrome platforms and user-space apps.

See www.perfetto.dev for docs.

Contributing

See /docs/contributing.md for instructions.

The source-of-truth repo is Android's Gerrit. The GitHub repo is a read-only mirror.

Bugs

  • For bugs affecting Android or the tracing internals use the internal bug tracker (go/perfetto-bugs).
  • For bugs affecting Chrome use http://crbug.com, Component:Speed>Tracing label:Perfetto.

Community

You can reach us on our Discord channel. If you prefer using IRC we have an experimental Discord <> IRC bridge synced with #perfetto-dev on Freenode.