1557013 - API heading has bad text selection UX

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: API, defect)

Description

[Sebastian Silbermann]

What did you do?

A

1. goto https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
2. copy method name
3. paste into editor

B

1. goto https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
2. double click the method name

What happened?

A: SyntaxError
B: only part of the method name is selected

What should have happened?

A: No SyntaxError
B: full method name is selected

Is there anything else we should know?

Please don't insert zero-width whitespace between each word of the method name.

Comment 1

[Peter Bengtsson [:peterbe]]

Here's a way to reproduce it. Double click on "ggetBoundingClientRect" in the document title and paste into a Python shell:

>>> "get​Bounding​Client​Rect"
'get\xe2\x80\x8bBounding\xe2\x80\x8bClient\xe2\x80\x8bRect'

Comment 2

[David Flanagan [:djf]]

Darn! The zero-width spaces are there to improve the word-wrapping behavior of these long names on narrow screens. But breaking cut-and-paste is worse, and we need to fix this, I think.

We used to do it a different way, but we were still inserting something, so that probably caused problems as well. I can look at reverting, but I'm guessing it won't be any better (or will maybe solve problem A without solving problem B).

I'm pretty sure that CSS word wrapping options have gotten more interesting in recent years. Maybe browsers are smart enough to preferentially wrap on camelCase transitions by default now and we don't have to do anything...

This "feature" hasn't been implemented on the beta site yet, and I've been meaning to do that, so I'll use that as a testing ground for a better solution, and if we can make everything work there, we can backport it to the legacy site.

Comment 3

[David Flanagan [:djf]]

It looks like hyphens:auto makes Firefox and Chrome do something reasonable with long title names and we can probably just remove the zero width spaces and handle this with modern CSS.

Comment 4

[David Flanagan [:djf]]

Actually, on further testing, hyphens:auto is not preferentially hyphenating at camelCase boundaries, and there are cross platform support issues for non-english locales.

What we used to do was use <wbr>, and it appears that that does not have the copy-and paste problems that the current zero-width space solution does. So I think that just switching back to <wbr> is the way to fix this.

Comment 5

[David Flanagan [:djf]]

Ah, but wait. The reason we stopped using <wbr> was "Bug 1523662, Google results container wbr in displayed URL"

So I think the best solution is hyphens:auto, and just don't sweat the precise location of the breaks. At least using hyphens:auto actually gives us a hyphen when the breaks happen, which is better than what we get with wbr or the current zero width space.

Comment 6

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/kuma/pull/5493

Comment 7

[David Flanagan [:djf]]

That patch has been deployed. This is now fixed.