|
106
|
1 'use strict';
|
|
|
2
|
|
|
3 var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
|
|
|
4
|
|
|
5 if(!Lightstring)
|
|
|
6 var Lightstring = {};
|
|
|
7
|
|
|
8 Lightstring.console = {
|
|
|
9 invertedScroll: true,
|
|
|
10 log: function(aLog) {
|
|
|
11 var stanza = vkbeautify.xml(aLog.data, 2, ' ');
|
|
|
12 var entry = document.createElement('div');
|
|
|
13 entry.classList.add('entry');
|
|
|
14 entry.classList.add(aLog.dir);
|
|
|
15 var header = document.createElement('header');
|
|
|
16 //FIXME date? should come from the origin?
|
|
|
17 header.textContent = aLog.dir + ': ';
|
|
|
18 entry.appendChild(header)
|
|
|
19 var pre = document.createElement('pre');
|
|
|
20 pre.textContent = stanza;
|
|
|
21 entry.appendChild(pre);
|
|
|
22 var entriesEl = document.querySelector('#entries')
|
|
|
23 entriesEl.appendChild(entry);
|
|
|
24 },
|
|
|
25 filter: function(aFilter) {
|
|
|
26 var entries = document.querySelectorAll('.entry pre');
|
|
|
27 for (var i = 0, length = entries.length; i < length; i++) {
|
|
|
28 var entry = entries[i];
|
|
|
29 if (!entry.textContent.match(aFilter))
|
|
|
30 entry.parentNode.hidden = true;
|
|
|
31 else
|
|
|
32 entry.parentNode.hidden = false;
|
|
|
33
|
|
|
34 //FIXME use the Mutation Observer? get back to the previous scroll state?
|
|
|
35 this.scrollToBottom();
|
|
|
36 }
|
|
|
37 },
|
|
|
38 send: function(aData) {
|
|
|
39 Lightstring.console.source.postMessage({
|
|
|
40 'send': aData}, document.location.protocol + '//' + document.location.host);
|
|
|
41 },
|
|
|
42 scrollToBottom: function() {
|
|
|
43 this.entriesEl.scrollTop = (this.entriesEl.scrollHeight - this.entriesEl.clientHeight);
|
|
|
44 }
|
|
|
45 };
|
|
|
46
|
|
|
47 (function() {
|
|
|
48 document.addEventListener('DOMContentLoaded', function() {
|
|
|
49
|
|
|
50 var entriesEl = document.getElementById('entries');
|
|
|
51 entriesEl.addEventListener('scroll', function(e) {
|
|
|
52 if (entriesEl.scrollTop === (entriesEl.scrollHeight - entriesEl.clientHeight))
|
|
|
53 Lightstring.console.invertedScroll = true;
|
|
|
54 else
|
|
|
55 Lightstring.console.invertedScroll = false;
|
|
|
56 })
|
|
|
57
|
|
|
58 new MutationObserver(function(mutations) {
|
|
|
59 if(Lightstring.console.invertedScroll === true)
|
|
|
60 Lightstring.console.scrollToBottom();
|
|
|
61 }).observe(entriesEl, {
|
|
|
62 childList: true,
|
|
|
63 // attributes: false,
|
|
|
64 // characterData: false
|
|
|
65 });
|
|
|
66
|
|
|
67 Lightstring.console.entriesEl = entriesEl;
|
|
|
68 if (Lightstring.console.invertedScroll)
|
|
|
69 Lightstring.console.scrollToBottom();
|
|
|
70
|
|
|
71 window.addEventListener("message", function(e) {
|
|
|
72 if(!Lightstring.console.source)
|
|
|
73 Lightstring.console.source = e.source;
|
|
|
74
|
|
|
75 Lightstring.console.log(e.data);
|
|
|
76 }, false);
|
|
|
77
|
|
|
78 document.getElementById('input').addEventListener('submit', function(e) {
|
|
|
79 e.preventDefault();
|
|
|
80 Lightstring.console.send(this.elements['field'].value)
|
|
|
81 });
|
|
|
82 document.getElementById('clear').addEventListener('click', function(e) {
|
|
|
83 Lightstring.console.entriesEl.innerHTML = '';
|
|
|
84 });
|
|
|
85 //FIXME allow xpath, xquery, E4X, whatever XML query syntax
|
|
|
86 document.getElementById('filter').addEventListener('input', function(e) {
|
|
|
87 Lightstring.console.filter(this.value);
|
|
|
88 });
|
|
|
89 document.getElementById('input').addEventListener('keypress', function(e) {
|
|
|
90 if (e.keyCode === 13) {
|
|
|
91 if (e.shiftKey) {
|
|
|
92 e.preventDefault();
|
|
|
93 var event = document.createEvent('Event');
|
|
|
94 event.initEvent('submit', true, true);
|
|
|
95 this.dispatchEvent(event);
|
|
|
96 }
|
|
|
97 }
|
|
|
98 });
|
|
|
99 });
|
|
|
100 })(); |
