collapsible pin pane

[peterzhangsnail]

Add an icon to the pin pane to make it collapsable.
Here's how it may look on the ecma doc:

Closes tc39/ecma262#1898

[ljharb]

Thanks!

[peterzhangsnail]

@ljharb Here's the new PR: use the method already existed to achieve it, just like your suggestion, looking for more tests and ideas.

[peterzhangsnail]

@ljharb Done!

[bakkot]

I feel like the orientation of the arrows in the screenshot is the opposite of what I expect. Specifically, I expect "down" to mean "expanded" in this context. Compare Github's <details>:

example

[ljharb]

Ah, good call - i didn't notice before, but you're right. The triangles should match the way the TOC sections already work - which is as you describe.

@peterzhangsnail, can you fix?

[peterzhangsnail]

@ljharb I run my build and the orientation of the button seems correct. Here's my process below:
(OS: win7 / build tool: git-bash)

[peterzhangsnail]

@ljharb It's also easy to 'fix' anyway. Just a little exchange of strings in elements.css.

[ljharb]

@peterzhangsnail when "closed", the arrow should be pointing left/inwards (at the title), not right/outwards.

[rkirsling]

@ljharb It's true that an right-facing arrow on the right often means "go to detailed view" but I'm not sure I can think of an example of an left-facing arrow on the right being used for a closed drawer?

I think when it's on the right, the norm may be upward/downward—see the "pending reviewers" box on this very page, as well as the Preferences pages for Chrome and FF.

[ljharb]

@rkirsling i'd expect "up/down", or "inwards/downwards". Chrome's preference arrows, at least, aren't expanders, they're navigation "go to"s.

this arrow points inwards/downwards, for example

(here's some example content)

[rkirsling]

Yep, I agree with your rationale, I just don't recall seeing an inward-facing arrow on the right.

Chrome and FF Preferences have drawers, you just have to look around for them:

[ljharb]

Ah, true. Perhaps the "pins" arrow should be on the left, then?

[peterzhangsnail]

@ljharb That doesn't match with the toc header below it if we put the arrow on the left.

[peterzhangsnail]

@ljharb Here's the upward/downward version of pin arrow:
(Better change the transition time to 0s, a 180-degree rotate with non-zero transition time seems weird.)

[ljharb]

@peterzhangsnail those are backwards too; the downwards arrow in an up/down is the one that shows the contents; upwards hides them.

[peterzhangsnail]

@ljharb Click a downward/upward arrow then it shows/hides the content. You must click it first.

[peterzhangsnail]

@ljharb Here's a gif to show the process:

[ljharb]

Yes, that's backwards. When the content is hidden, the arrow should reflect that by pointing upwards. Clicking it should show the content and thus change it to point downwards, indicating that the content is visible (and that clicking it will make it invisible).

[peterzhangsnail]

@ljharb Hope this is what we want:

[peterzhangsnail]

@ljharb I have run my build routine with the new commit, everything works just fine.

[ljharb]

The things we have to decide between:

1. disclosure triangle is on the left, closed === points inwards

• Pros: consistency with TOC triangles
• Cons: P in "Pins" does not align with "T" in "Table of Contents"

2. disclosure triangle is on the right, closed === points inwards

• Pros: "closed" look is consistent with TOC triangles
• Cons: right-alignment is inconsistent with TOC triangle alignment

3. disclosure triangle is on the right, closed === points upwards

• Pros: ?
• Cons: right-alignment is inconsistent with TOC triangle alignment; "closed" state is inconsistent with TOC triangles

My preference is 1, 2, 3.

[rkirsling]

I don't have a strong opinion here, but I'll note that the upward/downward approach used by GitHub/Chrome/Firefox has downward as the closed state (I was momentarily confused by this myself, hence all the edits to my first comment above).

[ljharb]

@rkirsling in

content

?

[rkirsling]

@ljharb What? That's not upward/downward.

[ljharb]

@rkirsling right; so what are you referring to that's up/down in those browsers? <details> is the only thing i'm aware of in html.

[rkirsling]

@ljharb I just re-referenced what I described in my first two comments: the screenshots as well as the "pending reviewers" box on this page.

[ljharb]

@rkirsling ah, thanks, i see what you mean. In those cases they're not triangles, they're chevrons, and i think the difference, while subtle, actually matters quite a bit.

[rkirsling]

Hmm, that's fair. Maybe that means it's confusing to have a filled triangle flip instead of rotate then? 🤔 In any event, I have no qualms with your order of preference.