Reland "Improve Console display of strings"

This is a reland of crrev.com/c/2959898 which caused the roll to fail.
This has been fixed by updating expectations in `front_end/Tests.js`

Original change's description:
> Improve Console display of strings
>
> We recently changed how we display the output to ensure that we always
> display valid JavaScript literals. Unfortunately, the current solution
> can be confusing to users, who might feel that the amount of escaping is
> excessive and makes the output unreadable.
>
> This change introduces `formatAsJSLiteral` that given a string escapes
> appropriate special characters and wraps the string in either single
> quotes, double quotes, or back ticks depending on the string content.
> The function furthermore escapes script tags to ensure that the result
> can be safely copied to HTML.
>
> Both regular Console output and preview have been updated to use this
> formatter instead of JSON.stringify for displaying strings.
>
> This change adds unit tests for the new formatter and rebaselines all
> e2e tests that depend on Console outputs.
>
> Doc: https://goo.gle/devtools-strings
> Bug: 1208389
> Change-Id: Iebfe39c2e40c21aa5a813a1ebd26a5109fa59ab6
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2959898
> Commit-Queue: Johan Bay <[email protected]>
> Reviewed-by: Mathias Bynens <[email protected]>
> Reviewed-by: Changhao Han <[email protected]>

Bug: 1208389
Change-Id: I6f443e65364d9707d02aeaab0227bd691300b417
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2978351
Reviewed-by: Alex Rudenko <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
Commit-Queue: Johan Bay <[email protected]>
9 files changed
tree: a2a6a8b7f2295644f723278b76fca97bb18b775d
  1. .vscode/
  2. build_overrides/
  3. config/
  4. docs/
  5. front_end/
  6. inspector_overlay/
  7. node_modules/
  8. scripts/
  9. test/
  10. third_party/
  11. v8/
  12. .clang-format
  13. .editorconfig
  14. .eslintignore
  15. .eslintrc.js
  16. .gitattributes
  17. .gitignore
  18. .gn
  19. .mailmap
  20. .npmignore
  21. .npmrc
  22. .style.yapf
  23. .stylelintignore
  24. .stylelintrc.json
  25. ARCHITECTURE.md
  26. AUTHORS
  27. BUILD.gn
  28. DEPS
  29. LICENSE
  30. OWNERS
  31. package-lock.json
  32. package.json
  33. PRESUBMIT.py
  34. README.md
  35. tsconfig.json
  36. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

Source code

The frontend is available on chromium.googlesource.com.

Design guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found in docs/triage_guidelines.md.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.

Additional references

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES modules, so consuming this package in other tools may require some effort.

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

Getting in touch