Created attachment 46290 [details] screenshot And if I click on that white box, I get values like "after-hsl(0, 100%, 100%)-space;"!
Created attachment 48612 [details] [PATCH] Smarter Regex These two lines from StylesSidebarPane are where the action is: > var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b)/g; > var colorProcessor = processValue.bind(window, colorRegex, processColor, null); The colorRegex's "\b\w+\b" breaks down "after-white-space" and pulls out the "white" in the middle. My simple solution was to throw a negative lookahead at the end of this section ensuring there isn't a "-" after this text. But I want to field you guys for some other possible edge cases, or solutions. My simple patch is attached.
Created attachment 48613 [details] [TEST CASE] Element With Offending Style
Created attachment 48708 [details] [PATCH] Proposed Fix I looked into cases of what could appear after a color in a valid value: - '$' for cases like "color: red;" where the value is "red" - ')' for cases like -webkit-gradiant's "from(red)", "to", and "color-stop" These can be put into a positive lookahead at the end of the regex. Timothy Hatcher mentioned whitespace and a comma, which I think are acceptable to add in even though I can't think of cases for them yet. This lookahead assertion can be used for all cases of colors, but is only practically useful for the \b\w+\b word section, so the patch only uses it there.
Note that this wouldn't handle a value like: "x-white", but no such case exists yet. The only existing tricky cases: "skip-white-space", "after-white-space", and "white-space" are handled.
Landed in http://trac.webkit.org/changeset/55357 Committed r55357 M WebCore/ChangeLog M WebCore/inspector/front-end/StylesSidebarPane.js r55357 = c977cf7ac5a4d5339a7e3ae93d290b350a8c4064 (trunk)