diff --git a/src/ext/lib/uwui/UI.js b/src/ext/lib/uwui/UI.js index 25a6c52..77f25c0 100644 --- a/src/ext/lib/uwui/UI.js +++ b/src/ext/lib/uwui/UI.js @@ -95,7 +95,7 @@ class UI { iframe.style.zIndex = this.isGlobal ? '90009' : '90000'; iframe.style.border = 0; iframe.style.pointerEvents = 'none'; - iframe.style.opacity = 0; + // iframe.style.opacity = 0; iframe.style.backgroundColor = 'transparent !important'; /* so we have a problem: we want iframe to be clickthrough everywhere except @@ -158,6 +158,18 @@ class UI { document.addEventListener('mousemove', fn, true); } + // Add some squares to the page. + // Sets up checks for conditions that cause these two mutually exclusive issues: + // * https://github.com/tamius-han/ultrawidify/issues/262 + // * https://github.com/tamius-han/ultrawidify/issues/259 + for (const x of ['left', 'center', 'right']) { + for (const y of ['top', 'center', 'bottom']) { + if (x !== y) { + rootDiv.appendChild(this.generateDebugMarker(x, y)); + } + } + } + rootDiv.appendChild(iframe); } @@ -190,24 +202,6 @@ class UI { this.sendToIframe('uw-set-ui-state', {...config, isGlobal: this.isGlobal}, routingData); } }, - 'uw-get-page-stats': { - function: (config, routingData) => { - console.log('got get page stats!'); - this.eventBus.send( - 'uw-page-stats', - { - pcsDark: window.matchMedia('(prefers-color-scheme: dark)').matches, - pcsLight: window.matchMedia('(prefers-color-scheme: light)').matches, - colorScheme: window.getComputedStyle( document.body ,null).getPropertyValue('color-scheme') - }, - { - comms: { - forwardTo: 'popup' - } - } - ); - } - }, 'uw-restore-ui-state': { function: (config, routingData) => { if (!this.isGlobal) { @@ -229,6 +223,65 @@ class UI { this.handleMessage(message); } + + /** + * Generates marker positions for bug mitigations + */ + generateDebugMarker(x, y) { + const [parentMainDimension, parentCrossDimension] = y === 'center' ? ['height', 'width'] : ['width', 'height']; + + let anchorStyle; + + if (x === 'center' && x === y) { + anchorStyle = 'left: 50%; top: 50%; transform: translate(-50%, -50%);'; + } else { + switch (x) { + case 'left': + anchorStyle = 'left: 0px;'; + break; + case 'center': + anchorStyle = 'left: 50%; transform: translateX(-50%);'; + break; + case 'right': + anchorStyle = 'right: 0px;'; + break; + } + switch (y) { + case 'top': + anchorStyle = `${anchorStyle} top: 0px;`; + break; + case 'center': + anchorStyle = `${anchorStyle} top: 50%; transform: translateY(-50%);`; + break; + case 'bottom': + anchorStyle = `${anchorStyle} bottom: 0px;`; + break; + } + } + + + let [mainAxis, crossAxis] = y === 'center' ? ['left', 'top'] : ['top', 'left']; + + const template = document.createElement('template'); + template.innerHTML = ` +