1799510 - Make the list row height aware of font size to better fit the content

Status: RESOLVED DUPLICATE of bug 1880835

(Thunderbird :: General, enhancement)

Description

[Alessandro Castellani [:aleca]]

We currently define a fixed pixel height for the list row.
https://searchfox.org/comm-central/search?q=static+ROW_HEIGHT+%3D&path=&case=false&regexp=false

This is necessary because each row needs to have the same height in order to allow recycling UI elements and properly calculate scrolling and position.

This is unfortunately a bit inconvenient since it doesn't allow the widget to resize properly when the font-size changes, and even for the density changes we're forced to manually create those variations, rather than allowing the row to redraw itself when the padding or the size of the child elements change.

We should rework this with something like this:

• Calculate the height of the first row on load, so we can use that as a fixed value.
• Make that value reactive to density and font size changes, in order to trigger a re-render of the listview when something changes.

Comment 3

[Frank Steiner]

Ok, I better ask here I guess :-)

The "calculate height of first row on load" would be the perfect solution to allow adjustments by css. However, is there a situation where thie could change between folders? I.e. having different css adjustments for row height/padding for different folders would be very strange, so maybe it would be enough to react to events like density or font-size changes...?
Then the "easy" way might be to use dynamic calculation only w.r.t. font-size, but let it be overriden if a fixed row height is defined by the user in prefs.js. I.e. in densityChange() you would only consider the font-size to adjust the 18/26/32 values accordingly. Or, if the values are defined in user variables, just take these values no matter what. Any adjustments by css would be ignored then, but people could still adjust the row height to their wishes, but not per folder.

Background for my question is that I've used to lower padding for these rows for years so that I get more mails into the threadPane without having a too small font-size.

Comment 4

[Frank Steiner]

I hope it is ok to post this here for people having the same issue and finding this thread. As a work-around for those who just want a fixed row-height that is different from the three pre-defined values (and as long as there is no other way to set this by whatever Alessandro might implement), it is possible to set ROW_HEIGHT by some userscript.js. I'm using this loader and then my rowheight.uc.js script looks like this:

"use strict";
_ucUtils.startupFinished()
.then(function(){
  if (location != 'chrome://messenger/content/messenger.xhtml') return;

  /* DOMcontentLoaded is needed to be able to access the inner document */
  window.addEventListener("DOMContentLoaded", (event) => {
      /* according to https://developer.thunderbird.net/add-ons/updating/tb115/adapt-to-changes-in-thunderbird-103-115 */
      var myWindow=window.gTabmail.tabInfo[0].chromeBrowser.contentWindow;
      var myTree=myWindow.document.getElementById('threadTree');
      myWindow.addEventListener("load", () => {
	  /* set height variable that is used in tree-view.mjs for scrolling calculation */
	  myTree._rowElementClass.ROW_HEIGHT=22;
	  /* redraw threadTree with new height */
	  myTree.invalidate();
	},{once: true});
     },{once: true});

This will set the row height to 22px (independent from which uidensity is used) and scrolling by arrow keys or PgUp/PgDn does work (in contrast to changing the row height by css code as described in this bug report.

Comment 5

[floh.mueller]

(In reply to Frank Steiner from comment #4)

I hope it is ok to post this here for people having the same issue and finding this thread. As a work-around for those who just want a fixed row-height that is different from the three pre-defined values (and as long as there is no other way to set this by whatever Alessandro might implement), it is possible to set ROW_HEIGHT by some userscript.js. I'm using this loader and then my rowheight.uc.js script looks like this:

[...]

This will set the row height to 22px (independent from which uidensity is used) and scrolling by arrow keys or PgUp/PgDn does work (in contrast to changing the row height by css code as described in this bug report.

Hi Frank,
I tried to use your script, but it didn't work.. so I checked the Dev Tools console and found some errors, here's the slightly altered code that worked for me (tb version 115.5.2):

"use strict";
_ucUtils.startupFinished().then(function () {
    if (location != 'chrome://messenger/content/messenger.xhtml') return;

    /* DOMcontentLoaded is needed to be able to access the inner document */
    window.addEventListener("DOMContentLoaded", (event) => {
        /* according to https://developer.thunderbird.net/add-ons/updating/tb115/adapt-to-changes-in-thunderbird-103-115 */
        var myWindow = window.gTabmail.tabInfo[0].chromeBrowser.contentWindow;
        //var myTree = myWindow.document.getElementById('threadTree');
        myWindow.addEventListener("load", () => {
            var myTree = myWindow.threadTree;
            /* set height variable that is used in tree-view.mjs for scrolling calculation */
            myTree._rowElementClass.ROW_HEIGHT = 22;
            /* redraw threadTree with new height */
            myTree.invalidate();
        }, {once: true});
    }, {once: true});
});