Intent to Ship: HTML5 <details> and <summary> tags

[Ting-Yu Lin]

As of Firefox 48 I intent to ship HTML5 <details> and <summary> tags on all
platforms. The features has been developed behind pref
"dom.details_element.enabled", and had been enabled on non-release build in bug
1241750 <https://bugzilla.mozilla.org/show_bug.cgi?id=1241750>

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=ship-details-summary
Link to standard:
https://html.spec.whatwg.org/multipage/forms.html#the-details-element

This feature was previously discussed in this "intent to implement" thread:
https://groups.google.com/d/msg/mozilla.dev.platform/b0UMDIasfq8/tW49QLgCBwAJ

One major concern in the "intent to implement" discussion is the ability to
style the summary disclosure triangle. Currently summary has default style
"display: list-item", so we can style the triangle via the pseudo element
|summary::-moz-list-bullet| like |li::-moz-list-bullet|.

The open question is that do we want to make it prefect to implement
|summary::marker| (Bug 1221416
<https://bugzilla.mozilla.org/show_bug.cgi?id=1221416>) before shipping,
which requires more effort to implement a complete support for ::marker
pseudo element (Bug 205202
<https://bugzilla.mozilla.org/show_bug.cgi?id=205202>). If not, we can ship
it in Firefox 48. Otherwise this feature might skip one or two releases.

Please give me some feedbacks. Thanks.

Ting-Yu Lin (:TYLin)

[Jonas Sicking]

On Thu, Apr 14, 2016 at 12:53 AM, Ting-Yu Lin <tl...@mozilla.com> wrote:
> One major concern in the "intent to implement" discussion is the ability to
> style the summary disclosure triangle. Currently summary has default style
> "display: list-item", so we can style the triangle via the pseudo element
> |summary::-moz-list-bullet| like |li::-moz-list-bullet|.
>
> The open question is that do we want to make it prefect to implement
> |summary::marker| (Bug 1221416
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1221416>) before shipping,
> which requires more effort to implement a complete support for ::marker
> pseudo element (Bug 205202
> <https://bugzilla.mozilla.org/show_bug.cgi?id=205202>). If not, we can ship
> it in Firefox 48. Otherwise this feature might skip one or two releases.

Do other browsers support styling the disclosure triangle?

At the very least we should probably support whatever syntax they
support (including if that uses vendor-prefixes sadly).

/ Jonas

[Ting-Yu Lin]

> No other implementation supports ::marker either, right? If that is
> correct, it seems fine to me to perfect styling support in a later
> release.
Yes. Currently, no other vendor support ::marker.

> Do other browsers support styling the disclosure triangle?

Chrome and Safari could style the triangle via
|summary::-webkit-details-marker|.
However it's not easy for us to replicate their implementation since they
are not use
"display: list-item" for the summary. We choose to follow the spec closely.

Even if we implement the same pseudo element name "-webkit-details-marker",
the usage will still be different.

For example to hide the triangle on Chrome and Safari:
summary::-webkit-details-marker { display: none; }

On Firefox:
summary::-moz-list-bullet { list-style-type: none; } OR summary {
display: block; }


Ting-Yu

[Ting-Yu Lin]

On Thu, Apr 14, 2016 at 5:03 PM, Xidorn Quan <quanx...@gmail.com> wrote:

> On Thu, Apr 14, 2016 at 6:51 PM, Ting-Yu Lin <tl...@mozilla.com> wrote:
>
>> On Firefox:
>> summary::-moz-list-bullet { list-style-type: none; } OR summary {
>> display: block; }
>
>

> Shouldn't "summary { list-style-type: none; }" be enough?
>
>
Yes. With Bug 1258657 <https://bugzilla.mozilla.org/show_bug.cgi?id=1258657>
landed, it's enough to hide the triangle by summary { list-style-type:
none; }.

[Xidorn Quan]

On Thu, Apr 14, 2016 at 6:51 PM, Ting-Yu Lin <tl...@mozilla.com> wrote:

> On Firefox:
> summary::-moz-list-bullet { list-style-type: none; } OR summary {
> display: block; }


Shouldn't "summary { list-style-type: none; }" be enough?

- Xidorn

[Boris Zbarsky]

On 4/14/16 3:53 AM, Ting-Yu Lin wrote:
> One major concern in the "intent to implement" discussion is the ability to
> style the summary disclosure triangle. Currently summary has default style
> "display: list-item", so we can style the triangle via the pseudo element
> |summary::-moz-list-bullet| like |li::-moz-list-bullet|.

What are the styling options here? Do we support list-style-type (apart
from "none")?

-Boris

[Karl Dubost]

Le 14 avr. 2016 à 18:24, Ting-Yu Lin <tl...@mozilla.com> a écrit :
> On Thu, Apr 14, 2016 at 5:03 PM, Xidorn Quan <quanx...@gmail.com> wrote:

>> Shouldn't "summary { list-style-type: none; }" be enough?

> Yes. With Bug 1258657 <https://bugzilla.mozilla.org/show_bug.cgi?id=1258657>
> landed, it's enough to hide the triangle by summary { list-style-type:
> none; }.

So I started some tests this morning
http://codepen.io/anon/pen/bpKGXg

And list-style-type: none; has 0 effect on Blink/WebKit.

The most common usage of -webkit-details-marker is indeed a variation of:
summary::-webkit-details-marker { display: none; }

but I found other things too which might create cosmetics Web Compatibility issues.
http://www.otsukare.info/2016/04/19/summary-details



--
Karl Dubost, Mozilla
http://www.la-grange.net/karl/moz

[Ting-Yu Lin]

Yes. <summary> supports the same set of "list-style-type" property values
as <li> because our default style for <summary> is "display: list-item".


> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform
>

[Ting-Yu Lin]

So far, Blink/Webkit still use "display: block" for the summary, so
"list-style-type" won't have any effect.
Here is the section
<https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements>
in the html spec describe the rendering hint about details and summary.
And here is the chromium bug
<https://bugs.chromium.org/p/chromium/issues/detail?id=590014> for
implementing the triangle as a list item.

The current portable way to hide the triangle is to specify both
summary::-webkit-details-marker { display: none; }
and
summary { list-style-type: none; }

As I described in bug 1258657
<https://bugzilla.mozilla.org/show_bug.cgi?id=1258657#c0>, some website
like Edge FAQ
<https://developer.microsoft.com/en-us/microsoft-edge/platform/faq/how-much-do-i-have-to-pay-for-this-servi/>,
which happens to write
summary::-webkit-details-marker { display: none; }
summary { display:block; }
and offer their customized triangle by summary::after or summary::before
will luckily avoid the cosmetics issue.

Ting-Yu

[Boris Zbarsky]

On 4/19/16 1:09 AM, Ting-Yu Lin wrote:
> Yes. <summary> supports the same set of "list-style-type" property values
> as <li> because our default style for <summary> is "display: list-item".

OK. And the "counter" involved has the value 0, right?

-Boris

[Ting-Yu Lin]

Yes. We skip incrementing the counter for summary in
nsBlockFrame::RenumberListsFor()
<https://dxr.mozilla.org/mozilla-central/rev/67ac40fb8f680ea5e03805552187ba1b5e8392a1/layout/generic/nsBlockFrame.cpp#7104-7111>.


Ting-Yu

[Ting-Yu Lin]

To summarize the feedback so far, I'd still like to ship <details> and
<summary> without |summary::marker| because

1) No other browsers support summary::marker yet.
2) From the webcompat point of view, even if we support summary::marker,
our usage to customize the triangle will still be different from the
|summary::-webkit-details-marker| usage on Blink/Webkit. So implementing
::marker does not solve the webcompat issue.
3) The marker (triangle) is still stylable without |summary::marker|.
Author could change the triangle via |summary { list-style-type: xxx}| or
use pseudo element |summary::-moz-list-bullet| to add more css rules.

