Bug 143433 - Web Inspector: wrap style class names in WebInspector.StyleClass helper
Summary: Web Inspector: wrap style class names in WebInspector.StyleClass helper
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-04-05 18:16 PDT by Brian Burg
Modified: 2016-12-13 15:38 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Brian Burg 2015-04-05 18:16:05 PDT
Since we are moving away from long-winded style properties on view constructors, here's an idea. Given the two following approaches:

this.element.classList.add("inline-object-foo")

this.element.classList.add(WebInspector.StyleClass("inline-object-foo"))

The latter supports tooling to check for bogus style names.

* This could be done mostly at compile-time by cross-checking against identifiers in CSS files.
* Alternatively, in engineering builds we could collate a "style class whitelist" similar to localizedStrings.js. At runtime we do a lookup into the whitelist and log an error if a bogus style class is used. In production builds, use sed to remove the unnecessary lookup.

Thoughts?
Comment 1 Radar WebKit Bug Importer 2015-04-05 18:16:32 PDT
<rdar://problem/20429964>
Comment 2 Timothy Hatcher 2015-04-06 06:02:11 PDT
I wonder if we could just runtime replace this.element.classList.add, remove, etc. to do the check?
Comment 3 Brian Burg 2015-04-06 08:21:20 PDT
(In reply to comment #2)
> I wonder if we could just runtime replace this.element.classList.add,
> remove, etc. to do the check?

Maybe. A benefit of the proposed style which I didn't list: it makes it possible to trivially grep for all style strings in your favorite text editor.

It is definitely kind of wordy. I think once ES6 modules land, we can debate whether and how to shorten WebInspector.Everything.