NOTE: The current preferred location for bug reports is the GitHub issue tracker.
Bug 325 - Implement messages inline with source
Implement messages inline with source
Status: RESOLVED INTENTIONAL
Product: Validator.nu
Classification: Unclassified
Component: Browser-based UI
HEAD
All All
: P2 enhancement
Assigned To: Nobody
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2008-11-19 13:12 CET by Simon Pieters
Modified: 2015-04-01 09:10 CEST (History)
0 users

See Also:


Attachments

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?