Topic on Help talk:Extension:Linter

User unfriendly script to find errors

13
Summary by 197.218.81.33

See User:PerfektesChaos/js/lintHint for a more userfriendly tool

197.218.89.23 (talkcontribs)
//Wikilinter
var currError = currError || 0;
var tmpWikitext = tmpWikitext || "";
var lintData = lintData || [];
var textArea = document.getElementById('wpTextbox1');
var selectRange = function(start, end) {
	// https://stackoverflow.com/a/40017290
	var e = document.getElementById( 'wpTextbox1');
	if (!e) return;
	else if (e.setSelectionRange) { e.focus(); e.setSelectionRange(start, end); } /* WebKit */
	else if (e.createTextRange) { var range = e.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */
	else if (e.selectionStart) { e.selectionStart = start; e.selectionEnd = end; }
};
function getError(data, currError ){
	if (data && data.length){
		alert("found "+ currError + " /"  + data.length + " errors.  Scroll down to find highlighted text.");
	} else {
		alert("No errors found.");
	}
	lintData = data;
	if (lintData[currError]) {
		var startRange = lintData[currError].dsr[0];
		var endRange = lintData[currError].dsr[1];
		textArea.focus();
		selectRange(startRange, endRange);
	}
}
if (tmpWikitext === $("#wpTextbox1").val() && lintData.length - 1 > 0 ) {
	if ( currError >=  lintData.length) {
		currError = 0;
	} else { currError = currError + 1; }
	getError(lintData, currError );

	console.log("yup");
} else {
	tmpWikitext = $("#wpTextbox1").val();
	$.post(window.location.origin +"/api/rest_v1/transform/wikitext/to/lint", {
		wikitext: $("#wpTextbox1").val()
	}).then(function (data) {
		var textArea = document.getElementById('wpTextbox1');
		getError(data, currError);
	});
}

Instructions:

  1. Go to wikipage with errors
  2. Click edit / view source
  3. Open browser console
  4. Paste the snippet above
  5. Wait a few seconds and click OK when the alert box shows up
  6. Scroll down to find highlighted wikitext
  7. Rinse and repeat steps 3 to 6 to find more errors

Unlike the linter, this will cycle through all errors on the page.

Note: This script doesn't filter internal lint errors. So it may highlight errors not show in the linter itself. Feel free to ignore those. It is certainly possible to make it more user friendly like Topic:Tvyz5k6ki39kba6t

PerfektesChaos (talkcontribs)

You already mentioned en:User:PerfektesChaos/js/lintHint.

I am going to integrate your nice selection approach.

The API result is already present and will list details right now, but I hesitated to figure out that dsr[0] dsr[1] business.

I am heading to put an arrow button next to each error row if a source textbox is present, a click should do the selection and hopefully scrolling.

PerfektesChaos (talkcontribs)

Okay, implementation done and under private testing.

Will be published the next days as 1.4 version.

I am glad that at least FF is autoscrolling the TEXTAREA into selection range.

197.218.88.102 (talkcontribs)

Yes, it lacks proper documentation. Trial and error helped finding out what those dsr thingies meant. Anyway, scrolling to an area works in chrome with a snippet like this:

                 var scrollTo=  function(textarea, position) {
				if (!textarea) { return; }
				if (position < 0) { return; }

				var body = textarea.value;
				if (body) {
					textarea.value = body.substring(0, position);
					textarea.scrollTop = position;
					textarea.value = body;
				}
			};

It probably works (haven't tested) in firefox too, and other browsers. Using startrange as the position works pretty well with a few tweaks.

PerfektesChaos (talkcontribs)
  • I have uploaded a BETA (d) pre-release online and make my fellows trying now.
  • I don’t struggle with particular browsers, I kindly delegated that stuff to our jquery.textSelection module.
PerfektesChaos (talkcontribs)

lintHint release 2 online now.

Down arrows in table whereever available.

Provides also sorting for initial order.

197.218.92.249 (talkcontribs)

Generally looks good.

One issue though is that if the page contains a massive number of errors then it creates a huge table which makes it cumbersome to use. It might be better to add a scrollbox or something else to restrict the size of the table. Also the down arrow doesn't look clickable.

PerfektesChaos (talkcontribs)
  • On German Wikipedia, there aren’t any pages with massive number of errors.
    • If I limit box size and introduce scroll bars, the next one will argue that survey was lost and demands for larger boxes without scroll bar.
  • The arrows are language neutral.
    • They have at least an English tooltip and may be discovered incidently.
    • Once someone figured out the meaning of the arrows they won’t need further decoration.
    • This weekend I plan to update doc pages.
    • I want to keep decoration slim and performant and simple. If I put buttons inside, table rows will become higher, the entire table gets larger and someone will complain that already at an average number of errors the table is too large.

Generally thanks for nudging me to exploit the dsr infos and for your comments.

197.218.92.127 (talkcontribs)

This page (https://de.wikipedia.org/w/index.php?title=Benutzer:Snorky/Baustelle&oldid=63039709) for example has loads of lint errors in german wikipedia, probably others too. Anyway, it is mostly aesthetics, so it doesn't matter much in the grand scheme of things.

Yes, the problem is that sometimes the dsr thing doesn't really work well and doesn't highlight anything. If the arrow doesn't react to the click so the user may be confused about whether they didn't click it properly or there are no lint errors.

Anyway, these are all small things, the script is much better with this functionality.

PerfektesChaos (talkcontribs)

The mentioned page name reads as User construction area, of 2009, provided by a user who did not edit since 2008.

  • We won’t do syntax upgrading in “private user area”, nor on talk pages – users are responsible theirselves for their pages, and we are not maintaining discussions or private syntax experiments of a decade ago.
  • Content (articles) and active project pages are in rather good shape, and we try to crunch new high priority errors quickly and clean up less important article problems.

Once the meaning of the arrows has been understood, best from doc page, they do not need further decoration.

  • Currently less than a dozen registered people appear to use the tool globally, but an anonymous access might use Greasemonkey or browser script.
Anomalocaris (talkcontribs)

This is new to me. I read the 7-step instructions above. I use Mozilla Firefox.

  1. Go to wikipage with errors: OK
  2. Click edit / view source: OK
  3. Open browser console: pressed Ctrl+Shift+K and this worked.
  4. Paste the snippet above: Not sure where it goes; there's a command line at the bottom that seems to be intended for one line at a time, not entire scripts, but I pasted the whole script in.
  5. Wait a few seconds and click OK when the alert box shows up: Nothing happens

So, how do I enter and execute a script?

197.218.81.33 (talkcontribs)
The mentioned page name reads as User construction area, of 2009, provided by a user who did not edit since 2008

That makes sense. It was just a page picked at random.

So, how do I enter and execute a script?

Firefox has a security measure to prevent inexperienced users from causing issues to themselves. So there is a keyword that must be entered on the first use of the browser console. It appears right after you paste a snippet and press enter. It was something like "allow scripts" then enter. Can't quite remember the extract phrase.


Anyway, this was just a demo showing that it can work. It might be better to use PerfektesChaos's script which now also has the ability to jump to error, seems to have been specifically tested in firefox, and is way more user friendly (doesn't require the browser console). The instructions are on this page:

User:PerfektesChaos/js/lintHint

197.218.81.33 (talkcontribs)

Correction: "the exact phrase."