Ting-Yu

On Thu, Apr 14, 2016 at 3:53 PM, Ting-Yu Lin <tl...@mozilla.com> wrote:

> As of Firefox 48 I intent to ship HTML5 <details> and <summary> tags on
> all platforms. The features has been developed behind pref
> "dom.details_element.enabled", and had been enabled on non-release build in bug
> 1241750 <https://bugzilla.mozilla.org/show_bug.cgi?id=1241750>
>
> Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=ship-details-summary
> Link to standard:
> https://html.spec.whatwg.org/multipage/forms.html#the-details-element
>
> This feature was previously discussed in this "intent to implement" thread:
>
> https://groups.google.com/d/msg/mozilla.dev.platform/b0UMDIasfq8/tW49QLgCBwAJ
>

> One major concern in the "intent to implement" discussion is the ability
> to style the summary disclosure triangle. Currently summary has default
> style "display: list-item", so we can style the triangle via the pseudo
> element |summary::-moz-list-bullet| like |li::-moz-list-bullet|.
>

> The open question is that do we want to make it prefect to implement
> |summary::marker| (Bug 1221416
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1221416>) before shipping,
> which requires more effort to implement a complete support for ::marker
> pseudo element (Bug 205202
> <https://bugzilla.mozilla.org/show_bug.cgi?id=205202>). If not, we can
> ship it in Firefox 48. Otherwise this feature might skip one or two
> releases.
>

[Tantek Çelik]

On Tue, Apr 19, 2016 at 8:41 AM, Ting-Yu Lin <tl...@mozilla.com> wrote:
> To summarize the feedback so far, I'd still like to ship <details> and
> <summary> without |summary::marker| because
>
> 1) No other browsers support summary::marker yet.

