Bug 33478 – Web Inspector shouldn't show a white color box for "-webkit-line-break: after-white-space"

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector (Deprecated)

[Alexey Proskuryakov]

Created attachment 46290 [details]
screenshot

And if I click on that white box, I get values like "after-hsl(0, 100%, 100%)-space;"!

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

Created attachment 48613 [details]
[TEST CASE] Element With Offending Style

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

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.

[Joseph Pecoraro]

Landed in http://trac.webkit.org/changeset/55357
Committed r55357
	M	WebCore/ChangeLog
	M	WebCore/inspector/front-end/StylesSidebarPane.js
r55357 = c977cf7ac5a4d5339a7e3ae93d290b350a8c4064 (trunk)