1933260 - in-content sidebar navitation text can wrap when selected

Status: NEW

(Toolkit :: UI Widgets, defect, P5)

Description

[Mark Striemer [:mstriemer]]

With the moz-page-nav component bolding the selected button's text, it's possible that the text is very close to wrapping and bolding it forces it to start wrapping. This is somewhat annoying but also seems fairly unlikely.

It would be nice to come up with some sort of solution for this, it can be implemented in moz-page-nav-button for now, but it's likely not specific to this use case in case we do something similar with changing boldness on hover/active/selected.

Some initial investigation seems to suggest that finding the width of the text node when it's bold and setting that as the slot's max-width at least reduces the likelihood of this happening, unsure if it will have other ramifications.

As for getting the width, we have TextNode.getBoxQuads() on Nightly, but that appears to be non-standard. It's possible we can use it everywhere but also seems ripe for the chopping block if no other browsers implement it. We could use a Range to do this, but it seems like that's supposed to create a text selection which may mess with assistive technology and seems not amazing.