diff options
Diffstat (limited to 'js/logger-ui.js')
| -rw-r--r-- | js/logger-ui.js | 706 |
1 files changed, 359 insertions, 347 deletions
diff --git a/js/logger-ui.js b/js/logger-ui.js index 590e67b..aefb733 100644 --- a/js/logger-ui.js +++ b/js/logger-ui.js @@ -21,164 +21,157 @@ uMatrix Home: https://github.com/gorhill/sessbench */ -/* global uDom */ - 'use strict'; -/******************************************************************************/ - -(function() { - - /******************************************************************************/ - - var tbody = document.querySelector('#content tbody'); - var trJunkyard = []; - var tdJunkyard = []; - var firstVarDataCol = 2; // currently, column 2 (0-based index) - var lastVarDataIndex = 3; // currently, d0-d3 - var maxEntries = 0; - var noTabId = ''; - var allTabIds = {}; - var allTabIdsToken; - var ownerId = Date.now(); - - var emphasizeTemplate = document.querySelector('#emphasizeTemplate > span'); - var hiddenTemplate = document.querySelector('#hiddenTemplate > span'); - - var prettyRequestTypes = { +(function () { + let tbody = document.querySelector('#content tbody'); + let trJunkyard = []; + let tdJunkyard = []; + let firstVarDataCol = 2; // currently, column 2 (0-based index) + let lastVarDataIndex = 3; // currently, d0-d3 + let maxEntries = 0; + let noTabId = ''; + let allTabIds = {}; + let allTabIdsToken; + let ownerId = Date.now(); + + let emphasizeTemplate = document.querySelector('#emphasizeTemplate > span'); + let hiddenTemplate = document.querySelector('#hiddenTemplate > span'); + + let prettyRequestTypes = { 'main_frame': 'doc', 'stylesheet': 'css', 'sub_frame': 'frame', 'xmlhttprequest': 'xhr' }; - var dontEmphasizeSet = new Set([ + let dontEmphasizeSet = new Set([ 'COOKIE', 'CSP', 'REFERER' ]); - /******************************************************************************/ - // Adjust top padding of content table, to match that of toolbar height. - document.getElementById('content').style.setProperty( - 'margin-top', - document.getElementById('toolbar').clientHeight + 'px' - ); + document + .getElementById('content') + .style + .setProperty('margin-top', + document.getElementById('toolbar').clientHeight + 'px'); - /******************************************************************************/ - - var classNameFromTabId = function(tabId) { - if ( tabId === noTabId ) { + let classNameFromTabId = function (tabId) { + if (tabId === noTabId) { return 'tab_bts'; } - if ( tabId !== '' ) { + if (tabId !== '') { return 'tab_' + tabId; } return ''; }; - /******************************************************************************/ - // Emphasize hostname and cookie name. - var emphasizeCookie = function(s) { - var pnode = emphasizeHostname(s); - if ( pnode.childNodes.length !== 3 ) { + let emphasizeCookie = function (s) { + let pnode = emphasizeHostname(s); + if (pnode.childNodes.length !== 3) { return pnode; } - var prefix = '-cookie:'; - var text = pnode.childNodes[2].textContent; - var beg = text.indexOf(prefix); - if ( beg === -1 ) { + + let prefix = '-cookie:'; + let text = pnode.childNodes[2].textContent; + + let beg = text.indexOf(prefix); + if (beg === -1) { return pnode; } beg += prefix.length; - var end = text.indexOf('}', beg); - if ( end === -1 ) { + + let end = text.indexOf('}', beg); + if (end === -1) { return pnode; } - var cnode = emphasizeTemplate.cloneNode(true); + + let cnode = emphasizeTemplate.cloneNode(true); cnode.childNodes[0].textContent = text.slice(0, beg); cnode.childNodes[1].textContent = text.slice(beg, end); cnode.childNodes[2].textContent = text.slice(end); pnode.replaceChild(cnode.childNodes[0], pnode.childNodes[2]); pnode.appendChild(cnode.childNodes[0]); pnode.appendChild(cnode.childNodes[0]); + return pnode; }; - /******************************************************************************/ - // Emphasize hostname in URL. - var emphasizeHostname = function(url) { - var hnbeg = url.indexOf('://'); - if ( hnbeg === -1 ) { + let emphasizeHostname = function (url) { + let hnbeg = url.indexOf('://'); + if (hnbeg === -1) { return document.createTextNode(url); } hnbeg += 3; - var hnend = url.indexOf('/', hnbeg); - if ( hnend === -1 ) { + let hnend = url.indexOf('/', hnbeg); + if (hnend === -1) { hnend = url.slice(hnbeg).search(/\?#/); - if ( hnend !== -1 ) { + if (hnend !== -1) { hnend += hnbeg; } else { hnend = url.length; } } - var node = emphasizeTemplate.cloneNode(true); + let node = emphasizeTemplate.cloneNode(true); node.childNodes[0].textContent = url.slice(0, hnbeg); node.childNodes[1].textContent = url.slice(hnbeg, hnend); node.childNodes[2].textContent = url.slice(hnend); + return node; }; - /******************************************************************************/ - - var createCellAt = function(tr, index) { - var td = tr.cells[index]; - var mustAppend = !td; - if ( mustAppend ) { + let createCellAt = function (tr, index) { + let td = tr.cells[index]; + let mustAppend = !td; + if (mustAppend) { td = tdJunkyard.pop(); } - if ( td ) { + + if (td) { td.removeAttribute('colspan'); td.textContent = ''; } else { td = document.createElement('td'); } - if ( mustAppend ) { + if (mustAppend) { tr.appendChild(td); } + return td; }; - /******************************************************************************/ - - var createRow = function(layout) { - var tr = trJunkyard.pop(); - if ( tr ) { + let createRow = function (layout) { + let tr = trJunkyard.pop(); + if (tr) { tr.className = ''; } else { tr = document.createElement('tr'); } - for ( var index = 0; index < firstVarDataCol; index++ ) { + + let index; + for (index=0; index<firstVarDataCol; ++index) { createCellAt(tr, index); } - var i = 1, span = 1, td; + + let i = 1, span = 1, td; for (;;) { td = createCellAt(tr, index); - if ( i === lastVarDataIndex ) { + if (i === lastVarDataIndex) { break; } - if ( layout.charAt(i) !== '1' ) { + if (layout.charAt(i) !== '1') { span += 1; } else { - if ( span !== 1 ) { + if (span !== 1) { td.setAttribute('colspan', span); } index += 1; @@ -186,34 +179,30 @@ } i += 1; } - if ( span !== 1 ) { + + if (span !== 1) { td.setAttribute('colspan', span); } index += 1; - while ( (td = tr.cells[index]) ) { + while ((td = tr.cells[index])) { tdJunkyard.push(tr.removeChild(td)); } + return tr; }; - /******************************************************************************/ - - var createHiddenTextNode = function(text) { - var node = hiddenTemplate.cloneNode(true); + let createHiddenTextNode = function (text) { + let node = hiddenTemplate.cloneNode(true); node.textContent = text; return node; }; - /******************************************************************************/ - - var padTo2 = function(v) { + let padTo2 = function (v) { return v < 10 ? '0' + v : v; }; - /******************************************************************************/ - - var createGap = function(tabId, url) { - var tr = createRow('1'); + let createGap = function (tabId, url) { + let tr = createRow('1'); tr.classList.add('doc'); tr.classList.add('tab'); tr.classList.add('canMtx'); @@ -222,39 +211,41 @@ tbody.insertBefore(tr, tbody.firstChild); }; - /******************************************************************************/ - - var renderLogEntry = function(entry) { - var tr; - var fvdc = firstVarDataCol; + let renderLogEntry = function (entry) { + let tr; + let fvdc = firstVarDataCol; - switch ( entry.cat ) { + switch (entry.cat) { case 'error': case 'info': tr = createRow('1'); - if ( entry.d0 === 'cookie' ) { + if (entry.d0 === 'cookie') { tr.cells[fvdc].appendChild(emphasizeCookie(entry.d1)); } else { tr.cells[fvdc].textContent = entry.d0; } break; - case 'net': tr = createRow('111'); tr.classList.add('canMtx'); + // If the request is that of a root frame, insert a gap in the table // in order to visually separate entries for different documents. - if ( entry.d2 === 'doc' && entry.tab !== noTabId ) { + if (entry.d2 === 'doc' && entry.tab !== noTabId) { createGap(entry.tab, entry.d1); } - if ( entry.d3 ) { + + if (entry.d3) { tr.classList.add('blocked'); tr.cells[fvdc].textContent = '--'; } else { tr.cells[fvdc].textContent = ''; } - tr.cells[fvdc+1].textContent = (prettyRequestTypes[entry.d2] || entry.d2); - if ( dontEmphasizeSet.has(entry.d2) ) { + + tr.cells[fvdc+1].textContent = + (prettyRequestTypes[entry.d2] || entry.d2); + + if (dontEmphasizeSet.has(entry.d2)) { tr.cells[fvdc+2].textContent = entry.d1; } else if ( entry.d2 === 'cookie' ) { tr.cells[fvdc+2].appendChild(emphasizeCookie(entry.d1)); @@ -262,7 +253,6 @@ tr.cells[fvdc+2].appendChild(emphasizeHostname(entry.d1)); } break; - default: tr = createRow('1'); tr.cells[fvdc].textContent = entry.d0; @@ -270,20 +260,22 @@ } // Fields common to all rows. - var time = logDate; + let time = logDate; time.setTime(entry.tstamp - logDateTimezoneOffset); - tr.cells[0].textContent = padTo2(time.getUTCHours()) + ':' + - padTo2(time.getUTCMinutes()) + ':' + - padTo2(time.getSeconds()); + tr.cells[0].textContent = padTo2(time.getUTCHours()) + + ':' + + padTo2(time.getUTCMinutes()) + + ':' + + padTo2(time.getSeconds()); - if ( entry.tab ) { + if (entry.tab) { tr.classList.add('tab'); tr.classList.add(classNameFromTabId(entry.tab)); - if ( entry.tab === noTabId ) { + if (entry.tab === noTabId) { tr.cells[1].appendChild(createHiddenTextNode('bts')); } } - if ( entry.cat !== '' ) { + if (entry.cat !== '') { tr.classList.add('cat_' + entry.cat); } @@ -293,27 +285,25 @@ }; // Reuse date objects. - var logDate = new Date(), - logDateTimezoneOffset = logDate.getTimezoneOffset() * 60000; - - /******************************************************************************/ + let logDate = new Date(); + let logDateTimezoneOffset = logDate.getTimezoneOffset() * 60000; - var renderLogEntries = function(response) { - var entries = response.entries; - if ( entries.length === 0 ) { + let renderLogEntries = function (response) { + let entries = response.entries; + if (entries.length === 0) { return; } // Preserve scroll position - var height = tbody.offsetHeight; + let height = tbody.offsetHeight; - var tabIds = response.tabIds; - var n = entries.length; - var entry; - for ( var i = 0; i < n; i++ ) { + let tabIds = response.tabIds; + let n = entries.length; + let entry; + for (let i=0; i<n; ++i) { entry = entries[i]; // Unlikely, but it may happen - if ( entry.tab && tabIds.hasOwnProperty(entry.tab) === false ) { + if (entry.tab && tabIds.hasOwnProperty(entry.tab) === false) { continue; } renderLogEntry(entries[i]); @@ -324,85 +314,94 @@ // dynamically refreshed pages. truncateLog(maxEntries); - var yDelta = tbody.offsetHeight - height; - if ( yDelta === 0 ) { + let yDelta = tbody.offsetHeight - height; + if (yDelta === 0) { return; } // Chromium: // body.scrollTop = good value // body.parentNode.scrollTop = 0 - if ( document.body.scrollTop !== 0 ) { - document.body.scrollTop += yDelta; - return; - } + // if (document.body.scrollTop !== 0) { + // document.body.scrollTop += yDelta; + // return; + // } // Firefox: // body.scrollTop = 0 // body.parentNode.scrollTop = good value - var parentNode = document.body.parentNode; - if ( parentNode && parentNode.scrollTop !== 0 ) { + let parentNode = document.body.parentNode; + if (parentNode && parentNode.scrollTop !== 0) { parentNode.scrollTop += yDelta; } }; - /******************************************************************************/ + let synchronizeTabIds = function (newTabIds) { + let oldTabIds = allTabIds; + let autoDeleteVoidRows = + !!vAPI.localStorage.getItem('loggerAutoDeleteVoidRows'); + let rowVoided = false; + let trs; - var synchronizeTabIds = function(newTabIds) { - var oldTabIds = allTabIds; - var autoDeleteVoidRows = !!vAPI.localStorage.getItem('loggerAutoDeleteVoidRows'); - var rowVoided = false; - var trs; - for ( var tabId in oldTabIds ) { - if ( oldTabIds.hasOwnProperty(tabId) === false ) { + for (let tabId in oldTabIds) { + if (oldTabIds.hasOwnProperty(tabId) === false) { continue; } - if ( newTabIds.hasOwnProperty(tabId) ) { + if (newTabIds.hasOwnProperty(tabId)) { continue; } // Mark or remove voided rows trs = uDom('.tab_' + tabId); - if ( autoDeleteVoidRows ) { + + if (autoDeleteVoidRows) { toJunkyard(trs); } else { trs.removeClass('canMtx'); rowVoided = true; } + // Remove popup if it is currently bound to a removed tab. - if ( tabId === popupManager.tabId ) { + if (tabId === popupManager.tabId) { popupManager.toggleOff(); } } - var select = document.getElementById('pageSelector'); - var selectValue = select.value; - var tabIds = Object.keys(newTabIds).sort(function(a, b) { + let select = document.getElementById('pageSelector'); + let selectValue = select.value; + let tabIds = Object.keys(newTabIds).sort(function (a, b) { return newTabIds[a].localeCompare(newTabIds[b]); }); - var option; - for ( var i = 0, j = 2; i < tabIds.length; i++ ) { - tabId = tabIds[i]; - if ( tabId === noTabId ) { + + let i, j; + for (i=0, j=2; i<tabIds.length; ++i) { + let tabId = tabIds[i]; + if (tabId === noTabId) { continue; } - option = select.options[j]; + + let option = select.options[j]; j += 1; - if ( !option ) { + + if (!option) { option = document.createElement('option'); select.appendChild(option); } + option.textContent = newTabIds[tabId]; option.value = classNameFromTabId(tabId); - if ( option.value === selectValue ) { + + if (option.value === selectValue) { option.setAttribute('selected', ''); } else { option.removeAttribute('selected'); } } - while ( j < select.options.length ) { + + while (j < select.options.length) { select.removeChild(select.options[j]); } - if ( select.value !== selectValue ) { + + if (select.value !== selectValue) { select.selectedIndex = 0; select.value = ''; select.options[0].setAttribute('selected', ''); @@ -414,25 +413,22 @@ return rowVoided; }; - /******************************************************************************/ - - var truncateLog = function(size) { - if ( size === 0 ) { + let truncateLog = function (size) { + if (size === 0) { size = 5000; } - var tbody = document.querySelector('#content tbody'); + + let tbody = document.querySelector('#content tbody'); size = Math.min(size, 10000); - var tr; - while ( tbody.childElementCount > size ) { - tr = tbody.lastElementChild; + + while (tbody.childElementCount > size) { + let tr = tbody.lastElementChild; trJunkyard.push(tbody.removeChild(tr)); } }; - /******************************************************************************/ - - var onLogBufferRead = function(response) { - if ( !response || response.unavailable ) { + let onLogBufferRead = function (response) { + if (!response || response.unavailable) { readLogBufferAsync(); return; } @@ -441,101 +437,98 @@ noTabId = response.noTabId; // This may have changed meanwhile - if ( response.maxLoggedRequests !== maxEntries ) { + if (response.maxLoggedRequests !== maxEntries) { maxEntries = response.maxLoggedRequests; uDom('#maxEntries').val(maxEntries || ''); } // Neuter rows for which a tab does not exist anymore - var rowVoided = false; - if ( response.tabIdsToken !== allTabIdsToken ) { + let rowVoided = false; + if (response.tabIdsToken !== allTabIdsToken) { rowVoided = synchronizeTabIds(response.tabIds); allTabIdsToken = response.tabIdsToken; } renderLogEntries(response); - if ( rowVoided ) { - uDom('#clean').toggleClass( - 'disabled', - tbody.querySelector('tr.tab:not(.canMtx)') === null - ); + if (rowVoided) { + uDom('#clean') + .toggleClass('disabled', + tbody + .querySelector('tr.tab:not(.canMtx)') === null); } // Synchronize toolbar with content of log - uDom('#clear').toggleClass( - 'disabled', - tbody.querySelector('tr') === null - ); + uDom('#clear').toggleClass('disabled', + tbody.querySelector('tr') === null); readLogBufferAsync(); }; - /******************************************************************************/ + // This can be called only once, at init time. After that, this + // will be called automatically. If called after init time, this + // will be messy, and this would require a bit more code to ensure + // no multi time out events. - // This can be called only once, at init time. After that, this will be called - // automatically. If called after init time, this will be messy, and this would - // require a bit more code to ensure no multi time out events. + let readLogBuffer = function () { + if (ownerId === undefined) { + return; + } - var readLogBuffer = function() { - if ( ownerId === undefined ) { return; } - vAPI.messaging.send( - 'logger-ui.js', - { what: 'readMany', ownerId: ownerId }, - onLogBufferRead - ); + vAPI.messaging.send('logger-ui.js', { + what: 'readMany', + ownerId: ownerId + }, onLogBufferRead); }; - var readLogBufferAsync = function() { - if ( ownerId === undefined ) { return; } + let readLogBufferAsync = function () { + if (ownerId === undefined) { + return; + } vAPI.setTimeout(readLogBuffer, 1200); }; - /******************************************************************************/ + let pageSelectorChanged = function () { + let style = document.getElementById('tabFilterer'); + let tabClass = document.getElementById('pageSelector').value; + let sheet = style.sheet; - var pageSelectorChanged = function() { - var style = document.getElementById('tabFilterer'); - var tabClass = document.getElementById('pageSelector').value; - var sheet = style.sheet; - while ( sheet.cssRules.length !== 0 ) { + while (sheet.cssRules.length !== 0) { sheet.deleteRule(0); } - if ( tabClass !== '' ) { - sheet.insertRule( - '#content table tr:not(.' + tabClass + ') { display: none; }', - 0 - ); + + if (tabClass !== '') { + sheet.insertRule('#content table tr:not(.' + + tabClass + + ') { display: none; }', 0); } - uDom('#refresh').toggleClass( - 'disabled', - tabClass === '' || tabClass === 'tab_bts' - ); + uDom('#refresh').toggleClass('disabled', + tabClass === '' || tabClass === 'tab_bts'); }; - /******************************************************************************/ - - var refreshTab = function() { - var tabClass = document.getElementById('pageSelector').value; - var matches = tabClass.match(/^tab_(.+)$/); - if ( matches === null ) { + let refreshTab = function () { + let tabClass = document.getElementById('pageSelector').value; + let matches = tabClass.match(/^tab_(.+)$/); + if (matches === null) { return; } - if ( matches[1] === 'bts' ) { + + if (matches[1] === 'bts') { return; } - vAPI.messaging.send( - 'logger-ui.js', - { what: 'forceReloadTab', tabId: matches[1] } - ); + + vAPI.messaging.send('logger-ui.js', { + what: 'forceReloadTab', + tabId: matches[1] + }); }; - /******************************************************************************/ + let onMaxEntriesChanged = function () { + let raw = uDom(this).val(); - var onMaxEntriesChanged = function() { - var raw = uDom(this).val(); try { maxEntries = parseInt(raw, 10); - if ( isNaN(maxEntries) ) { + if (isNaN(maxEntries)) { maxEntries = 0; } } catch (e) { @@ -551,51 +544,55 @@ truncateLog(maxEntries); }; - /******************************************************************************/ - - var rowFilterer = (function() { - var filters = []; + let rowFilterer = (function () { + let filters = []; - var parseInput = function() { + let parseInput = function () { filters = []; - var rawPart, hardBeg, hardEnd; - var raw = uDom('#filterInput').val().trim(); - var rawParts = raw.split(/\s+/); - var reStr, reStrs = [], not = false; - var n = rawParts.length; - for ( var i = 0; i < n; i++ ) { + let rawPart, hardBeg, hardEnd; + let raw = uDom('#filterInput').val().trim(); + let rawParts = raw.split(/\s+/); + let reStr, reStrs = [], not = false; + let n = rawParts.length; + + for (let i=0; i<n; ++i) { rawPart = rawParts[i]; - if ( rawPart.charAt(0) === '!' ) { - if ( reStrs.length === 0 ) { + if (rawPart.charAt(0) === '!') { + if (reStrs.length === 0) { not = true; } rawPart = rawPart.slice(1); } + hardBeg = rawPart.charAt(0) === '|'; - if ( hardBeg ) { + if (hardBeg) { rawPart = rawPart.slice(1); } + hardEnd = rawPart.slice(-1) === '|'; - if ( hardEnd ) { + if (hardEnd) { rawPart = rawPart.slice(0, -1); } + if ( rawPart === '' ) { continue; } - // https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions + reStr = rawPart.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); - if ( hardBeg ) { + if (hardBeg) { reStr = '(?:^|\\s)' + reStr; } - if ( hardEnd ) { + if (hardEnd) { reStr += '(?:\\s|$)'; } + reStrs.push(reStr); - if ( i < (n - 1) && rawParts[i + 1] === '||' ) { + if (i < (n - 1) && rawParts[i + 1] === '||') { i += 1; continue; } + reStr = reStrs.length === 1 ? reStrs[0] : reStrs.join('|'); filters.push({ re: new RegExp(reStr, 'i'), @@ -606,77 +603,85 @@ } }; - var filterOne = function(tr, clean) { - var ff = filters; - var fcount = ff.length; - if ( fcount === 0 && clean === true ) { + let filterOne = function (tr, clean) { + let ff = filters; + let fcount = ff.length; + if (fcount === 0 && clean === true) { return; } - // do not filter out doc boundaries, they help separate important - // section of log. - var cl = tr.classList; - if ( cl.contains('doc') ) { + + // do not filter out doc boundaries, they help separate + // important section of log. + let cl = tr.classList; + if (cl.contains('doc')) { return; } - if ( fcount === 0 ) { + + if (fcount === 0) { cl.remove('f'); return; } - var cc = tr.cells; - var ccount = cc.length; - var hit, j, f; + + let cc = tr.cells; + let ccount = cc.length; + let hit, j, f; + // each filter expression must hit (implicit and-op) // if... // positive filter expression = there must one hit on any field // negative filter expression = there must be no hit on all fields - for ( var i = 0; i < fcount; i++ ) { + for (let i=0; i<fcount; ++i) { f = ff[i]; hit = !f.r; - for ( j = 0; j < ccount; j++ ) { - if ( f.re.test(cc[j].textContent) ) { + + for (j=0; j<ccount; ++j) { + if (f.re.test(cc[j].textContent)) { hit = f.r; break; } } - if ( !hit ) { + + if (!hit) { cl.add('f'); return; } } + cl.remove('f'); }; - var filterAll = function() { + let filterAll = function () { // Special case: no filter - if ( filters.length === 0 ) { + if (filters.length === 0) { uDom('#content tr').removeClass('f'); return; } - var tbody = document.querySelector('#content tbody'); - var rows = tbody.rows; - var i = rows.length; - while ( i-- ) { + + let tbody = document.querySelector('#content tbody'); + let rows = tbody.rows; + for (let i=rows.length-1; i>=0; --i) { filterOne(rows[i]); } }; - var onFilterChangedAsync = (function() { - var timer = null; - var commit = function() { + let onFilterChangedAsync = (function () { + let timer = null; + let commit = function () { timer = null; parseInput(); filterAll(); }; - return function() { - if ( timer !== null ) { + + return function () { + if (timer !== null) { clearTimeout(timer); } timer = vAPI.setTimeout(commit, 750); }; })(); - var onFilterButton = function() { - var cl = document.body.classList; + let onFilterButton = function () { + let cl = document.body.classList; cl.toggle('f', cl.contains('f') === false); }; @@ -685,113 +690,110 @@ return { filterOne: filterOne, - filterAll: filterAll + filterAll: filterAll, }; })(); - /******************************************************************************/ - - var toJunkyard = function(trs) { + let toJunkyard = function (trs) { trs.remove(); - var i = trs.length; - while ( i-- ) { + for (let i=trs.length-1; i>=0; --i) { trJunkyard.push(trs.nodeAt(i)); } }; - /******************************************************************************/ + let clearBuffer = function () { + let tbody = document.querySelector('#content tbody'); + let tr; - var clearBuffer = function() { - var tbody = document.querySelector('#content tbody'); - var tr; - while ( tbody.firstChild !== null ) { + while (tbody.firstChild !== null) { tr = tbody.lastElementChild; trJunkyard.push(tbody.removeChild(tr)); } + uDom('#clear').addClass('disabled'); uDom('#clean').addClass('disabled'); }; - /******************************************************************************/ - - var cleanBuffer = function() { - var rows = uDom('#content tr.tab:not(.canMtx)').remove(); - var i = rows.length; - while ( i-- ) { + let cleanBuffer = function () { + let rows = uDom('#content tr.tab:not(.canMtx)').remove(); + for (let i=rows.length-1; i>=0; --i) { trJunkyard.push(rows.nodeAt(i)); } uDom('#clean').addClass('disabled'); }; - /******************************************************************************/ - - var toggleCompactView = function() { + let toggleCompactView = function () { document.body.classList.toggle('compactView'); uDom('#content table .vExpanded').removeClass('vExpanded'); }; - var toggleCompactRow = function(ev) { + let toggleCompactRow = function (ev) { ev.target.parentElement.classList.toggle('vExpanded'); }; - /******************************************************************************/ - - var popupManager = (function() { - var realTabId = null; - var localTabId = null; - var container = null; - var popup = null; - var popupObserver = null; - var style = null; - var styleTemplate = [ + let popupManager = (function () { + let realTabId = null; + let localTabId = null; + let container = null; + let popup = null; + let popupObserver = null; + let style = null; + let styleTemplate = [ 'tr:not(.tab_{{tabId}}) {', 'cursor: not-allowed;', 'opacity: 0.2;', '}' ].join('\n'); - var resizePopup = function() { - if ( popup === null ) { + let resizePopup = function () { + if (popup === null) { return; } - var popupBody = popup.contentWindow.document.body; - if ( popupBody.clientWidth !== 0 && container.clientWidth !== popupBody.clientWidth ) { + + let popupBody = popup.contentWindow.document.body; + if (popupBody.clientWidth !== 0 + && container.clientWidth !== popupBody.clientWidth) { container.style.setProperty('width', popupBody.clientWidth + 'px'); } + popup.style.removeProperty('height'); - if ( popupBody.clientHeight !== 0 && popup.clientHeight !== popupBody.clientHeight ) { + if (popupBody.clientHeight !== 0 + && popup.clientHeight !== popupBody.clientHeight) { popup.style.setProperty('height', popupBody.clientHeight + 'px'); } - var ph = document.documentElement.clientHeight; - var crect = container.getBoundingClientRect(); - if ( crect.height > ph ) { + + let ph = document.documentElement.clientHeight; + let crect = container.getBoundingClientRect(); + if (crect.height > ph) { popup.style.setProperty('height', 'calc(' + ph + 'px - 1.8em)'); } + // Adjust width for presence/absence of vertical scroll bar which may // have appeared as a result of last operation. - var cw = container.clientWidth; - var dw = popup.contentWindow.document.documentElement.clientWidth; - if ( cw !== dw ) { + let cw = container.clientWidth; + let dw = popup.contentWindow.document.documentElement.clientWidth; + if (cw !== dw) { container.style.setProperty('width', (2 * cw - dw) + 'px'); } }; - var toggleSize = function() { + let toggleSize = function () { container.classList.toggle('hide'); }; - var onResizeRequested = function() { - var popupBody = popup.contentWindow.document.body; - if ( popupBody.hasAttribute('data-resize-popup') === false ) { + let onResizeRequested = function () { + let popupBody = popup.contentWindow.document.body; + if (popupBody.hasAttribute('data-resize-popup') === false) { return; } + popupBody.removeAttribute('data-resize-popup'); resizePopup(); }; - var onLoad = function() { + let onLoad = function () { resizePopup(); - var popupBody = popup.contentDocument.body; + let popupBody = popup.contentDocument.body; popupBody.removeAttribute('data-resize-popup'); popupObserver.observe(popupBody, { attributes: true, @@ -799,21 +801,26 @@ }); }; - var toggleOn = function(td) { - var tr = td.parentNode; - var matches = tr.className.match(/(?:^| )tab_([^ ]+)/); - if ( matches === null ) { + let toggleOn = function (td) { + let tr = td.parentNode; + let matches = tr.className.match(/(?:^| )tab_([^ ]+)/); + if (matches === null) { return; } + realTabId = localTabId = matches[1]; - if ( localTabId === 'bts' ) { + if (localTabId === 'bts') { realTabId = noTabId; } container = document.getElementById('popupContainer'); - container.querySelector('div > span:nth-of-type(1)').addEventListener('click', toggleSize); - container.querySelector('div > span:nth-of-type(2)').addEventListener('click', toggleOff); + container + .querySelector('div > span:nth-of-type(1)') + .addEventListener('click', toggleSize); + container + .querySelector('div > span:nth-of-type(2)') + .addEventListener('click', toggleOff); popup = document.createElement('iframe'); popup.addEventListener('load', onLoad); @@ -827,11 +834,15 @@ document.body.classList.add('popupOn'); }; - var toggleOff = function() { + let toggleOff = function () { document.body.classList.remove('popupOn'); - container.querySelector('div > span:nth-of-type(1)').removeEventListener('click', toggleSize); - container.querySelector('div > span:nth-of-type(2)').removeEventListener('click', toggleOff); + container + .querySelector('div > span:nth-of-type(1)') + .removeEventListener('click', toggleSize); + container + .querySelector('div > span:nth-of-type(2)') + .removeEventListener('click', toggleOff); container.classList.remove('hide'); popup.removeEventListener('load', onLoad); @@ -848,41 +859,45 @@ realTabId = null; }; - var exports = { - toggleOn: function(ev) { - if ( realTabId === null ) { + let exports = { + toggleOn: function (ev) { + if (realTabId === null) { toggleOn(ev.target); } }, - toggleOff: function() { - if ( realTabId !== null ) { + toggleOff: function () { + if (realTabId !== null) { toggleOff(); } } }; Object.defineProperty(exports, 'tabId', { - get: function() { return realTabId || 0; } + get: function () { + return realTabId || 0; + }, }); return exports; })(); - /******************************************************************************/ - - var grabView = function() { - if ( ownerId === undefined ) { + let grabView = function () { + if (ownerId === undefined) { ownerId = Date.now(); } readLogBufferAsync(); }; - var releaseView = function() { - if ( ownerId === undefined ) { return; } - vAPI.messaging.send( - 'logger-ui.js', - { what: 'releaseView', ownerId: ownerId } - ); + let releaseView = function () { + if (ownerId === undefined) { + return; + } + + vAPI.messaging.send('logger-ui.js', { + what: 'releaseView', + ownerId: ownerId + }); + ownerId = undefined; }; @@ -891,8 +906,6 @@ // https://bugzilla.mozilla.org/show_bug.cgi?id=1398625 window.addEventListener('beforeunload', releaseView); - /******************************************************************************/ - readLogBuffer(); uDom('#pageSelector').on('change', pageSelectorChanged); @@ -901,9 +914,8 @@ uDom('#clean').on('click', cleanBuffer); uDom('#clear').on('click', clearBuffer); uDom('#maxEntries').on('change', onMaxEntriesChanged); - uDom('#content table').on('click', 'tr > td:nth-of-type(1)', toggleCompactRow); - uDom('#content table').on('click', 'tr.canMtx > td:nth-of-type(2)', popupManager.toggleOn); - - /******************************************************************************/ - + uDom('#content table').on('click', 'tr > td:nth-of-type(1)', + toggleCompactRow); + uDom('#content table').on('click', 'tr.canMtx > td:nth-of-type(2)', + popupManager.toggleOn); })(); |