Tools page customization

[miken32]

Implement feature request for customization of lists at https://stackoverflow.com/tools as described in #505.

One thing lacking is inability to add radio buttons to the settings to select question/answer/all. Like you can add a single setting of type "radio" but without ability to link them together it's kind of useless.

Also was unable to get sox.helpers.addAjaxListener to work, but didn't spend much time figuring out why since I just went with the mutation observer instead.

[shu8]

Thanks a lot for this PR, I'm really sorry for the delay in looking at it!

I've just got some minor comments, and a small syntax error, but otherwise this LGTM!

[shu8]

We could replace this with sox.helpers.addAjaxListener like this:

      // tables are populated by XHR after page loads
      sox.helpers.addAjaxListener("\\/tools\\?tab=", () => {
        document.querySelectorAll("table.summary-table").forEach(trimLists);
      });
      // just in case we come in after a table has been loaded already
      document.querySelectorAll("table.summary-table").forEach(trimLists);

we found that the advantage of doing it this way is we stop adding so many mutation observers to the page, which seemed to have negative performance effects when there were too many.

This method instead just triggers your function whenever an xhr response from the given URL is received, after which we can query for the table once

[miken32]

I'm going to convert this to draft for now and do some more testing since it's been a while and seems to be acting a bit flaky for me. I'm still not able to get the ajax listener working, FWIW.

[shu8]

Hm, it seemed to work for me when I tried it locally, does nothing happen when you use the ajax listener?

[miken32]

Hm, it seemed to work for me when I tried it locally, does nothing happen when you use the ajax listener?

Well, nothing happens at first. Opening up one of the lists triggers the listener, as does changing tabs. Seems inconsistent, and oddly enough only seems to happen when I have the dev console open.

Check this video where you can see I have multiple items shown (the custom setting is at 8 items) then I reload the page and only have 3. You can also see the expected Ajax requests were made. I change tabs and come back, and the listener has fired. It's not a time delay; I can wait 5 minutes and nothing will happen until the tab loses focus and regains it again. Very strange.

[shu8]

I wonder if what's happening is that the tab change triggers the focus, and only then does the feature actually run, due to this code which is what actually triggers Feature functions:

sox/sox.user.js

Lines 181 to 187 in 78d65e7

	if (sox.settings.available) {
	if (document.hasFocus && document.hasFocus()) {
	runFeatures(settings, featureInfo);
	} else {
	window.addEventListener('focus', () => runFeatures(settings, featureInfo), { once: true });
	}
	}

But - if this is the case, it's strange that you wouldn't experience the same issue with the Mutation Observer approach.

---

This is what it looks like for me, with listCount=2, with a tab switch in between:

when using this code for the entire feature:

  customizeToolsPageLists: function(settings) {
    const trimLists = function(table) {
      if (settings.filterInvalid) {
        table.querySelectorAll("td.tagged-ignored").forEach(cell => cell.parentNode.remove());
      }
      if (settings.filterTypeQuestions) {
        table.querySelectorAll("a.question-hyperlink").forEach(cell => cell.parentNode.parentNode.remove());
      }
      if (settings.filterTypeAnswers) {
        table.querySelectorAll("a.answer-hyperlink").forEach(cell => cell.parentNode.parentNode.remove());
      }
      const listCount = settings.listCount || 3;
      const rows = table.querySelectorAll("tr");
      rows.forEach((row, i) => row.classList.toggle("collapsing", i >= listCount));
    };
   // tables are populated by XHR after page loads
    sox.helpers.addAjaxListener("\\/tools\\?tab=", () => {
      console.log('fire')
      document.querySelectorAll("table.summary-table").forEach(trimLists);
    });
    // just in case we come in after a table has been loaded already
    document.querySelectorAll("table.summary-table").forEach(trimLists);
  }

---

In any case, if this definitely doesn't work for you, I'm happy to merge in the Mutation Observer approach, because there's not many other features that run on this page anyway (the main issue with observers used to be when lots of features applied their own to the same page e.g., a post page which lots of SOX features target).