[webkit-dev] webkit-resource: referring to resources in User Agent stylesheet

[Dimitri Glazkov]

Hello,

SUMMARY: we would like to introduce a "webkit-resource" URL scheme for
CSS, which would refer to images baked into WebKit.

BACKGROUND: in order to style media controls today, we rely on the
ControlPart enum
(http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/platform/ThemeTypes.h&l=48&exact_package=chromium),
which is exposed as the  -webkit-appearance CSS attribute. For
example:

video::-webkit-media-controls-play-button {
  -webkit-appearance: media-play-button;
}

In addition, the state of the button is further adjusted by looking at
the runtime state or media characteristics of the element (is the user
currently hovering or clicking on the element? is it playing? is it
streaming? has an error occurred?). This happens at the port layer, in
RenderTheme implementation.

With impending introduction of media element pseudo-classes and the
patch in bug 58342 landing, we will be able to sense these extra
states at the CSS level:

video:playing::-webkit-media-controls-play-button:hover {
  -webkit-appearance: media-play-button-playing-hover;
}

This would result in a lot less of mindless style-flipping
RenderTheme/MediaControlElement code and provide more flexibility for
each port to design their pretty things.

However, sticking with existing -webkit-appearance strategy will
result in ControlPart enum exploding as combinatorial math suggests.
Which is a ...

PROBLEM: We need a way to somehow in CSS associate an element state
with a relatively arbitrary key to avoid ControlPart from becoming the
tallest enum ever.

SOLUTION: Looking at the current media controls implementations, most
of the -webkit-appearance states are kind of like background images,
each reflecting appearance of an element at a particular state. Thus,
it seems we should be able to solve this by just using CSS
backgrounds:

video:playing::-webkit-media-controls-play-button:hover {
   background: url(/media-controls/play-button-hover.png);
}

That is how the authors would style the media controls. However, at
the UA level, we shouldn't probably be loading resources from random
sites. Instead, we need a way to bake these images into the WebKit
runtime, and then a way to refer to them from the stylesheet.

This is where a vendor-specific URL scheme comes in:

video:playing::-webkit-media-controls-play-button:hover {
   background: url(webkit-resource:/media-controls/play-button-hover.png);
}

A quick poll of smart people (abarth and smfr) seems to indicate it's
not a completely horrid idea.

WDYT? Thoughts? Comments?

:DG<