From a1bd89e466407c121764344231812b0c6e48a4c7 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Sun, 19 Feb 2023 18:34:53 -0500 Subject: [PATCH] Support moving logger dialog around Related feedback: - https://github.com/uBlockOrigin/uBlock-issues/discussions/2497 --- src/css/logger-ui.css | 2 +- src/js/logger-ui.js | 54 ++++++++++++++++++++++++++++--------------- 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 867d64ce7..fd054dbc9 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -523,7 +523,7 @@ body[dir="rtl"] .closeButton { } .netFilteringDialog { - font-size: 95%; + font-size: var(--font-size-smaller); } .netFilteringDialog a { text-decoration: none; diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index 4515fa682..b54afdc1f 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -86,8 +86,17 @@ const onStartMovingWidget = (( ) => { let cw = 0, ch = 0; let timer; + const xyFromEvent = ev => { + if ( ev.type.startsWith('mouse') ) { + return { x: ev.pageX, y: ev.pageY }; + } + const touch = ev.touches[0]; + return { x: touch.pageX, y: touch.pageY }; + }; + const eatEvent = function(ev) { ev.stopPropagation(); + if ( ev.touches !== undefined ) { return; } ev.preventDefault(); }; @@ -108,8 +117,8 @@ const onStartMovingWidget = (( ) => { const moveAsync = ev => { if ( timer !== undefined ) { return; } - mx1 = ev.pageX; - my1 = ev.pageY; + const coord = xyFromEvent(ev); + mx1 = coord.x; my1 = coord.y; timer = self.requestAnimationFrame(move); eatEvent(ev); }; @@ -119,9 +128,11 @@ const onStartMovingWidget = (( ) => { self.cancelAnimationFrame(timer); timer = undefined; } + if ( widget === null ) { return; } if ( widget.classList.contains('moving') === false ) { return; } widget.classList.remove('moving'); self.removeEventListener('mousemove', moveAsync, { capture: true }); + self.removeEventListener('touchmove', moveAsync, { capture: true }); eatEvent(ev); widget = null; if ( ondone !== null ) { @@ -134,7 +145,8 @@ const onStartMovingWidget = (( ) => { if ( dom.cl.has(target, 'moving') ) { return; } widget = target; ondone = callback || null; - mx0 = ev.pageX; my0 = ev.pageY; + const coord = xyFromEvent(ev); + mx0 = coord.x; my0 = coord.y; const widgetParent = widget.parentElement; const crect = widget.getBoundingClientRect(); const prect = widgetParent.getBoundingClientRect(); @@ -144,6 +156,8 @@ const onStartMovingWidget = (( ) => { widget.classList.add('moving'); self.addEventListener('mousemove', moveAsync, { capture: true }); self.addEventListener('mouseup', stop, { capture: true, once: true }); + self.addEventListener('touchmove', moveAsync, { capture: true }); + self.addEventListener('touchend', stop, { capture: true, once: true }); eatEvent(ev); }; })(); @@ -1938,6 +1952,22 @@ dom.on(document, 'keydown', ev => { parseStaticInputs(); }; + const moveDialog = ev => { + if ( ev.button !== 0 && ev.touches === undefined ) { return; } + const widget = qs$('#netInspector .entryTools'); + onStartMovingWidget(ev, widget, ( ) => { + vAPI.localStorage.setItem( + 'loggerUI.entryTools', + JSON.stringify({ + bottom: widget.style.bottom, + left: widget.style.left, + right: widget.style.right, + top: widget.style.top, + }) + ); + }); + }; + const fillDialog = function(domains) { dialog = dom.clone('#templates .netFilteringDialog'); dom.cl.toggle( @@ -1961,21 +1991,9 @@ dom.on(document, 'keydown', ev => { } else { container.append(dialog); } - dom.on(qs$(dialog, '.moveBand'), 'mousedown', ev => { - if ( ev.button !== 0 ) { return; } - onStartMovingWidget(ev, container, ( ) => { - const widget = qs$('#netInspector .entryTools'); - vAPI.localStorage.setItem( - 'loggerUI.entryTools', - JSON.stringify({ - bottom: widget.style.bottom, - left: widget.style.left, - right: widget.style.right, - top: widget.style.top, - }) - ); - }); - }); + const moveBand = qs$(dialog, '.moveBand'); + dom.on(moveBand, 'mousedown', moveDialog); + dom.on(moveBand, 'touchstart', moveDialog); }; const toggleOn = async function(ev) {