Bug 62096 - [Meta] Reduce the number of hand-built RenderObjects
Summary: [Meta] Reduce the number of hand-built RenderObjects
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
Depends on: 62153 62535 52920 61415
  Show dependency treegraph
Reported: 2011-06-04 13:44 PDT by Dimitri Glazkov (Google)
Modified: 2011-06-22 08:20 PDT (History)
7 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Dimitri Glazkov (Google) 2011-06-04 13:44:55 PDT
Across the land, we've used subclassing RenderObject (most of the time RenderBlock) to customize appearance of form controls and other elements. It's a convenient hack, but longer term, it's pain. The hand-built classes often break layout assumptions (RenderFileUploadControl lays out while it paints) or don't follow CSS layout at all (RenderSlider layout is completely custom, so you can't animate its properties), and otherwise introduce a maintenance burden on the render tree code.

We should work to reduce the number of these custom render objects and replace their layout with standard CSS idioms, if possible. In cases where this is not possible, we should consider adding CSS features to provide missing layout capabilities.
Comment 1 Kent Tamura 2011-06-22 02:02:10 PDT
I made some changes of RenderSlider and RenderTextControlSingleLine to reduce the amount of custom layout code.  However, they still have a lot of custom code.

I had no good idea to realize the followings with CSS.

In RenderTextControlSingleLine, we have two nodes in the simplest case; <input> and the inner editable text <div>.
 - If the <input> height is auto, it is calculated from the height of the inner <div>.  This has no problem.
 - If the <input> content height is taller than the height of the inner <div>, center the inner <div> in the <input> content vertically.
  Is this realized with CSS?
 - If the <input> content height is smaller than the height of the inner <div>, the inner <div> height should be shrunk, or the inner <div> should be clipped by the <input>.

If a text field has some decoration elements such as a search cancel button or a spin button, we wrap the inner <div> and the decoration elements with a flexible box container.  The flexible box container resolved the issue of vertical centering, but I had no good idea to make the flexible box container height same as the <input> content height.

As for RenderSlider, it has problems similar to RenderTextControlSingleLine.
Comment 2 Dimitri Glazkov (Google) 2011-06-22 08:20:44 PDT
Tab, is there any pending CSS spec/proposal that would give us this type of capability?