This is a reason to ship *with* it IMO, per showing standards
leadership, something Firefox is known for, leading the open (rather
than prefixed) web and all that.

> 2) From the webcompat point of view, even if we support summary::marker,
> our usage to customize the triangle will still be different from the
> |summary::-webkit-details-marker| usage on Blink/Webkit. So implementing
> ::marker does not solve the webcompat issue.

This is a normal transition phase in the path towards developers using
standards-based properties (border-radius etc. history has plenty of
examples). Not a reason not to ship.

> 3) The marker (triangle) is still stylable without |summary::marker|.
> Author could change the triangle via |summary { list-style-type: xxx}| or
> use pseudo element |summary::-moz-list-bullet| to add more css rules.

It's good that we have a prefixed alternative (that does not depend on
someone else's prefix).


The key question to consider about delaying |summary::marker| support
is whether or not we (e.g. you) think the spec for ::marker is
"stable" and "good" enough to ship.

That's a judgment call, and I'd like to know your opinion of that.

> Ting-Yu

Thanks,

Tantek

> On Thu, Apr 14, 2016 at 3:53 PM, Ting-Yu Lin <tl...@mozilla.com> wrote:
>
>> As of Firefox 48 I intent to ship HTML5 <details> and <summary> tags on
>> all platforms. The features has been developed behind pref
>> "dom.details_element.enabled", and had been enabled on non-release build in bug
>> 1241750 <https://bugzilla.mozilla.org/show_bug.cgi?id=1241750>
>>
>> Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=ship-details-summary
>> Link to standard:
>> https://html.spec.whatwg.org/multipage/forms.html#the-details-element
>>
>> This feature was previously discussed in this "intent to implement" thread:
>>
>> https://groups.google.com/d/msg/mozilla.dev.platform/b0UMDIasfq8/tW49QLgCBwAJ
>>
>> One major concern in the "intent to implement" discussion is the ability
>> to style the summary disclosure triangle. Currently summary has default
>> style "display: list-item", so we can style the triangle via the pseudo
>> element |summary::-moz-list-bullet| like |li::-moz-list-bullet|.
>>
>> The open question is that do we want to make it prefect to implement
>> |summary::marker| (Bug 1221416
>> <https://bugzilla.mozilla.org/show_bug.cgi?id=1221416>) before shipping,
>> which requires more effort to implement a complete support for ::marker
>> pseudo element (Bug 205202
>> <https://bugzilla.mozilla.org/show_bug.cgi?id=205202>). If not, we can
>> ship it in Firefox 48. Otherwise this feature might skip one or two
>> releases.
>>
>> Please give me some feedbacks. Thanks.
>>
>> Ting-Yu Lin (:TYLin)
>>
>>

[Boris Zbarsky]

On 4/19/16 2:44 PM, Tantek Çelik wrote:
> The key question to consider about delaying |summary::marker| support
> is whether or not we (e.g. you) think the spec for ::marker is
> "stable" and "good" enough to ship.

The key question before that one is whether we want to block shipping
details and summary on the entirety of ::marker support. Because we do
NOT want to ship parsing for ::marker while only supporting it for
summary and not in general....

-Boris

[Tantek Çelik]

Agreed. I'm assuming that our current ::-moz-list-bullet support (as
noted previously) does not (yet?) implement what we'd need for the
entirety of ::marker support.

Tantek

[Ting-Yu Lin]

On Wed, Apr 20, 2016 at 2:44 AM, Tantek Çelik <tan...@cs.stanford.edu>
wrote:

> On Tue, Apr 19, 2016 at 8:41 AM, Ting-Yu Lin <tl...@mozilla.com> wrote:
> > To summarize the feedback so far, I'd still like to ship <details> and
> > <summary> without |summary::marker| because
> >
> > 1) No other browsers support summary::marker yet.
>
> This is a reason to ship *with* it IMO, per showing standards
> leadership, something Firefox is known for, leading the open (rather
> than prefixed) web and all that.
>

