684398 - [highlighter] [breadcrumb] Use an ellipsis (or a fade) if the text in the buttons overflows

Status: RESOLVED DUPLICATE of bug 936421

(DevTools :: Inspector, defect)

Comment 1

[Dave Camp (:dcamp)]

We're doing developer tool prioritization, filter on 'brontozaur'
to ignore the spam.

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

I have played around with this:
text-overflow: ellipsis needs to be set in .inspector-breadcrumbs-button as this contains 3 labels (node, id & class) and adding ellipses to them individually will not work. Unfortunately, setting it on .inspector-breadcrumbs-button also fails because of some strangeness in the elements width. Removing max-width or even setting the width directly appears to have no effect.

Comment 3

[Paul Rouget [:paul]]

We have the same problem with the infobar (someone is looking at this right now) and with the style editor.

The problem is that we can't use text-overflow:ellipsis in XUL (from my experience). We can use crop="...". But the "crop" attribute only works on <label>s that use the "value" attribute (not a textNode).

I believe that we can work around that with a <description> tag maybe, of by using some HTML (I have tried with the style editor, but didn't come to a solution).

Comment 4

[Blake Winton (:bwinton) (:☕️)]

(Since I'm the person who was looking into this problem with the infobar, it kinda makes sense for me to take this bug, too, if no-one else minds…)

Comment 5

[Blake Winton (:bwinton) (:☕️)]

Attachment: WIP patch.

Well, I've converted it to HTML, and here's what I've got so far.  I needed the extra divs to ensure that the max-width actually applied.  But the overflow still doesn't get triggered, and it's starting to feel more and more hacky.

So I'm thinking I might go back to the XUL, and see if I can set the width in javascript to trigger the crop.

But if anyone else wants to take a stab at this, I'ld love some info as to why it's doing (or not doing) what it's doing.  :)

Thanks,
Blake.

Comment 6

[Paul Rouget [:paul]]

Bug triage, filter on PINKISBEAUTIFUL

Comment 7

[Blake Winton (:bwinton) (:☕️)]

(Freeing this up so that someone else can take it if they want…)

Comment 8

[Brian Grinstead [:bgrins]]

This is being addressed in Bug 936421.  Going to truncate and add ellipsis using JavaScript since handling the text-overflow in XUL (or some combination of XUL and HTML) seems to be a minefield.