Bug 325 – Implement messages inline with source

NOTE: The current preferred location for bug reports is the GitHub issue tracker.

Bug 325 - Implement messages inline with source


Summary:	Implement messages inline with source

Status:	RESOLVED INTENTIONAL

Product:	Validator.nu
Classification:	Unclassified
Component:	Browser-based UI
Version:	HEAD
Hardware:	All All

Importance:	P2 enhancement
Assigned To:	Nobody

URL:

Depends on:
Blocks:
	Show dependency tree / graph

Reported:	2008-11-19 13:12 CET by Simon Pieters
Modified:	2015-04-01 09:10 CEST (History)
CC List:	0 users

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

Description Simon Pieters 2008-11-19 13:12:07 CET

# [11:57] <zcorpan> hsivonen_: here's a feature request that i tried to implement myself but gave up before having a proof of concept impl...  
# [11:57] <zcorpan> hsivonen_: have the messages inline with the source  
# [11:59] <zcorpan> hsivonen_: so that you get e.g.  
# [11:59] <zcorpan> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> â†©  
# [11:59] <zcorpan> 1. Error: Almost standards mode doctype. Expected <!DOCTYPE html>.  
# [11:59] <zcorpan> <html>â†©  
# [11:59] <zcorpan> <head>â†©  
# [11:59] <zcorpan> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">â†©  
# [11:59] <zcorpan> 2. Error: The internal character encoding declaration must be the first child of the head element.  
# [11:59] <zcorpan> etc  
# [12:00] <zcorpan> if there are multiple errors on the same line you have multiple messages for that line  
# [12:02] <zcorpan> i tried implementing it by walking unsortedOl and doing a regexp on the location para to get the line and then inserting the message into the line-minus-one-th child of the source ol

Comment 1 Simon Pieters 2008-11-19 14:07:02 CET

Hmm, maybe it would be better to put the message immediately after the highlighted part instead of after the whole line, considering cases when there are many different messages for a single line.

Comment 2 Simon Pieters 2008-11-19 14:35:50 CET

Actually a better way to implement this is probably use the location links and their href to get the target.

javascript:(function(){
var message;
var dl;
var target;
for (var i = 0; i < document.links.length; ++i) {
  if (document.links[i].getAttribute('href').charAt(0) == '#') {
    message = document.links[i].parentNode.previousSibling.cloneNode(true);
    dl = document.links[i].parentNode.parentNode.getElementsByTagName('dl')[0];
    target = document.getElementById(document.links[i].getAttribute('href').substr(1));
    target.parentNode.insertBefore(message, target.nextSibling);
    if (dl) {
      target.parentNode.insertBefore(dl, message.nextSibling);
    }
  }
}
var style = document.createElement('style');
style.textContent = '.source p, .source dl { white-space:normal; font-family:sans-serif; margin:1em; padding-left:1em }';
document.documentElement.firstChild.appendChild(style);
})()

(The above results in non-conforming HTML and undesired results when there are nested <b>s in .source, so I guess it'll be a bit more complicated... Also you might want to preserve the messages' numbers.)

Comment 3 Simon Pieters 2008-11-20 17:05:33 CET

javascript:(function(){
var messages = document.getElementsByTagName('ol')[0].childNodes;
var message;
var current;
var afterMessage;
var ol;
for (var i = 0; i < messages.length; ++i) {
  messages[i].value = i + 1;
  if (messages[i].childNodes.length >= 2 &&
      messages[i].childNodes[1].firstChild instanceof HTMLAnchorElement) {
    message = messages[i].cloneNode(true);
    messages[i].style.display = 'none';
    var id = message.childNodes[1].firstChild.href.split("#")[1];
    var n = message.firstChild;
    while (n = n.nextSibling) {
      if (n.className == 'location' || n.className == 'extract') {
        message.removeChild(n);
        n = message.firstChild;
      }
    }
    var target = document.getElementById(id);
    if (target.getAttribute('data-marked') == 'true') {
      ol.appendChild(message);
      continue;
    }
    current = target;
    while (current = current.parentNode) {
      afterMessage = current.cloneNode(false);
      current.removeAttribute('id');
      current.parentNode.insertBefore(afterMessage, current.nextSibling);
      while (target.nextSibling) {
        afterMessage.appendChild(target.nextSibling);
      }
      if (current.parentNode instanceof HTMLLIElement) {
        break;
      }
    }
    ol = document.createElement('ol');
    ol.appendChild(message);
    current.parentNode.insertBefore(ol, current.nextSibling);
    target.setAttribute('data-marked', 'true');
  }
}
var style = document.createElement('style');
style.textContent = '.source ol { display:table; margin:1em } .source ol li { padding:.5em }';
document.documentElement.firstChild.appendChild(style);
})()


This doesn't work correctly for documents like:

   <meta foo="&bar">baz

The intent was to get something like:


<meta foo="&

   2. Error: & did not start a character reference. (& probably should have been escaped as &amp;.)

bar">

   3. Error: Start tag seen without seeing a doctype first. Expected e.g. <!DOCTYPE html>.
   etc.

Comment 4 Simon Pieters 2008-11-27 21:24:42 CET

Maybe it would be nice to also inline the Image Report?