I agree with you that we should really support ::maker in general to set a
standard.

>
> > 2) From the webcompat point of view, even if we support summary::marker,
> > our usage to customize the triangle will still be different from the
> > |summary::-webkit-details-marker| usage on Blink/Webkit. So implementing
> > ::marker does not solve the webcompat issue.
>
> This is a normal transition phase in the path towards developers using
> standards-based properties (border-radius etc. history has plenty of
> examples). Not a reason not to ship.
>
>
> > 3) The marker (triangle) is still stylable without |summary::marker|.
> > Author could change the triangle via |summary { list-style-type: xxx}| or
> > use pseudo element |summary::-moz-list-bullet| to add more css rules.
>
> It's good that we have a prefixed alternative (that does not depend on
> someone else's prefix).
>

summary::-moz-list-bullet is a consequence of <summary> being a list-item
in our implementation. Please don't advocate its usage.

>
>
> The key question to consider about delaying |summary::marker| support
> is whether or not we (e.g. you) think the spec for ::marker is
> "stable" and "good" enough to ship.
>

> That's a judgment call, and I'd like to know your opinion of that.
>

That's a good point. The ::marker are defined in both Pseudo-Elements
Module Level 4 <https://drafts.csswg.org/css-pseudo-4/#marker-pseudo> and Lists
and Counters Module Level 3
<https://drafts.csswg.org/css-lists-3/#marker-pseudo-element>.
And the one defined in pseudo element spec is easier to implement since the
set of CSS ruless that can be used on ::marker is restricted.
I would say we should implement it and give feedback to spec if we found
anything making no sense.

I don't mind if we finally decided to block shipping details and summary
due to lacking of ::marker support.
The point is that we need more feedback about the real use cases for
details and summary on Firefox.
I had enabled the pref on non-release channel on 48, but I don't see any
bug report about cosmetic issue or site breakage.
We might get more feedback once Aurora became 48 though.