Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More fine-tuning of element picker visual/behavior 

- Group "Pick" and "Preview"
- Set minimal button width
- Auto-minimize when picking instead of fully hiding the dialog:
  this allows to quit while in picking mode
This commit is contained in:
Raymond Hill 2024-03-03 10:08:56 -05:00
parent 7f68c62f23
commit 43e0e15125
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/css/epicker-ui.css
View File

@ -22,15 +22,18 @@ html#ublock0-epicker,
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
width: min(32rem, 100vw - 4px); width: min(32rem, 100vw - 4px);
z-index: 100;
} }
#ublock0-epicker.paused:not(.zap) aside { #ublock0-epicker:not(.zap) aside {
display: flex; display: flex;
} }
#ublock0-epicker:not(.paused) aside,
#ublock0-epicker.minimized aside { #ublock0-epicker.minimized aside {
min-width: min(16rem, 100vw - 4px); min-width: min(16rem, 100vw - 4px);
overflow: hidden; overflow: hidden;
width: min(16rem, 100vw - 4px); width: min(16rem, 100vw - 4px);
} }
#ublock0-epicker:not(.paused) aside > *:not(#windowbar),
#ublock0-epicker.minimized aside > *:not(#windowbar) { #ublock0-epicker.minimized aside > *:not(#windowbar) {
display: none; display: none;
} }
@ -42,6 +45,9 @@ html#ublock0-epicker,
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
#ublock0-epicker #toolbar button {
min-width: 6em;
}
#ublock0-epicker ul { #ublock0-epicker ul {
margin: 0.25em 0 0 0; margin: 0.25em 0 0 0;
} }
@ -203,15 +209,6 @@ html#ublock0-epicker,
background-color: var(--surface-2); background-color: var(--surface-2);
} }
/**
https://github.com/gorhill/uBlock/issues/3449
https://github.com/uBlockOrigin/uBlock-issues/issues/55
**/
#ublock0-epicker.paused aside {
visibility: visible;
z-index: 100;
}
#ublock0-epicker svg#sea { #ublock0-epicker svg#sea {
cursor: crosshair; cursor: crosshair;
box-sizing: border-box; box-sizing: border-box;
@ -269,14 +266,17 @@ html#ublock0-epicker,
height: 2em; height: 2em;
width: 2em; width: 2em;
} }
#ublock0-epicker:not(.paused) #windowbar #minimize {
display: none;
}
#windowbar #quit:hover, #windowbar #quit:hover,
#windowbar #minimize:hover { #windowbar #minimize:hover {
background-color: var(--surface-2) background-color: var(--surface-2)
} }
html.minimized #windowbar #minimize svg > path, #ublock0-epicker.minimized #windowbar #minimize svg > path,
#windowbar #minimize svg > rect { #windowbar #minimize svg > rect {
display: none; display: none;
} }
html.minimized #windowbar #minimize svg > rect { #ublock0-epicker.minimized #windowbar #minimize svg > rect {
display: initial; display: initial;
} }

6
src/web_accessible_resources/epicker-ui.html
View File

@ -35,8 +35,10 @@
</div> </div>
</div> </div>
<div id="toolbar"> <div id="toolbar">
<button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button> <div>
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button> <button id="pick" type="button" data-i18n="pickerPick">_<span class="hover"></span></button>
<button id="preview" type="button" data-i18n="pickerPreview">_<span class="hover"></span></button>
</div>
<button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button> <button id="create" type="button" class="preferred" disabled data-i18n="pickerCreate">_<span class="hover"></span></button>
</div> </div>
</section> </section>