Static analyzer result pages filter checkboxes are slow

[annevk]

E.g., for WebKit clicking "All Bugs" checkbox on https://build.webkit.org/results/Apple-Sequoia-Safer-CPP-Checks/302370%40main%20%285930%29/scan-build-output/StaticAnalyzer/WebCore/index.html can take quite a bit of time.

This is because the script goes row-by-row and changes the display property value of each row independently.* It would be much quicker if it used CSS better. For instance, the script could toggle enable/disable classes on the table element and CSS could use that in combination with the row classes to hide the relevant rows.

---

*I based this on this code which is not good for rendering performance:

function SetDisplay(RowClass, DisplayVal)
{
  var Rows = document.getElementsByTagName("tr");
  for ( var i = 0 ; i < Rows.length; ++i ) {
    if (Rows[i].className == RowClass) {
      Rows[i].style.display = DisplayVal;
    }
  }
}

[llvmbot]

@llvm/issue-subscribers-clang-static-analyzer

Author: Anne van Kesteren (annevk)

E.g., for WebKit clicking "All Bugs" checkbox on https://build.webkit.org/results/Apple-Sequoia-Safer-CPP-Checks/302370%40main%20%285930%29/scan-build-output/StaticAnalyzer/WebCore/index.html can take quite a bit of time.

This is because the script goes row-by-row and changes the display property value of each row independently.* It would be much quicker if it used CSS better. For instance, the script could toggle enable/disable classes on the table element and CSS could use that in combination with the row classes to hide the relevant rows.

---

*I based this on this code which is not good for rendering performance:

function SetDisplay(RowClass, DisplayVal)
{
  var Rows = document.getElementsByTagName("tr");
  for ( var i = 0 ; i < Rows.length; ++i ) {
    if (Rows[i].className == RowClass) {
      Rows[i].style.display = DisplayVal;
    }
  }
}

[emilio]

FWIW at least in Firefox (Anne pointed me to this issue) the issue wasn't in that JS code, but more in a quadratic algorithm resulting on switching the rows one-by-one having to look their layout tree insertion position, which with 28k rows gets slow if they are all hidden.

There's some extra complication because there's adjacent white-space between rows (which doesn't matter inside tables but would matter in e.g. blocks).

I've fixed this in https://bugzil.la/1948933. But since other engines also seem to be hitting quadratic cases, something that might help might be hiding the table, perform the operations, then showing it at once.

So, changing it to:

function SetDisplay(RowClass, DisplayVal)
{
  var Table = document.querySelector("table");
  Table.style.display = "none";
  Table.getBoundingClientRect();

  var Rows = document.getElementsByTagName("tr");
  for ( var i = 0 ; i < Rows.length; ++i ) {
    if (Rows[i].className == RowClass) {
      Rows[i].style.display = DisplayVal;
    }
  }

  Table.style.display = "";
}

[steakhal]

I'll admit that I'm not equipped in the subject.
I'm open for accepting patches though.