prehistoric-systems/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2026-03-11 09:04:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[mv3] Add ability to reset zapper selection on mobile devices

Browse source
This commit is contained in:
Raymond Hill 2025-05-14 10:02:37 -04:00
parent 7e239db9a8
commit d12e7817d2
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
3 changed files with 33 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
platform/mv3/extension/css/zapper-ui.css
View file

@ -16,11 +16,11 @@ html#ubol-zapper,
outline: none; outline: none;
} }
#ubol-zapper aside { #ubol-zapper aside {
background-color: var(--surface-1);
box-sizing: border-box; box-sizing: border-box;
cursor: default; cursor: default;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px;
position: fixed; position: fixed;
right: 2px; right: 2px;
top: 50%; top: 50%;
@ -31,14 +31,6 @@ html#ubol-zapper,
left: 2px; left: 2px;
right: unset; right: unset;
} }
#ubol-zapper aside > #quit {
border: 1px solid rgba(0,0,0,0.5);
fill: none;
stroke: var(--ink-1);
stroke-width: 3px;
width: var(--quit-button-size);
height: var(--quit-button-size);
}
#ubol-zapper svg#sea { #ubol-zapper svg#sea {
cursor: crosshair; cursor: crosshair;
box-sizing: border-box; box-sizing: border-box;
@ -57,6 +49,19 @@ html#ubol-zapper,
stroke-width: 0.5px; stroke-width: 0.5px;
fill: rgba(255,255,63,0.20); fill: rgba(255,255,63,0.20);
} }
#ubol-zapper #quit:hover { #ubol-zapper aside > div {
background-color: var(--surface-1);
border: 1px solid rgba(0,0,0,0.5);
box-sizing: border-box;
fill: none;
stroke: var(--ink-1);
stroke-width: 2px;
width: var(--quit-button-size);
height: var(--quit-button-size);
}
#ubol-zapper aside > div:hover {
background-color: var(--surface-2) background-color: var(--surface-2)
} }
:root:not(.mobile) #pick {
display: none;
}

11
platform/mv3/extension/js/zapper-ui.js
View file

@ -126,6 +126,7 @@ const svgListening = (( ) => {
}; };
return state => { return state => {
if ( $stor(':root.mobile') !== null ) { return; }
if ( state === on ) { return; } if ( state === on ) { return; }
on = state; on = state;
if ( on ) { if ( on ) {
@ -190,6 +191,7 @@ const startZapper = function(port) {
$stor('svg#sea').addEventListener('touchstart', onSvgTouch, { passive: true }); $stor('svg#sea').addEventListener('touchstart', onSvgTouch, { passive: true });
$stor('svg#sea').addEventListener('touchend', onSvgTouch); $stor('svg#sea').addEventListener('touchend', onSvgTouch);
$id('quit').addEventListener('click', quitZapper ); $id('quit').addEventListener('click', quitZapper );
$id('pick').addEventListener('click', resetZapper );
svgListening(true); svgListening(true);
}; };
@ -201,6 +203,7 @@ const quitZapper = function() {
$stor('svg#sea').removeEventListener('touchstart', onSvgTouch, { passive: true }); $stor('svg#sea').removeEventListener('touchstart', onSvgTouch, { passive: true });
$stor('svg#sea').removeEventListener('touchend', onSvgTouch); $stor('svg#sea').removeEventListener('touchend', onSvgTouch);
$id('quit').removeEventListener('click', quitZapper ); $id('quit').removeEventListener('click', quitZapper );
$id('pick').removeEventListener('click', resetZapper );
svgListening(false); svgListening(false);
if ( zapperScriptPort ) { if ( zapperScriptPort ) {
zapperScriptPort.postMessage({ what: 'quitZapper' }); zapperScriptPort.postMessage({ what: 'quitZapper' });
@ -213,6 +216,14 @@ const quitZapper = function() {
/******************************************************************************/ /******************************************************************************/
const resetZapper = function() {
zapperScriptPort.postMessage({
what: 'unhighlight'
});
};
/******************************************************************************/
// Wait for the content script to establish communication // Wait for the content script to establish communication
globalThis.addEventListener('message', ev => { globalThis.addEventListener('message', ev => {

8
platform/mv3/extension/zapper-ui.html
View file

@ -14,12 +14,18 @@
<div id="quit" data-i18n-title="zapperTipQuit"> <div id="quit" data-i18n-title="zapperTipQuit">
<svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg> <svg viewBox="0 0 64 64"><path d="M16 16L48 48M16 48L48 16" /></svg>
</div> </div>
<div id="pick">
<svg viewBox="0 0 64 64">
<path d="M10 32L54 32M32 10L32 54" />
<circle cx="32" cy="32" r="12" />
</svg>
</div>
</aside> </aside>
<svg id="sea"><path d></path><path d></path></svg> <svg id="sea"><path d></path><path d></path></svg>
<script src="js/theme.js" type="module"></script> <script src="js/theme.js" type="module"></script>
<script src="js/i18n.js" type="module"></script> <script src="js/i18n.js" type="module"></script>
<script src="/js/zapper-ui.js" type="module"></script> <script src="js/zapper-ui.js" type="module"></script>
</body> </body>
</html> </html>