1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-07-08 12:57:57 +02:00

Fine tuning the logger's entry tools positioning

Related feedback:
- https://www.reddit.com/r/uBlockOrigin/comments/10483e5/new_logger_functions_in_latest_dev_build_ubo/j33tx0y/
This commit is contained in:
Raymond Hill 2023-01-06 10:16:24 -05:00
parent d9b50fcd51
commit 988a352cc4
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
3 changed files with 30 additions and 25 deletions

View File

@ -430,11 +430,9 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
#netInspector .entryTools {
background-color: var(--surface-0);
filter: drop-shadow(2px 4px 6px black);
max-width: 60vw;
min-width: max(50vw, 400px);
max-width: 640px;
min-width: min(100%, 640px);
position: absolute;
right: 0;
top: 20vh;
}
#netInspector .entryTools:empty {
display: none;

View File

@ -81,8 +81,9 @@ const onStartMovingWidget = (( ) => {
let ondone = null;
let mx0 = 0, my0 = 0;
let mx1 = 0, my1 = 0;
let r0 = 0, t0 = 0;
let rMax = 0, tMax = 0;
let l0 = 0, t0 = 0;
let pw = 0, ph = 0;
let cw = 0, ch = 0;
let timer;
const eatEvent = function(ev) {
@ -92,10 +93,17 @@ const onStartMovingWidget = (( ) => {
const move = ( ) => {
timer = undefined;
const r1 = Math.min(Math.max(r0 - mx1 + mx0, 2), rMax);
const t1 = Math.min(Math.max(t0 - my0 + my1, 2), tMax);
widget.style.setProperty('right', `${r1}px`);
widget.style.setProperty('top', `${t1}px`);
const l1 = Math.min(Math.max(l0 + mx1 - mx0, 0), pw - cw);
if ( (l1+cw/2) < (pw/2) ) {
widget.style.left = `${l1/pw*100}%`;
widget.style.right = '';
} else {
widget.style.right = `${(pw-l1-cw)/pw*100}%`;
widget.style.left = '';
}
const t1 = Math.min(Math.max(t0 + my1 - my0, 0), ph - ch);
widget.style.top = `${t1/ph*100}%`;
widget.style.bottom = '';
};
const moveAsync = ev => {
@ -126,15 +134,13 @@ const onStartMovingWidget = (( ) => {
if ( dom.cl.has(target, 'moving') ) { return; }
widget = target;
ondone = callback || null;
mx0 = ev.pageX;
my0 = ev.pageY;
const style = self.getComputedStyle(target);
r0 = parseInt(style.right, 10);
t0 = parseInt(style.top, 10);
const rect = widget.getBoundingClientRect();
mx0 = ev.pageX; my0 = ev.pageY;
const widgetParent = widget.parentElement;
rMax = widgetParent.clientWidth - 2 - rect.width ;
tMax = widgetParent.clientHeight - 2 - rect.height;
const crect = widget.getBoundingClientRect();
const prect = widgetParent.getBoundingClientRect();
pw = prect.width; ph = prect.height;
cw = crect.width; ch = crect.height;
l0 = crect.x - prect.x; t0 = crect.y - prect.y;
widget.classList.add('moving');
self.addEventListener('mousemove', moveAsync, { capture: true });
self.addEventListener('mouseup', stop, { capture: true, once: true });
@ -1956,11 +1962,14 @@ dom.on(document, 'keydown', ev => {
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,
})
@ -2008,12 +2017,10 @@ dom.on(document, 'keydown', ev => {
if ( typeof response !== 'string' ) { return; }
const settings = JSON.parse(response);
const widget = qs$('#netInspector .entryTools');
if ( settings.right ) {
widget.style.right = settings.right;
}
if ( settings.top ) {
widget.style.top = settings.top;
}
widget.style.bottom = settings.bottom || '';
widget.style.left = settings.left || '';
widget.style.right = settings.right || '';
widget.style.top = settings.top || '';
});
dom.on(

View File

@ -90,7 +90,7 @@
</div>
</div>
</div>
<div class="entryTools"></div>
<div class="entryTools" style="right:10%;top:20%"></div>
</div>
<iframe id="popupContainer"></iframe>
</div>