OSDN Git Service

Add CSS cursor ring definitions
authorCary Clark <cary@android.com>
Wed, 28 Jul 2010 21:11:14 +0000 (17:11 -0400)
committerCary Clark <cary@android.com>
Fri, 30 Jul 2010 16:16:34 +0000 (12:16 -0400)
commit0ed6485271097ecf1b4cf4e790f9cfdbb57d921c
tree3b1c843d882ebb2883bd16c215753743e1ce7749
parenteaa543700296fbdd6583bd8dc68108e6a734d7d1
Add CSS cursor ring definitions

This allows web pages to have fine-grain control over the appearance
of the rings drawn around nodes.

Generated links (email, addresses, phone numbers) are no longer
given unique colors. To preserve this feature, a separate change
could add an HTML extension similar to vlink to provide the cursor
ring defintions for theses links. The mechanism implemented below
isn't appropriate since these links don't necessarily correspond to
single DOM nodes or other DOM elements.

------------
CSS examples
------------

The CSS to specify the ring looks like:

    -webkit-ring-fill-color:rgba(0,0,255,0.4);
    -webkit-ring-inner-width:2 px;
    -webkit-ring-outer-width:3.5 px;
    -webkit-ring-outset: 8 px;
    -webkit-ring-pressed-inner-color:rgba(0,0,255,0.8);
    -webkit-ring-pressed-outer-color:rgba(0,0,127,0.3);
    -webkit-ring-radius: 10 px;
    -webkit-ring-selected-inner-color:rgba(63,63,255,0.8);
    -webkit-ring-selected-outer-color:rgba(63,63,127,0.3);

and may be alternately defined with a property shortcut:

    -webkit-ring:rgba(255,0,0,0.4) 5px 7px
        rgba(255,0,0,0.8) rgba(127,0,0,0.3) 20px
        rgba(255,63,63,0.8) rgba(127,63,63,0.3);

--------------------
Property definitions
--------------------

A vertical cross-section of the ring corresponds to these
parameters as shown:
             ______
          R / ___O_            R = corner radius
           / / __I_   o        I = inner ring
          / / / _O_   ^        O = outer ring
         | | | / F    |        F = fill
         |O|I|O| L             o = outset
         | | | \_F_   |        L = original link
          \ \ \__O_   V
           \ \___I_   o
         R  \____O_

The fill color specifies what to draw inside the ring
when the link is followed. The fill area consists of the
original link area the outset.

The inner and outer widths specify the stoke width of the inner
and outer rings, respectively. The widths may be specified in
fractional pixels. The implementation captures 4 bits of the
fraction.

The outset specifies the distance from the edge of the original
link to the rings' center. Both rings are drawn at the same center
location.

The radius specifies the curvature of the corners at the center
of the rings.

-------------
Data lifetime
-------------

The selected colors specify the colors of the inner and outer
rings when the trackball or D-pad hovers over the link. The
pressed colors specify the colors of the rings when the
trackball center is pressed or the link is tapped.

The CSS data is recorded in the RenderStyle when the DOM
is parsed. The widths are scaled up by 16 to preserve the fraction.

When the nav cache is built, the CSS style information is
recorded in the CachedColor class. Only unique style sets
are recorded; many CachedNode instances can share the same
CachedColor instance.

When the cursor ring is drawn, the CachedColor is
retrieved by getting the index from the CachedNode, and
looking up the entry in the CachedFrame. The widths are
scaled down by 16 since Lengths are stored by the webkit as
integers.

----------
File Edits
----------

WebCore/Android.derived.mk
- Build the CSS data property tables by concatentating
  Android specific data and optionally SVG data.

WebCore/config.h
- Add switch for these rings. This switch is meant
  as a convenience for finding the code in WebKit
  that was added to enable this feature. Since the
  old code in DrawCursor has been removed, it does
  not revert to the old behavior if the switch is
  turned off.

WebCore/css/AndroidCSSPropertyNames.in
- The new ring properties, plus an old one we
  added before.

WebCore/css/CSSComputedStyleDeclaration.cpp
WebCore/css/CSSMutableStyleDeclaration.cpp
WebCore/css/CSSParser.cpp
WebCore/css/CSSStyleSelector.cpp
- I can guess what these functions are for as
  well as anyone, but I really don't know. Do
  I need all of them? Do I need to modify
  Mutable at all?

WebCore/css/CSSPropertyNames.in
- Moved Android addition to AndroidCSSPropertyNames.in

WebCore/platform/graphics/Color.h
- Added initial color values here.

WebCore/platform/graphics/android/android_graphics.*
- This draws the cursor ring. The code that draws
  'synthetic' links has been discarded.

WebCore/rendering/style/RenderStyle.h
- Functions to get, set, and initialize the style
  data.

WebCore/rendering/style/StyleRareInheritedData.*
- The storage for the style data and an equivalence
  function.

WebKit/Android.mk
- Added CachedColor to the build.

WebKit/android/nav/CacheBuilder.cpp
- Record the color from the DOM into the cache.

WebKit/android/nav/CachedColor.*
- Store the cached color info.

WebKit/android/nav/CachedFrame.*
- Where the array of colors is stored.

WebKit/android/nav/CachedNode.*
- Where the index to the colors is stored.

Change-Id: Ia3a931f41d6545e47678e245aafe7c84d4658f94
http://b/2603197
22 files changed:
WebCore/Android.derived.mk
WebCore/config.h
WebCore/css/AndroidCSSPropertyNames.in [new file with mode: 0644]
WebCore/css/CSSComputedStyleDeclaration.cpp
WebCore/css/CSSMutableStyleDeclaration.cpp
WebCore/css/CSSParser.cpp
WebCore/css/CSSPropertyNames.in
WebCore/css/CSSStyleSelector.cpp
WebCore/platform/graphics/Color.h
WebCore/platform/graphics/android/android_graphics.cpp
WebCore/platform/graphics/android/android_graphics.h
WebCore/rendering/style/RenderStyle.h
WebCore/rendering/style/StyleRareInheritedData.cpp
WebCore/rendering/style/StyleRareInheritedData.h
WebKit/Android.mk
WebKit/android/nav/CacheBuilder.cpp
WebKit/android/nav/CachedColor.cpp [new file with mode: 0644]
WebKit/android/nav/CachedColor.h [new file with mode: 0644]
WebKit/android/nav/CachedFrame.cpp
WebKit/android/nav/CachedFrame.h
WebKit/android/nav/CachedNode.cpp
WebKit/android/nav/CachedNode.h