Remove <deck> from https://searchfox.org/comm-central/rev/1fa5ebe1384434e904b33bb7de8f0a3d6e8bfdc5/calendar/base/content/widgets/calendar-minimonth.js#58

We can remove the deck element, can directly use the label element.

Comment on attachment 9190371 [details] [diff] [review]
Bug-1679853_de-deck-calendar-minimonth-js-0.patch

Not much CSS. It looks good, maybe a width: 9.5ch; would also work (on Windows it works.

A problem could be that locales use different label length. So localize the width could be better.

https://treeherder.mozilla.org/jobs?repo=try-comm-central&revision=9c207970e8f0d1f9ae98fdc4b629a40f6172c460

Alessandro, what about my comment 3 about the localized width?

Indeed, if we're setting a fixed width we should localize it so we avoid issues in other languages.
I see this section is using a properties file. Magnus, do you think it's worth moving those strings to fluent?

Since the mini-month widget has a fixed width, and the years have a fixed width, it should be possible to have the name too occupy a fixed width, without getting in trouble with localizations, at least any more than status quo.

(In reply to Magnus Melin [:mkmelin] from comment #7)

Since the mini-month widget has a fixed width, and the years have a fixed width, it should be possible to have the name too occupy a fixed width, without getting in trouble with localizations, at least any more than status quo.

The minimonth has no fixed width. It adapts to the accumulated width of the items. The <deck> was to set the width of the widest element in it. When a locale had a wider month name the minimonth was wider than with en-US locale.

In that case, I'd further down in the connectedCallback(), once appended to the DOM, clone the day node and create boxes of visibility hidden for each of the days. Check which one has the largest width and set the box to use that.

Sure, I will update the patch accordingly.

I have tried to get the width of all the labels and but in the connectedCallback(), I am getting width as zero so used this:

let width = 0;
for (let i = 0; i < 12; i++) {
  let dateString = cal.l10n.getDateFmtString(`month.${i + 1}.name`);
  width = Math.max(dateString.length, width);
}
this.querySelector(".minimonth-month-name").style.width = width + "ch";

I didn't try, but since the unit is "ch" now, it might work. Could perhaps need padding as well, but essentially 1ch is one width of letter.

(In reply to Alessandro Castellani (:aleca) from comment #12)

Let's follow Magnus' suggestion:

• Generate all labels for all the month names.
• Append them to the DOM and find the largest width.
• Hide them all and toggle the visibility of the selected month.

In the connectedCallback(), after appending the relevant labels, we are still not getting the width of the label i.e. we are getting width as zero for all the labels. So I find this as an available option. Else we need to do something in the onLoad function wherever we are using the calendar-minimonth, but it's not a safe option.

I noticed that when cycling through September the area occupied by the name grows a bit and pushes other elements.
I think this is due to the padding Magnus pointed out before.
We could simply increase the width by 1 to account for that extra need space.

Pushed by geoff@darktrojan.net:
https://hg.mozilla.org/comm-central/rev/2f6b7de5097c
remove <deck> XUL element from calendar-minimonth.js. r=aleca,geoff