Bug 31821 – Type=number UI part 1: pseudo classes and appearances

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Kent Tamura]

To implement <input type=number> UI, introduces
   - ::-webkit-inner-spin-button pseudo CSS selector
   - ::-webkit-outer-spin-button pseudo CSS selector
   - new appearance type: inner-spin-button
   - new appearance type: outer-spin-button

You can see examples in Bug#27968 .  We'll have two types; inner and outer, because Windows and Mac have different manners for such controls.

[Kent Tamura]

Comments on this part in Bug#27968:

■■ Comment #12 From Eric Seidel 2009-09-23 10:31:35 PST (-) [reply] 
(From update of attachment 39537 [details])
The change looks OK.  Where did the "*-spin-button" names come from?  What does
it have to do with spinning?  Can you post a picture of what these inputs are
going to look like?

■■ Comment #15 From Eric Seidel 2009-09-23 10:36:37 PST (-) [reply] 
Why are these called spin buttons if the Mac APIs call them steppers?  Does
windows call these "Spin buttons"?

■■ Comment #16 From Eric Seidel 2009-09-23 10:38:18 PST (-) [reply] 
Why are they called inner and outer spin buttons if they're really up and down
steppers?  Please cite the spec, or talk about where these names came from. 
Ideally in your ChangeLogs, since that's what reviewers read.

[Kent Tamura]

Created attachment 43751 [details]
Proposed patch (rev.2)

* Improve ChangeLog
* Resolve conflicts

(In reply to comment #1)
> Comments on this part in Bug#27968:
> 
> ■■ Comment #12 From Eric Seidel 2009-09-23 10:31:35 PST (-) [reply] 
> (From update of attachment 39537 [details] [details])
> The change looks OK.  Where did the "*-spin-button" names come from?  What does
> it have to do with spinning?  Can you post a picture of what these inputs are
> going to look like?
> 
> ■■ Comment #15 From Eric Seidel 2009-09-23 10:36:37 PST (-) [reply] 
> Why are these called spin buttons if the Mac APIs call them steppers?  Does
> windows call these "Spin buttons"?

Right.  Windows and GTK call such controls "spin buttons."
I don't have strong preference about the name.  However "Stepper" is Mac-only uncommon.

> ■■ Comment #16 From Eric Seidel 2009-09-23 10:38:18 PST (-) [reply] 
> Why are they called inner and outer spin buttons if they're really up and down
> steppers?  Please cite the spec, or talk about where these names came from. 
> Ideally in your ChangeLogs, since that's what reviewers read.

An inner or outer spin button represents a pair of a upper arrow button and a lower arrow button.
An inner-spin-button will be placed at the inside of a text field (Windows' standard style), and
an outer-spin-button will be placed at the outside of a text field (Mac's standard style).

I added some sentences about this to ChangeLog.

[Eric Seidel (no email)]

Comment on attachment 43751 [details]
Proposed patch (rev.2)

It's not at all clear from the code that "inner" means linux/win and "outer" means mac.  Can we clear this up some how?  I'm really not sure I understand why the implementations need separate CSS styles like this.

I'm just still confused why this patch does what it does.

[Adam Barth]

style-queue successfully ran check-webkit-style on attachment 43751 [details] without any errors

[WebKit Review Bot]

Attachment 43751 [details] did not pass chromium-ews:
Full output: http://webkit-commit-queue.appspot.com/results/128468

[Adam Barth]

Comment on attachment 43751 [details]
Proposed patch (rev.2)

This patch has been in the review queue for a while and does not appear to build.  If you're still interested in this patch, please post an updated version that compiles.

[Kent Tamura]

Created attachment 45038 [details]
A figure explaining spin button layout

(In reply to comment #3)
> (From update of attachment 43751 [details])
> It's not at all clear from the code that "inner" means linux/win and "outer"
> means mac.  Can we clear this up some how?  I'm really not sure I understand
> why the implementations need separate CSS styles like this.
> 
> I'm just still confused why this patch does what it does.

"Inner" means that it will be laid on the inside of text field border, and "outer" means it will be laid on the outside of text field border. Please see the figure I attach.
If we introduced just one spin-button class, we would need to implement two different layout and switch them by any way [1]. I thought introducing two classes, doing layout for both, 0x0 size for either, was much simpler than switching.

[1] may be
 * A renderer has "#if PLATFORM(...)"
  This seems inappropriate.  I don't know which layout is suitable for platforms other than mac and win. 
 * A platform code provides a flag representing inner or outer, a renderer switches layout by the flag.
  This may be another reasonable solution.

[Kent Tamura]

(In reply to comment #5)
> Attachment 43751 [details] did not pass chromium-ews:
> Full output: http://webkit-commit-queue.appspot.com/results/128468

Ah, the patch had a typo for !NEW_THEME code path.
Good catch by EWS!

[Kent Tamura]

Created attachment 45042 [details]
Proposed patch (rev.3)

- Fix build error without NEW_THEME

[WebKit Review Bot]

style-queue ran check-webkit-style on attachment 45042 [details] without any errors.

[Darin Adler]

Comment on attachment 45042 [details]
Proposed patch (rev.3)

I didn't carefully review the names of the appearance values, but this all seems OK. r=me on landing this next step.

[WebKit Commit Bot]

Comment on attachment 45042 [details]
Proposed patch (rev.3)

Clearing flags on attachment: 45042

Committed r52432: <http://trac.webkit.org/changeset/52432>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.