diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index a2170377b..5cc760959 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -254,10 +254,12 @@ body #netInspector td { } #netInspector tr td:nth-of-type(5) { cursor: default; + overflow: visible !important; position: relative; text-align: center; } -#netInspector tr.tab_bts td:nth-of-type(5)::after { +/* visual for tabless network requests */ +#netInspector tr.tab_bts td:nth-of-type(5)::before { border: 5px solid #bbb; border-bottom: 0; border-top: 0; @@ -270,6 +272,19 @@ body #netInspector td { width: calc(100% - 10px); z-index: -1; } +/* visual for quick tooltip */ +#netInspector tr td[data-parties]:nth-of-type(5):hover::after { + background-color: #feb; + border: 1px outset #feb; + color: black; + content: attr(data-parties); + left: 100%; + padding: 0.4em 0.6em; + position: absolute; + text-align: left; + top: -50%; + white-space: pre; +} #netInspector tr td:nth-of-type(6) { text-align: right; } diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 96421a5d7..c45e2dffb 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -165,7 +165,7 @@ const createCellAt = function(tr, index) { } if ( td ) { td.removeAttribute('colspan'); - td.removeAttribute('title'); + td.removeAttribute('data-parties'); td.textContent = ''; } else { td = document.createElement('td'); @@ -186,7 +186,6 @@ var createRow = function(layout) { tr.removeAttribute('data-dochn'); tr.removeAttribute('data-filter'); tr.removeAttribute('data-tabid'); - tr.removeAttribute('title'); } else { tr = document.createElement('tr'); } @@ -318,14 +317,14 @@ var renderNetLogEntry = function(tr, details) { } } td.textContent = text; - text = details.domain; - if ( details.docDomain ) { - text = details.docDomain + ' \u21d2 ' + text; + let indent = '\t'; + text = details.tabDomain; + if ( details.docDomain !== details.tabDomain ) { + text += ` \u21d2\n\t${details.docDomain}`; + indent = '\t\t'; } - if ( details.tabDomain && details.tabDomain !== details.docDomain ) { - text = details.tabDomain + ' \u21d2 ' + text; - } - td.setAttribute('title', text); + text += ` \u21d2\n${indent}${details.domain}`; + td.setAttribute('data-parties', text); } tr.cells[5].textContent = (prettyRequestTypes[type] || type);