diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 07c262708..a04589d29 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -543,12 +543,72 @@ "message":"Current tab", "description":"Appears in the logger's tab selector" }, + "loggerReloadTip":{ + "message":"Reload the tab content", + "description":"Tooltip for the reload button in the logger page" + }, + "loggerDomInspectorTip":{ + "message":"Toggle the DOM inspector", + "description":"Tooltip for the DOM inspector button in the logger page" + }, + "loggerPopupPanelTip":{ + "message":"Toggle the popup panel", + "description":"Tooltip for the popup panel button in the logger page" + }, + "loggerInfoTip":{ + "message":"uBlock Origin wiki: The logger", + "description":"Tooltip for the top-right info label in the logger page" + }, + "loggerClearTip":{ + "message":"Clear logger", + "description":"Tooltip for the eraser in the logger page" + }, + "loggerPauseTip":{ + "message":"Pause logger (discard all incoming data)", + "description":"Tooltip for the pause button in the logger page" + }, + "loggerUnpauseTip":{ + "message":"Unpause logger", + "description":"Tooltip for the play button in the logger page" + }, + "loggerRowFiltererButtonTip":{ + "message":"Toggle logger filtering", + "description":"Tooltip for the row filterer button in the logger page" + }, "logFilterPrompt":{ - "message":"filter log entries", - "description": "English: filter log entries" + "message":"filter logger content", + "description": "Placeholder string for logger output filtering input field" + }, + "loggerRowFiltererBuiltinTip":{ + "message":"Logger filtering options", + "description":"Tooltip for the button to bring up logger output filtering options" + }, + "loggerRowFiltererBuiltinNot":{ + "message":"Not", + "description":"A keyword in the built-in row filtering expression" + }, + "loggerRowFiltererBuiltinEventful":{ + "message":"eventful", + "description":"A keyword in the built-in row filtering expression" + }, + "loggerRowFiltererBuiltinBlocked":{ + "message":"blocked", + "description":"A keyword in the built-in row filtering expression" + }, + "loggerRowFiltererBuiltinAllowed":{ + "message":"allowed", + "description":"A keyword in the built-in row filtering expression" + }, + "loggerRowFiltererBuiltin1p":{ + "message":"1st-party", + "description":"A keyword in the built-in row filtering expression" + }, + "loggerRowFiltererBuiltin3p":{ + "message":"3rd-party", + "description":"A keyword in the built-in row filtering expression" }, "logMaxEntriesTip":{ - "message":"Maximum number of log entries", + "message":"Maximum number of logger entries", "description":"Tooltip informaing that the input field is to set the maximum number of entries in the log" }, "loggerURLFilteringContextLabel":{ diff --git a/src/css/logger-ui-inspector.css b/src/css/logger-ui-inspector.css index 2c24aba8b..f3afd47a6 100644 --- a/src/css/logger-ui-inspector.css +++ b/src/css/logger-ui-inspector.css @@ -2,7 +2,7 @@ display: none; } #inspectors.dom #domInspector { - display: block; + display: flex; } #domInspector .permatoolbar .highlightMode.invert { transform: rotate(180deg); diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index a4decfb16..1764d9e4c 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -2,9 +2,13 @@ body { background-color: white; border: 0; color: black; + display: flex; + flex-direction: column; + height: 100vh; margin: 0; overflow: hidden; padding: 0; + width: 100vw; } input:focus { background-color: #ffe; @@ -20,31 +24,18 @@ textarea { border: 0; box-sizing: border-box; display: flex; + flex-shrink: 0; font-size: 120%; - left: 0; margin: 0; padding: 0.25em 0.5em; - position: absolute; - top: 0; - z-index: 10; } .permatoolbar .button { - align-items: center; - background-color: white; - border: none; - box-sizing: border-box; cursor: pointer; - display: inline-flex; font-size: 150%; - margin: 0; padding: 0.25em; } -.permatoolbar .button.disabled { - opacity: 0.2; - pointer-events: none; - } .permatoolbar .button.active { - font-weight: bold; + fill: #5F9EA0; } .permatoolbar .button:hover { background-color: #eee; @@ -54,56 +45,72 @@ textarea { padding: 0.25em 0; width: 28em; } +#showpopup { + display: inline-flex; + align-items: center; + } #showpopup img { filter: grayscale(100%); height: auto; width: 1em; } +#info { + fill: #ccc; + padding-left: 0.5em; + padding-right: 0.5em; + position: absolute; + right: 0; + } +#info:hover { + fill: #000; + } +@media (max-width: 600px) { + #info { + display: none; + } + } /* https://github.com/gorhill/uBlock/issues/3293 => https://devhints.io/css-system-font-stack */ #inspectors { - bottom: 0; + flex-grow: 1; font-family: "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-size: 13px; - position: absolute; - top: 0; - width: 100%; } .inspector { border-top: 1px solid #ccc; - bottom: 0; - position: absolute; - top: 0; - width: 100%; + display: flex; + flex-direction: column; } .vscrollable { - bottom: 0; + flex-grow: 1; overflow-x: hidden; overflow-y: auto; - position: absolute; - top: 0; - width: 100%; } -.vCompactToggler.button:before { - content: '\f102'; +.vCompact .vCompactToggler.button { + transform: scaleY(-1) } -.vCompact .vCompactToggler.button:before { - content: '\f103'; - } -.hCompactToggler.button:before { - content: '\f100'; - } -.hCompact .hCompactToggler.button:before { - content: '\f101'; +.hCompact .hCompactToggler.button { + transform: scaleX(-1) } #inspectors.dom #netInspector { display: none; } + +#netInspector #pause > span:last-of-type { + display: none; +} +#netInspector.paused #pause > span:first-of-type { + display: none; +} +#netInspector.paused #pause > span:last-of-type { + display: inline-flex; + fill: #5F9EA0; +} #netInspector #filterExprGroup { display: flex; margin: 0 1em; @@ -124,11 +131,11 @@ textarea { #netInspector #maxEntries { margin: 0 2em; } -#netInspector #filterExprButton::before { - content: '\f078'; +#netInspector #filterExprButton { + transform: scaleY(-1); } -#netInspector #filterExprButton.expanded::before { - content: '\f077'; +#netInspector #filterExprButton.expanded { + transform: scaleY(1); } #netInspector #filterExprPicker { background-color: white; @@ -138,10 +145,12 @@ textarea { flex-direction: column; font-size: small; margin-top: 0.2em; + right: 0; top: 100%; + z-index: 100; } #netInspector #filterExprButton.on { - color: #5F9EA0; + fill: #5F9EA0; } #netInspector #filterExprButton.expanded ~ #filterExprPicker { display: flex; @@ -509,8 +518,12 @@ body[dir="rtl"] #netFilteringDialog .dialog > div.headers > span.tools { #netFilteringDialog .dialog > div.headers > span.tools > span { cursor: pointer; font-size: 1.2em; + padding: 0.2em 0.4em; text-align: center; } +#netFilteringDialog .dialog > div.headers > span.tools > span:hover { + background-color: #eee; + } #netFilteringDialog .dialog > div.containers { height: 40vh; overflow: hidden; @@ -530,9 +543,9 @@ body[dir="rtl"] #netFilteringDialog .dialog > div.headers > span.tools { background-color: #ffe; border: 1px solid #ddc; border-radius: 4px; - color: #888; + fill: #888; cursor: pointer; - font-size: 1.8em; + font-size: 1.6em; margin: 0.1em; padding: 0.25em 0.5em; visibility: hidden; @@ -541,7 +554,7 @@ body.dirty #netFilteringDialog .dialog > div.containers > div.dynamic > table.to visibility: visible; } #netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar #saveRules:hover { - color: black; + fill: black; } #netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar tr.entry { display: none; @@ -662,16 +675,21 @@ body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.e #filterFinderDialog .dialog ul { font-size: larger; } +#filterFinderDialog .filterFinderListEntry { + align-items: center; + display: flex; + } #filterFinderDialog .filterFinderListEntry a { text-decoration: none; } -#filterFinderDialog .filterFinderListEntry a.fa { - opacity: 0.8; +#filterFinderDialog .filterFinderListEntry a.fa-icon { + margin: 0 0.5em; + opacity: 0.6; } -#filterFinderDialog .filterFinderListEntry a.fa:hover { +#filterFinderDialog .filterFinderListEntry a.fa-icon:hover { opacity: 1; } -#filterFinderDialog .filterFinderListEntry a[href=""]:nth-of-type(2) { +#filterFinderDialog .filterFinderListEntry a.fa-icon[href=""] { display: none; } #filterFinderDialog .dialog > *:first-child { diff --git a/src/js/logger-ui-inspector.js b/src/js/logger-ui-inspector.js index 4103ba2cb..28c21559f 100644 --- a/src/js/logger-ui-inspector.js +++ b/src/js/logger-ui-inspector.js @@ -617,14 +617,14 @@ var toggleHCompactView = function() { }; /******************************************************************************/ - +/* var toggleHighlightMode = function() { messaging.sendTo(inspectorConnectionId, { what: 'highlightMode', invert: uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').classList.toggle('invert') }); }; - +*/ /******************************************************************************/ var revert = function() { @@ -644,7 +644,7 @@ const toggleOn = function() { domTree.addEventListener('mouseover', onMouseOver, true); uDom.nodeFromSelector('#domInspector .vCompactToggler').addEventListener('click', toggleVCompactView); uDom.nodeFromSelector('#domInspector .hCompactToggler').addEventListener('click', toggleHCompactView); - uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').addEventListener('click', toggleHighlightMode); + //uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').addEventListener('click', toggleHighlightMode); uDom.nodeFromSelector('#domInspector .permatoolbar .revert').addEventListener('click', revert); uDom.nodeFromSelector('#domInspector .permatoolbar .commit').addEventListener('click', startDialog); injectInspector(); @@ -662,7 +662,7 @@ const toggleOff = function() { domTree.removeEventListener('mouseover', onMouseOver, true); uDom.nodeFromSelector('#domInspector .vCompactToggler').removeEventListener('click', toggleVCompactView); uDom.nodeFromSelector('#domInspector .hCompactToggler').removeEventListener('click', toggleHCompactView); - uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').removeEventListener('click', toggleHighlightMode); + //uDom.nodeFromSelector('#domInspector .permatoolbar .highlightMode').removeEventListener('click', toggleHighlightMode); uDom.nodeFromSelector('#domInspector .permatoolbar .revert').removeEventListener('click', revert); uDom.nodeFromSelector('#domInspector .permatoolbar .commit').removeEventListener('click', startDialog); inspectedTabId = 0; @@ -676,6 +676,7 @@ const toggle = function() { } else { toggleOff(); } + logger.resize(); }; /******************************************************************************/ diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 78332079b..3c98275f5 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -32,7 +32,9 @@ const messaging = vAPI.messaging; const logger = self.logger = { ownerId: Date.now() }; let popupLoggerBox; +let popupLoggerTooltips; let activeTabId; +let netInspectorPaused = false; /******************************************************************************/ @@ -63,43 +65,29 @@ const tabIdFromPageSelector = logger.tabIdFromPageSelector = function() { /******************************************************************************/ /******************************************************************************/ -// Adjust top padding of content table, to match that of toolbar height. +const tbody = document.querySelector('#netInspector tbody'); +const trJunkyard = []; +const tdJunkyard = []; +const firstVarDataCol = 1; +const lastVarDataIndex = 6; +const reRFC3986 = /^([^:\/?#]+:)?(\/\/[^\/?#]*)?([^?#]*)(\?[^#]*)?(#.*)?/; +const netFilteringDialog = uDom.nodeFromId('netFilteringDialog'); -(function() { - var toolbar = uDom.nodeFromSelector('body > .permatoolbar'); - var size = toolbar.clientHeight + 'px'; - uDom('#inspectors').css('top', size); - uDom('.vscrollable').css('padding-top', size); -})(); - -/******************************************************************************/ - -var tbody = document.querySelector('#netInspector tbody'); -var trJunkyard = []; -var tdJunkyard = []; -var firstVarDataCol = 1; -var lastVarDataIndex = 6; -var maxEntries = 5000; -var allTabIds = new Map(); -var allTabIdsToken; -var reRFC3986 = /^([^:\/?#]+:)?(\/\/[^\/?#]*)?([^?#]*)(\?[^#]*)?(#.*)?/; -var netFilteringDialog = uDom.nodeFromId('netFilteringDialog'); - -var prettyRequestTypes = { +const prettyRequestTypes = { 'main_frame': 'doc', 'stylesheet': 'css', 'sub_frame': 'frame', 'xmlhttprequest': 'xhr' }; -var uglyRequestTypes = { +const uglyRequestTypes = { 'doc': 'main_frame', 'css': 'stylesheet', 'frame': 'sub_frame', 'xhr': 'xmlhttprequest' }; -var staticFilterTypes = { +const staticFilterTypes = { 'beacon': 'other', 'doc': 'document', 'css': 'stylesheet', @@ -109,6 +97,10 @@ var staticFilterTypes = { 'xhr': 'xmlhttprequest' }; +let maxEntries = 5000; +let allTabIds = new Map(); +let allTabIdsToken; + /******************************************************************************/ var classNameFromTabId = function(tabId) { @@ -518,6 +510,17 @@ const onLogBufferRead = function(response) { return; } + // Disable tooltips? + if ( + popupLoggerTooltips === undefined && + response.tooltips !== undefined + ) { + popupLoggerTooltips = response.tooltips; + if ( popupLoggerTooltips === false ) { + uDom('[data-i18n-title]').attr('title', ''); + } + } + // Tab id of currently active tab let activeTabIdChanged = false; if ( response.activeTabId ) { @@ -546,7 +549,9 @@ const onLogBufferRead = function(response) { pageSelectorFromURLHash(); } - renderLogEntries(response); + if ( netInspectorPaused === false ) { + renderLogEntries(response); + } if ( rowVoided ) { uDom('#clean').toggleClass( @@ -1639,18 +1644,26 @@ var cleanBuffer = function() { /******************************************************************************/ -var toggleVCompactView = function() { +const pauseNetInspector = function() { + netInspectorPaused = uDom.nodeFromId('netInspector') + .classList + .toggle('paused'); +}; + +/******************************************************************************/ + +const toggleVCompactView = function() { uDom.nodeFromId('netInspector').classList.toggle('vCompact'); uDom('#netInspector .vExpanded').toggleClass('vExpanded'); }; -var toggleVCompactRow = function(ev) { +const toggleVCompactRow = function(ev) { ev.target.parentElement.classList.toggle('vExpanded'); }; /******************************************************************************/ -var popupManager = (function() { +const popupManager = (function() { let realTabId = 0; let popup = null; let popupObserver = null; @@ -1737,6 +1750,37 @@ var popupManager = (function() { /******************************************************************************/ +logger.resize = (function() { + let timer; + + const resize = function() { + const vrect = document.body.getBoundingClientRect(); + const elems = document.querySelectorAll('.vscrollable'); + for ( const elem of elems ) { + const crect = elem.getBoundingClientRect(); + const dh = crect.bottom - vrect.bottom; + if ( dh === 0 ) { continue; } + elem.style.height = (crect.height - dh) + 'px'; + } + }; + + const resizeAsync = function() { + if ( timer !== undefined ) { return; } + timer = self.requestAnimationFrame(( ) => { + timer = undefined; + resize(); + }); + }; + + resizeAsync(); + + window.addEventListener('resize', resizeAsync, { passive: true }); + + return resizeAsync; +})(); + +/******************************************************************************/ + const grabView = function() { if ( logger.ownerId === undefined ) { logger.ownerId = Date.now(); @@ -1769,6 +1813,7 @@ uDom('#showpopup').on('click', popupManager.toggleOn); uDom('#netInspector .vCompactToggler').on('click', toggleVCompactView); uDom('#clean').on('click', cleanBuffer); uDom('#clear').on('click', clearBuffer); +uDom('#pause').on('click', pauseNetInspector); uDom('#maxEntries').on('change', onMaxEntriesChanged); uDom('#netInspector table').on('click', 'tr > td:nth-of-type(1)', toggleVCompactRow); uDom('#netInspector').on('click', 'tr.canLookup > td:nth-of-type(2)', reverseLookupManager.toggleOn); diff --git a/src/js/messaging.js b/src/js/messaging.js index b661d0f8f..4e5ff7400 100644 --- a/src/js/messaging.js +++ b/src/js/messaging.js @@ -1135,7 +1135,8 @@ const getLoggerData = function(details, activeTabId, callback) { entries: µb.logger.readAll(details.ownerId), maxEntries: µb.userSettings.requestLogMaxEntries, activeTabId: activeTabId, - tabIdsToken: µb.pageStoresToken + tabIdsToken: µb.pageStoresToken, + tooltips: µb.userSettings.tooltipsDisabled === false }; if ( µb.pageStoresToken !== details.tabIdsToken ) { const tabIds = new Map(); diff --git a/src/logger-ui.html b/src/logger-ui.html index 956012f04..0ddeb6599 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -2,8 +2,10 @@ - + + @@ -17,20 +19,21 @@