Support adding CSS class names with special characters
Support adding CSS class names with special characters

HTML `class` and `id` attributes have very few restrictions placed on
their values [1]. For example, the following HTML is perfectly valid:

    <div class="lol.wat[foo=bar]:focus"></div>

In order to use this class name in a CSS selector, you’d have to
escape the special characters [2]:

    .lol\.wat\[foo\=bar\]\:focus {
      background: hotpink;
    }

Prior to this patch, the “add a class” functionality in DevTools got
confused when documents contain such special class names. This patch
handles these edge cases properly. Multiple class names can still be
added by entering `foo, bar` in the input.

[1]: https://mathiasbynens.be/notes/html5-id-class
[2]: https://mathiasbynens.be/notes/css-escapes

Video: https://www.youtube.com/watch?v=bzB8yemm6eA

Fixed: chromium:1051064
Change-Id: Id1202919eb1c11712a610fd6a83b802a0bcaa437
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2156357
Reviewed-by: Changhao Han <68542faf32f0a558a873c0f094ca9bedb2744bff@chromium.org>
Commit-Queue: Mathias Bynens <17a2cbc4e33156874a9862b0f530521117e66a3d@chromium.org>

ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend,ChromeDevTools/devtools-frontend