Pushloghtml Should Show More Than 10 Entries, Working on v0.1 Release

Well as I stated in a previous blog post, one of my tasks for v0.1 release would be to make pushloghtml show more than 10 entries. Jorendorff, recommended that it show all the entries at once. Now, I took that to mean all the entries should be loaded onto the page on pageLoad because I assumed that the total push log entries couldn’t be more than a couple of hundred. Well, it turns out the number can be in the thousands and trying to load all of that on pageLoad completely kills the load time. I realized right there and then that this method would not work. Something else needed to be done.

I talked to jorendorff and ted about this issue and they said that the pushlog shouldn’t load all the changesets at once. They want more entries to be loaded on scroll down. Seems like there was some what of a miscommunication that took place, but no worries this sort of stuff can happen.

Now, I have never implemented this kind of feature so I had to figure out how to do this. It was recommended that I use jQuery, which allows one to measure the height of the page and the window. Thus, by the doing the following one can know when the user reaches the bottom of the page…

1
2
3
4
5

$(window).scroll(function() {
  if($(window).scrollTop() == $(document).height() - $(window).height()) {
    renderMorePushLogResults();
  }
});

The function renderMorePushLogResults() should display the next set of changesets on the page. Now, what does this function do to retrieve the correct data? Well, currently I am using a python script that returns data in JSON format. To access the data and show it on the page I can make an XMLHttpRequest to the JSON script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function renderMorePushLogResults() {
  var pushCheckins = new XMLHttpRequest();
  pushCheckins.open('GET', '/json-pushes?startID=0&endID=20', true);
  pushCheckins.onreadystatechange = function() {
  if(pushCheckins.readyState == 4)  {
    if(pushCheckins.status != 404) {
      var pushData = new Function("return " + pushCheckins.responseText) ();
      var divScroll = document.createElement("div");
      for(var i = 1; i <= 20; i++) {
        divScroll.innerHTML += pushData[i].user + "n";
        document.getElementById("titlePush").appendChild(divScroll);
      }
    }
   }
  }
  pushCheckins.send(null);
}

The code above gets the data from the script, creates a div, loops through all the user names provided by the the python script and puts in the div. Then the div is appended to the table named “titlePush”. You can see the result that the above 2 functions give http://sidkalra.com/files/mercurial/xmlhttprequest_example.png

Now, obviously this is not what I want. There are some issues that need to resolved…

• The results are not formatted properly.
• The python script returns two more types of data, the date and the changesets which I have chosen not to show on the page for now. However, it doesn’t return the patch author name and commit message.
• The new changesets need to be printed on the page in the right sequence (by date) and the script doesn’t seem to return data sequentially.

As I make progress regarding the 3 issues I have pointed out above I will continually update this post so stay tuned!

Edit: Well I’ve been working on this the whole day. I tried using another script that ted recommended (http://hg.mozilla.org/mozilla-central/pushlog?fromchange=aa4b3566d739) since I was having issues with the first one (see above). The following is the code…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

function getMoreChangesets() {
  try {
    var pushCheckins = new XMLHttpRequest();
  } catch(e) {
      alert("error with XMLHttpRequest object");
    }
  pushCheckins.onreadystatechange = function() {
    if(pushCheckins.readyState == 4)  {
      if(pushCheckins.status == 200) {
        var pushData = pushCheckins.responseXML;
 
        var element = "";
        for(var i = 1; i <= 10; i++) {
          element += pushData.getElementsByTagName('tr')[i].getElementsByTagName('i')[0].firstChild.nodeValue; //Read the first element
          element += ' | ' + pushData.getElementsByTagName('tr')[i].childNodes[1].firstChild.nodeValue;
          element += ' | ' + pushData.getElementsByTagName('tr')[i].getElementsByTagName('cite')[0].firstChild.nodeValue;
          element += ' | ' + pushData.getElementsByTagName('tr')[i].childNodes[2].firstChild.lastChild.nodeValue;
        }
 
        var divScroll = document.createElement("div");
        divScroll.innerHTML += element;
        document.getElementById("titlePush").appendChild(divScroll);
      } else {
          alert("Error with xml" + pushCheckins.status);
        }
    }
  };
  pushCheckins.open('GET', '/pushlog?fromchange=aa4b3566d739', true);
  pushCheckins.overrideMimeType('text/xml');
  pushCheckins.send(null);
}

The above code gives the following result on scroll down…

http://sidkalra.com/files/mercurial/xmlScript.png

Since this new script returns XML I am using pushCheckins.responseXML to retrieve the XML data. Then I can access all the data I want and push it on the screen (see line 14-18). Now, I still get the same issue of the formatting not working properly but at least this script provides with me with more data that I need, although it doesn’t give me everything like the email address of the author.

Edit 2: I’ve continued to work on this issue and I’ve come up with a new iteration of code that provides some better formatting for the output i.e. everything is not a blob of unreadable text like my above example. But the new changesets still don’t match the styles and formatting of the original ones. The following is the code…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function getMoreChangesets() {
  try {
    var pushCheckins = new XMLHttpRequest();
  } catch(e) {
      alert("error with XMLHttpRequest object");
    }
  pushCheckins.onreadystatechange = function() {
    if(pushCheckins.readyState == 4)  {
      if(pushCheckins.status == 200) {
        var pushData = pushCheckins.responseXML;
 
        var element = "";
        var divScroll = document.createElement("table");
        var test = pushData.getElementsByTagName('tr');
        for(var i = 1; i <= 10; i++) {  
          element += '<tr><td>' + pushData.getElementsByTagName('tr')[i].getElementsByTagName('i')[0].firstChild.nodeValue + '</td>'; //Read the first element
          element += '<td>' + pushData.getElementsByTagName('tr')[i].childNodes[1].firstChild.nodeValue + '</td>';
          element += '<td>' + pushData.getElementsByTagName('tr')[i].getElementsByTagName('cite')[0].firstChild.nodeValue + '</td>';
          element += '<td>' + pushData.getElementsByTagName('tr')[i].childNodes[2].firstChild.lastChild.nodeValue + '</td>';
          element += '</tr>';
 
          divScroll.innerHTML += element;
        }
        divScroll.innerHTML += "</table>";
        document.getElementById("newItems").appendChild(divScroll);
      } else {
          alert("Error with xml" + pushCheckins.status);
        }
    }
  };
  pushCheckins.open('GET', '/pushlog?fromchange=aa4b3566d739', true);
  pushCheckins.overrideMimeType('text/xml');
  pushCheckins.send(null);
}

You can see the result of the above code at http://sidkalra.com/files/mercurial/formattedXmlScript.png

As you can see from the example the formatting and readability has become much better but I am getting some repetition. I don’t quite know why that is happening. The problem is obviously between lines 16 and 20. Keep watching for more updates as I figure this out.