1578016 - @font-face code is cut off (with text-overflow: ellipsis)

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: fonts-font-face-overflow.png

The @font-face code blocks in Inspector>Fonts are often cut off, especially the value for src.

These code blocks can only be accessed by expanding "All fonts on page", then expanding an individual @font-face code block (which is collapsed by default). Once a user has done all that, they probably want to access the full information and not a truncated version of it.

I suspect we use text-overflow:ellipsis as a simple solution for overflowing lines of code, but we can probably do better and not lose information.

A few ways possible solutions:

1. Use white-space: pre-wrap; instead of the default white-space: pre;
2. Use overflow-x: auto; on the <pre> element.

#2 gives users less information at a glance, because they have to scroll to see it, but it might be better if we have @font-face code blocks with long base64 URLs in them (something like a 50kb string).

Attached: some tests with @font-face blocks containing standard URLs and base64 URLs.

Comment 1

[Patrick Brosset <:pbro>]

Thanks for filing. I has originally misread this and thought this was a bug report. It does make sense as an enhancement though so I'll revert that change.

Comment 2

[Peter]

Attachment: Devtools fonts pane on MacOS showing clipped at-font-face declaration in expanded state

Came here to report this as a bug, as - at least on MacOS - there is currently no way to view or copy the complete declaration (including the clipped overflow) within this panel. It does not scroll, there is no title-prop-esque hover, and right mouse clicks are nonfunctional.

The only way to get to the full @font-face declaration, is to manually go through the often many files listed under the "Style Editor" panel and use what little information the fonts pane showed to find a match. Not ideal, to say the least.

Ideally this text fully expands without clipping as suggested earlier (and right click-able), but some sort of link to the declaration source as requested in bug 933716 would also work.

Added this comment and screenshot as an attachment, not sure if that was the right way to go about it. I'm new here :)