1733844 - 4 letters badge text of extension buttons is unexpectedly truncated

Status: ASSIGNED

(WebExtensions :: Frontend, defect, P3)

Description

[YUKI "Piro" Hiroshi]

Attachment: Screenshot of a truncated badge text

Patches introduced at the bug 1714135 reduces max-width of badge text element from 24px to 20px. As the result, the 4th letter in alphabetic text are unexpectedly truncated now. This breaks extension compatibility, for example Minimal Digital Clock uses 4 digits to show the clock but the last letter is cut off.

Steps to reproduce

1. Install Firefox 92 or later.
2. Start Firefox.
3. Install Minimal Digital Clock.

Actual result

Only three digits are visible for the time "00:00".

Expected result

Full 4 digits are visible for the time "00:00".

Environment

• Firefox 92.0.1
• Windows 10
• Minimal Digital Clock 1.2

Workaround

userChrome.css can fix this for now:

.toolbarbutton-badge-stack {
  position: relative;
}

.toolbarbutton-badge {
  max-width: 24px !important;
  position: absolute;
  right: var(--toolbarbutton-inner-padding);
  top: var(--toolbarbutton-inner-padding);
}

Comment 1

[YUKI "Piro" Hiroshi]

Attachment: Bug 1733844 - Allow longer batch text without increased button size r?dao

Comment 2

[Rob Wu [:robwu]]

Recent regression. Oops.

Comment 3

[YUKI "Piro" Hiroshi]

While I creating the patch, I saw an odd CSS behavior around XUL and XHTML. CSS spec says that coordinates of a position:absolute element should be calculated based on its offset parent: the nearest ancestor element with position except static. So the following example should show a "!!!" badge at top-right of the "back" button (please run it for a browser window via the Browser Console):

{
  const button = document.querySelector('#back-button');
  const badge = document.createElement('label');
  badge.textContent = '!!!';
  badge.setAttribute('style', 'position: absolute; right: 0; top: 0; background: red; color: white; width: 24px; height: 20px');
  button.style.position = 'relative';
  button.appendChild(badge);
}

However it actually shows the "!!!" badge at top-right of the toolbar, and the "back" button never become the offset parent. Should I file a new bug for it? What product should I choose? ("Core"?)

Comment 4

[Marco Castelluccio [:marco]]

Set release status flags based on info from the regressing bug 1714135

Comment 5

[Rob Wu [:robwu]]

(In reply to YUKI "Piro" Hiroshi from comment #3)

While I creating the patch, I saw an odd CSS behavior around XUL and XHTML. CSS spec says that coordinates of a position:absolute element should be calculated based on its offset parent: the nearest ancestor element with position except static. So the following example should show a "!!!" badge at top-right of the "back" button (please run it for a browser window via the Browser Console):

...

However it actually shows the "!!!" badge at top-right of the toolbar, and the "back" button never become the offset parent. Should I file a new bug for it? What product should I choose? ("Core"?)

Is the behavior actually incorrect? If I traverse the element and ancestors of #back-button, then the first positioned element appears to be toolbar#nav-button, so what you're observing seems correct to me.

{
let but = document.querySelector('#back-button');
let getPos = elem => elem.ownerGlobal.getComputedStyle(elem).position;
console.log(getPos(but));                       // "static"
console.log(getPos(but.parentNode));            // "static"
console.log(getPos(but.parentNode.parentNode)); // "relative"
console.log(but.parentNode.parentNode);         // <toolbar id="nav-button" ...>
}

Comment 6

[YUKI "Piro" Hiroshi]

(In reply to Rob Wu [:robwu] from comment #5)

Is the behavior actually incorrect? If I traverse the element and ancestors of #back-button, then the first positioned element appears to be toolbar#nav-button, so what you're observing seems correct to me.

Hmm, your results looks different to the one on my environment (Nightly 95.01a on Windows 10). On my environment:

{
const button = document.querySelector('#back-button');
const badge = document.createElement('label');
badge.textContent = '!!!';
badge.setAttribute('style', 'position: absolute; right: 0; top: 0; background: red; color: white; width: 24px; height: 20px');
button.style.position = 'relative';
button.appendChild(badge);

const getPos = elem => elem.ownerGlobal.getComputedStyle(elem).position;
console.log(getPos(button));                       // "relative" <= expected
console.log(getPos(button.parentNode));            // "static"
console.log(getPos(button.parentNode.parentNode)); // "relative"
console.log(button.parentNode.parentNode);         // <toolbar id="nav-bar" ...>
console.log(button.lastChild);                     // <label style="position: absolute; ...>
console.log(button.lastChild.offsetParent);        // <toolbar id="nav-bar" ...> <= unexpected (expected is the #back-button)
}

Comment 7

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1714135

Comment 8

[Monica Chiorean]

Attachment: Screenshot with issue.

Issue is also reproducing on badge from ClearURL add-on, for detailed steps to reproduce please see bug 1714135.

Comment 9

[Marco Castelluccio [:marco]]

Dao, it looks like the patch was updated since you last reviewed it, could you take a look again?

Shane, is this actually S2?

Comment 10

[Sam Foster [:sfoster] (he/him)]

I think we would still like to get this patch landed - they look like good changes. I can commandeer the patch if you prefer?

Comment 13

[Rob Wu [:robwu]]

Sam, would you mind commandeering the patch and polish it to be ready for landing?

Comment 14

[juraj.masiar]

Note that currently also 1, 2 and 3 letters badge is cut on the right side (see with your eye how the border-radius is visible only on the left side).

Comment 15

[Sam Foster [:sfoster] (he/him)]

(In reply to Rob Wu [:robwu] from comment #13)

Sam, would you mind commandeering the patch and polish it to be ready for landing?

Unfortunately probably not any time soon. I'm trying to see if any one else is able to pick it up.