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

More work toward redesigning the UI 

As per email feedback from Mozilla's
https://github.com/brampitoyo

This is yet another incremental step toward
redesigning the UI, much more is left to do.
The idea is to align uBO's UI to that of
Firefox Preview.

Additionally, code has been added to reset
the new popup panel to vertical layout should
the viewport be not wide enough to
accomodate the horizontal layout.

Related feedback:
- https://www.reddit.com/r/uBlockOrigin/comments/g4ufvi/
This commit is contained in:
Raymond Hill 2020-04-21 16:33:08 -04:00
parent a213c89eaa
commit 5bee33253f
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
29 changed files with 397 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/1p-filters.html
View File

@ -24,11 +24,11 @@
<p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p>
<p>
<button id="userFiltersApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
<button id="userFiltersApply" class="important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
&ensp;
<button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
<button id="importUserFiltersFromFile" class="iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
</p>
</div>
<div id="userFilters" class="codeMirrorContainer codeMirrorFillVertical codeMirrorBreakAll" spellcheck="false"></div>

6
src/3p-filters.html
View File

@ -18,9 +18,9 @@
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div id="actions" class="root">
<button id="buttonApply" class="custom important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="custom important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="custom disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
<button id="buttonApply" class="important disabled iconifiable" type="button" data-i18n-title="3pApplyChanges"><span class="fa-icon">check</span><span data-i18n="3pApplyChanges"></span></button>
<button id="buttonUpdate" class="important disabled iconifiable" type="button" data-i18n-title="3pUpdateNow"><span class="fa-icon">refresh</span><span data-i18n="3pUpdateNow"></span></button>
<button id="buttonPurgeAll" class="disabled iconifiable" type="button" data-i18n-title="3pPurgeAll"><span class="fa-icon">clock-o</span><span data-i18n="3pPurgeAll"></span></button>
</div>
<div>

6
src/about.html
View File

@ -32,9 +32,11 @@
</div>
<div class="li"><span data-i18n="aboutDependencies"></span></div>
<div class="liul">
<div class="li"><span><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
<div class="li"><span><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a></span></div>
<div class="li"><span><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a></span></div>
<div class="li"><span><a href="https://github.com/chrismsimpson/Metropolis" target="_blank">Metropolis font family</a> by <a href="https://github.com/chrismsimpson">Chris Simpson</a></span></div>
<div class="li"><span><a href="https://github.com/rsms/inter" target="_blank">Inter font family</a> by <a href="https://github.com/rsms">Rasmus Andersson</a></span></div>
<div class="li"><span><a href="https://fontawesome.com/" target="_blank">FontAwesome font family</a> by <a href="https://github.com/davegandy">Dave Gandy</a></span></div>
<div class="li"><span><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a></span></div>
</div>
</div>

2
src/advanced-settings.html
View File

@ -19,7 +19,7 @@
<div class="body">
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
<p>
<button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
<button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
</div>
<div id="advancedSettings" class="codeMirrorContainer codeMirrorFillVertical"></div>

8
src/cloud-ui.html
View File

@ -5,14 +5,14 @@
<title></title>
</head>
<body>
<button id="cloudPush" type="button" class="custom" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
<button id="cloudPush" type="button" data-i18n-title="cloudPush"><span class="fa-icon">cloud-upload</span></button>
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<button id="cloudPull" type="button" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<span id="cloudError"></span>
<span id="cloudCog" class="fa-icon">cog</span>
<div id="cloudOptions">
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="custom vflex" type="button" data-i18n="genericSubmit"></button>
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="vflex" type="button" data-i18n="genericSubmit"></button>
</div>
</body>
</html>

2
src/css/3p-filters.css
View File

@ -3,7 +3,7 @@
100% { transform: rotate(360deg); }
}
.root {
background-color: var(--bg-0);
background-color: var(--default-surface);
overflow: auto;
padding: 0.5em 0;
}

8
src/css/cloud-ui.css
View File

@ -62,7 +62,7 @@
fill: inherit;
}
#cloudWidget #cloudOptions {
background-color: var(--bg-0);
background-color: var(--default-surface);
border: 1px solid var(--bg-1-border);
bottom: 0;
display: none;
@ -77,9 +77,3 @@
#cloudWidget #cloudOptions.show {
display: block;
}
#cloudWidget #cloudOptions > div {
background-color: var(--bg-0);
border-radius: 3px;
padding: 1em;
text-align: center;
}

113
src/css/common.css
View File

@ -1,19 +1,46 @@
/* https://protocol.mozilla.org/assets/docs/css/protocol.css */
@charset "UTF-8";
@font-face {
font-display: block;
font-family: Inter;
font-style: normal;
font-weight: normal;
src: url('fonts/Inter/Inter-Regular.woff2') format('woff2');
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
src: url('fonts/Inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: Metropolis;
font-style: normal;
font-weight: 600;
src: url('fonts/Metropolis/Metropolis-SemiBold.woff2') format('woff2');
}
/* Usage of FontAwesome is deprecated and will be removed eventually */
@font-face {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
}
/* Common uBO styles */
body {
background-color: var(--bg-0);
background-color: var(--default-surface);
border: 0;
box-sizing: border-box;
color: var(--fg-0);
fill: var(--fg-0);
font: 14px/1.5 sans-serif;
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}
@font-face {
font-family: 'FontAwesome';
font-weight: normal;
font-style: normal;
src: url('fonts/fontawesome-webfont.ttf') format('truetype');
}
.fa {
display: inline-block;
font-family: FontAwesome;
@ -39,50 +66,58 @@ hr {
textarea {
font-size: 90%;
}
/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
button.custom {
align-items: flex-end;
button {
align-items: center;
appearance: none;
border: 1px solid transparent;
border-radius: 3px;
background-color: var(--bg-button);
color: var(--fg-button)
border-radius: 4px;
background-color: var(--button-surface);
color: var(--button-ink);
display: inline-flex;
padding: 0.6em 1em;
fill: var(--button-ink);
font-family: Metropolis, sans-serif;
font-weight: 600;
font-size: 14px;
justify-content: center;
letter-spacing: 0.5px;
min-height: 36px;
padding: 0 16px;
-moz-appearance: none;
-webkit-appearance: none;
}
button.custom.vflex {
button.vflex {
height: 100%;
min-height: unset;
padding-bottom: 0;
padding-top: 0;
}
button.custom:hover {
background-color: var(--bg-button-hover);
button:hover {
background-color: var(--button-surface-hover);
}
button.custom.important {
button.important {
background-color: var(--bg-button-important);
}
button.custom.important:hover {
button.important:hover {
background-color: var(--bg-button-important-hover);
}
button.custom.disabled,
button.custom[disabled],
button.custom.important.disabled,
button.custom.important[disabled] {
button.disabled,
button[disabled],
button.important.disabled,
button.important[disabled] {
background-color: var(--bg-button-disabled);
color: var(--fg-button-disabled);
pointer-events: none;
}
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
button.iconifiable > .fa,
button.iconifiable > .fa-icon {
padding-left: 0;
padding-right: 0.4em;
}
button.custom.iconifiable > .fa-icon {
button.iconifiable > .fa-icon {
font-size: 120%;
}
body[dir="rtl"] button.custom.iconifiable > .fa,
body[dir="rtl"] button.custom.iconifiable > .fa-icon {
body[dir="rtl"] button.iconifiable > .fa,
body[dir="rtl"] button.iconifiable > .fa-icon {
padding-left: 0.5em;
}
.hidden {
@ -102,13 +137,23 @@ input[type="checkbox"] {
margin-inline-end: 0.4em;
-webkit-margin-end: 0.4em;
}
.fieldset {
margin: 1em 0.5em;
}
.fieldset-header {
color: var(--fieldset-header-ink);
font-family: Metropolis, sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
}
.ul {
margin: 1em 0;
}
.li {
align-items: center;
display: flex;
margin: 0.5em 0;
margin: 12px 0;
}
.liul {
margin: 0.5em 0;
@ -116,12 +161,12 @@ input[type="checkbox"] {
-webkit-margin-start: 2em;
}
@media (max-width: 640px) {
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
button.iconifiable > .fa,
button.iconifiable > .fa-icon {
font-size: 1.2rem;
padding: 0;
}
button.custom.iconifiable > [data-i18n] {
button.iconifiable > [data-i18n] {
display: none;
}
}
@ -155,7 +200,7 @@ input[type="checkbox"] {
/* touch-screen devices */
:root.mobile body {
font: 16px/1.5 sans-serif;
font-size: 16px;
}
:root.mobile label {
flex-grow: 1

3
src/css/dashboard-common.css
View File

@ -38,9 +38,6 @@ a {
.fa-icon.info.important:hover {
color: var(--fg-icon-info-lvl-3);
}
button {
padding: 0.33em;
}
input[type="number"] {
width: 5em;
}

12
src/css/dashboard.css
View File

@ -5,9 +5,9 @@ html, body {
width: 100%;
}
#dashboard-nav {
background-color: var(--bg-1);
background-color: var(--default-surface);
border: 0;
border-bottom: 1px solid var(--bg-1-border);
box-shadow: var(--dashboard-bar-shadow);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
@ -29,9 +29,13 @@ html, body {
.tabButton {
border: 0;
border-bottom: 3px solid var(--bg-1);
border-top: 3px solid transparent;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
padding: 0.5em 1.4em 0.3em 1.4em;
font-family: Metropolis, sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
padding: 0.5em 1.4em calc(0.5em - 3px);
text-decoration: none;
white-space: nowrap;
}
@ -84,7 +88,7 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-surface-hover);
border-color: var(--dashboard-tab-surface-hover);
border-bottom-color: var(--dashboard-tab-surface-hover);
}
/* touch-screen devices */

12
src/css/document-blocked.css
View File

@ -19,7 +19,7 @@
*/
body {
font-size: large;
padding: 0.5em;
text-align: center;
}
@ -29,24 +29,18 @@ body {
}
}
body > div {
margin: 0 0 1.5em 0;
margin: 0 0 1em 0;
}
body > div > p,
body > div > div {
margin: 4px 0;
}
body > div > p:first-child {
margin: 1.5em 0 0 0;
margin: 1em 0 0 0;
}
a {
text-decoration: none;
}
button {
cursor: pointer;
margin: 0 1em 0.25em 1em;
padding: 0.25em 0.5em;
font-size: inherit;
}
select {
font: inherit;
padding: 2px;

BIN
src/css/fonts/Inter/Inter-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/Inter/Inter-SemiBold.woff2 Normal file
View File

Binary file not shown.

93
src/css/fonts/Inter/LICENSE.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright (c) 2016-2020 The Inter Project Authors
https://github.com/rsms/inter
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION AND CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
src/css/fonts/Metropolis/Metropolis-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 Normal file
View File

Binary file not shown.

25
src/css/fonts/Metropolis/README.md Normal file
View File

@ -0,0 +1,25 @@
# Metropolis
A modern, geometric typeface. Influenced by other popular geometric, minimalist sans-serif typefaces of the new millenium. Designed for optimal readability at small point sizes while beautiful at large point sizes.
![Metropolis](./Specimens/Metro-1.png)
---
![Metropolis](./Specimens/Metro-2.png)
### Where am I?
See [Documentation](./Documentation/Documentation.md).
### The Unlicense
Contributions welcome.
### Contact
Reachable via chris.m.simpson [at] icloud.com or tweet @ChrisMSimpson.
### Support
There is none. Oh, you meant support me? I dare you to click the sponsor button above.

24
src/css/fonts/Metropolis/UNLICENSE Normal file
View File

@ -0,0 +1,24 @@
This is free and unencumbered software released into the public domain.
Anyone is free to copy, modify, publish, use, compile, sell, or
distribute this software, either in source code form or as a compiled
binary, for any purpose, commercial or non-commercial, and by any
means.
In jurisdictions that recognize copyright laws, the author or authors
of this software dedicate any and all copyright interest in the
software to the public domain. We make this dedication for the benefit
of the public at large and to the detriment of our heirs and
successors. We intend this dedication to be an overt act of
relinquishment in perpetuity of all present and future rights to this
software under copyright law.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.
For more information, please refer to <http://unlicense.org/>

24
src/css/popup-fenix.css
View File

@ -8,8 +8,10 @@
}
/* Internal CSS values */
body {
font: 14px/20px sans-serif;
:root body,
:root.mobile body {
font-size: 14px;
line-height: 20px;
width: 100%;
}
a {
@ -39,7 +41,7 @@ hr {
}
#sticky {
background-color: var(--bg-0);
background-color: var(--default-surface);
position: sticky;
top: 0;
z-index: 100;
@ -128,6 +130,7 @@ body.needSave #revertRules {
display: flex;
flex-direction: column;
font-size: 1.4em;
min-width: 32px;
}
.tool {
@ -140,11 +143,13 @@ body.needSave #revertRules {
visibility: visible;
}
.tool [data-i18n] {
display: var(--fg-popup-icon-caption-display);
font: 10px/12px sans-serif;
margin-top: 0.5em;
text-align: center;
}
body.no-tooltips .tool [data-i18n] {
display: none;
}
.statValue {
margin: 0;
@ -206,7 +211,6 @@ body[dir="rtl"] #tooltip {
#firewall {
border: 0;
flex-shrink: 0;
font-family: "Noto Sans", sans-serif;
font-size: 90%;
margin: 0;
padding: 0;
@ -286,7 +290,7 @@ body:not(.dfEnabled) #firewall {
text-align: center;
}
#firewall > div.isDomain > span:first-of-type {
font-weight: bold;
font-weight: 600;
}
#firewall > div:first-of-type > span:first-of-type::before {
color: var(--fg-0-50);
@ -409,7 +413,7 @@ body.advancedUser #firewall > div > span.noopRule,
}
body.advancedUser #firewall > div > span.ownRule,
#firewall > div > span.ownRule {
color: var(--bg-0);
color: var(--default-surface);
}
body.advancedUser #firewall > div > span.allowRule.ownRule,
#actionSelector > #dynaAllow:hover {
@ -461,7 +465,10 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
/* mouse-driven devices */
:root.desktop body {
overflow: hidden;
overflow: auto;
}
:root.desktop body.loading * {
visibility: hidden !important;
}
:root.desktop #panes {
flex-direction: row-reverse;
@ -477,7 +484,6 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
line-height: 1.4;
max-height: 540px;
min-height: 100vh;
max-width: 400px;
min-width: 360px;
overflow-y: auto;
width: max-content;

28
src/css/settings.css
View File

@ -1,6 +1,3 @@
.section {
font-weight: bold;
}
.synopsis {
font-size: 90%;
}
@ -10,3 +7,28 @@
body.advancedUser [href="advanced-settings.html"] {
display: inline-flex;
}
#localData {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
white-space: nowrap;
}
#localData > div {
flex-grow: 1;
margin-bottom: 1em;
}
#localData > div:last-of-type {
display: flex;
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
}
#localData > div:last-of-type > button {
margin-bottom: 0.5em;
}
/* small-screen devices */
:root.mobile #localData {
flex-direction: column;
white-space: unset;
}

21
src/css/themes/default.css
View File

@ -9,16 +9,22 @@
/* color names */
:root {
--blue-50: #0060df;
--ink-20: #312a64;
--ink-80: #20123a;
--ink-80-a4: #20123a0a;
--light-gray-10: #f9f9fb;
--light-gray-30: #e0e0e6;
--light-gray-40: #cfcfd8;
--violet-70: #592acb;
--black: #000;
--white: #fff;
}
/* components */
:root {
--bg-0: #fff;
--bg-0: var(--white);
--fg-0: var(--ink-80);
--default-surface: var(--light-gray-10);
--bg-1: hsla(240, 20%, 98%, 1);
--bg-1-border: hsla(240, 20%, 90%, 1);
@ -38,10 +44,15 @@
--link-ink: var(--violet-70);
--fieldset-header-surface: transparent;
--fieldset-header-ink: var(--ink-20);
--hor-separator-color: var(--light-gray-30);
--button-surface: var(--light-gray-30);
--button-ink: var(--ink-20);
--button-surface-hover: var(--light-gray-40);
--bg-button: hsla(0, 0%, 90%, 1);
--bg-button-hover: hsla(0, 0%, 83%, 1);
--bg-button-important: hsla(36, 100%, 85%, 1);
--bg-button-important-hover: hsla(36, 100%, 77%, 1);
--fg-button: var(--fg-0);
@ -50,6 +61,11 @@
--bg-transient-notice: hsla(60, 100%, 95%, 1);
--dashboard-bar-shadow:
0px 0px 0px 1px rgba(32, 18, 58, 0.04),
0px 1px 2px 0px rgba(34, 0, 51, 0.04),
0px 2px 1px -1px rgba(7, 48, 114, 0.12),
0px 1px 6px 0px rgba(14, 13, 26, 0.12);
--dashboard-tab-ink: var(--ink-80);
--dashboard-tab-active-ink: var(--violet-70);
--dashboard-tab-surface-hover: var(--ink-80-a4);
@ -84,7 +100,6 @@
--bg-popup-cell-block: hsla(0, 50%, 80%, 1);
--bg-popup-cell-block-own: hsla(0, 100%, 40%, 1);
--bg-popup-cell-label-mixed: hsla(45, 100%, 38%, 1);
--fg-popup-icon-caption-display: unset;
--fg-popup-icon-x: hsla(0, 100%, 50%, 1);
}

4
src/dashboard.html
View File

@ -24,8 +24,8 @@
<div id="unsavedWarning">
<div>
<span data-i18n="dashboardUnsavedWarning"></span>&emsp;
<button class="custom" data-i18n="dashboardUnsavedWarningStay"></button>&emsp;
<button class="custom" data-i18n="dashboardUnsavedWarningIgnore"></button>
<button data-i18n="dashboardUnsavedWarningStay"></button>&emsp;
<button data-i18n="dashboardUnsavedWarningIgnore"></button>
</div>
<div></div>
</div>

10
src/dyna-rules.html
View File

@ -25,14 +25,14 @@
<div class="tools">
<div class="ruleActions">
<h3 data-i18n="rulesPermanentHeader"></h3>
<button type="button" class="custom iconifiable" id="exportButton"><span class="fa">&#xf093;</span><span data-i18n="rulesExport"></span></button>
<button type="button" class="custom iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
<button type="button" class="iconifiable" id="exportButton"><span class="fa">&#xf093;</span><span data-i18n="rulesExport"></span></button>
<button type="button" class="iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
</div>
<div class="ruleActions">
<h3 data-i18n="rulesTemporaryHeader"></h3>
<button type="button" class="custom iconifiable" id="commitButton"><span class="fa">&#xf060;</span><span data-i18n="rulesCommit"></span></button>
<button type="button" class="custom iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="custom iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
<button type="button" class="iconifiable" id="commitButton"><span class="fa">&#xf060;</span><span data-i18n="rulesCommit"></span></button>
<button type="button" class="iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
</div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="search" size="20"></div>
</div>

94
src/js/popup-fenix.js
View File

@ -50,16 +50,6 @@ vAPI.localStorage.getItemAsync('popupFirewallPane').then(value => {
/******************************************************************************/
if ( uDom.root.classList.contains('desktop') ) {
const sticky = document.getElementById('sticky');
const main = document.getElementById('main');
if ( sticky.parentElement !== main ) {
document.getElementById('main').prepend(sticky);
}
}
/******************************************************************************/
const messaging = vAPI.messaging;
const reIP = /^\d+(?:\.\d+){1,3}$/;
const scopeToSrcHostnameMap = {
@ -575,13 +565,15 @@ const tooltipTargetSelectors = new Map([
let renderOnce = function() {
renderOnce = function(){};
const body = document.body;
if ( popupData.fontSize !== popupFontSize ) {
popupFontSize = popupData.fontSize;
if ( popupFontSize !== 'unset' ) {
document.body.style.setProperty('font-size', popupFontSize);
body.style.setProperty('font-size', popupFontSize);
vAPI.localStorage.setItem('popupFontSize', popupFontSize);
} else {
document.body.style.removeProperty('font-size');
body.style.removeProperty('font-size');
vAPI.localStorage.removeItem('popupFontSize');
}
}
@ -590,6 +582,11 @@ let renderOnce = function() {
if ( popupData.advancedUserEnabled !== true ) {
uDom('#firewall [data-i18n-tip][data-src]').removeAttr('data-tip');
}
body.classList.toggle(
'no-tooltips',
popupData.tooltipsDisabled === true
);
};
/******************************************************************************/
@ -1067,45 +1064,6 @@ const getPopupData = async function(tabId) {
/******************************************************************************/
const onShowTooltip = function(ev) {
if ( popupData.tooltipsDisabled ) { return; }
const target = ev.target;
// Tooltip container
const ttc = uDom(target).ancestors('.tooltipContainer').nodeAt(0) ||
document.body;
const ttcRect = ttc.getBoundingClientRect();
// Tooltip itself
const tip = uDom.nodeFromId('tooltip');
tip.textContent = target.getAttribute('data-tip');
tip.style.removeProperty('top');
tip.style.removeProperty('bottom');
ttc.appendChild(tip);
// Target rect
const targetRect = target.getBoundingClientRect();
// Default is "over"
let pos;
if ( target.getAttribute('data-tip-position') !== 'under' ) {
pos = ttcRect.height - targetRect.top + ttcRect.top;
tip.style.setProperty('bottom', pos + 'px');
} else {
pos = targetRect.bottom - ttcRect.top;
tip.style.setProperty('top', pos + 'px');
}
tip.classList.add('show');
};
const onHideTooltip = function() {
uDom.nodeFromId('tooltip').classList.remove('show');
};
/******************************************************************************/
// Popup DOM is assumed to be loaded at this point -- because this script
// is loaded after everything else..
@ -1119,7 +1077,35 @@ const onHideTooltip = function() {
if ( matches && matches.length === 2 ) {
tabId = parseInt(matches[1], 10) || 0;
}
getPopupData(tabId);
// The purpose of the following code is to reset to a vertical layout
// should the viewport be not enough wide to accomodate the horizontal
// layout.
const checkViewport = function() {
const root = document.querySelector(':root');
if ( root.classList.contains('desktop') ) {
const main = document.getElementById('main');
const firewall = document.getElementById('firewall');
const minWidth = Math.floor(main.offsetWidth + firewall.offsetWidth);
if ( document.body.offsetWidth < minWidth ) {
root.classList.remove('desktop');
} else {
const sticky = document.getElementById('sticky');
if ( sticky.parentElement !== main ) {
main.prepend(sticky);
}
}
}
document.body.classList.remove('loading');
};
getPopupData(tabId).then(( ) => {
if ( document.readyState !== 'complete' ) {
window.addEventListener('load', checkViewport, { once: true });
} else {
checkViewport();
}
});
}
uDom('#switch').on('click', toggleNetFilteringSwitch);
@ -1129,10 +1115,6 @@ uDom('#moreButton').on('click', toggleFirewallPane);
uDom('.hnSwitch').on('click', ev => { toggleHostnameSwitch(ev); });
uDom('#saveRules').on('click', saveFirewallRules);
uDom('#revertRules').on('click', ( ) => { revertFirewallRules(); });
uDom('body').on('mouseenter', '[data-tip]', onShowTooltip)
.on('mouseleave', '[data-tip]', onHideTooltip);
uDom('a[href]').on('click', gotoURL);
/******************************************************************************/

4
src/logger-ui.html
View File

@ -142,7 +142,7 @@
<div class="pane static" data-pane="static">
<div></div>
<div><textarea class="staticFilter" spellcheck="false" value=""></textarea>
<button id="createStaticFilter" class="custom important" type="button" data-i18n="pickerCreate"></button>
<button id="createStaticFilter" class="important" type="button" data-i18n="pickerCreate"></button>
</div>
</div>
</div>
@ -160,7 +160,7 @@
<div id="cosmeticFilteringDialog" class="modalDialog">
<textarea class="cosmeticFilters" value=""></textarea>
<button id="createCosmeticFilters" class="custom important" type="button" data-i18n="pickerCreate"></button>
<button id="createCosmeticFilters" class="important" type="button" data-i18n="pickerCreate"></button>
</div>
<div id="loggerStatsDialog">

2
src/popup-fenix.html
View File

@ -11,7 +11,7 @@
<title data-i18n="extName"></title>
</head>
<body>
<body class="loading">
<div id="panes">
<div id="sticky">
<div>

72
src/settings.html
View File

@ -12,43 +12,43 @@
</head>
<body>
<div class="body">
<div class="ul">
<div class="li"><label><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><span data-i18n="settingsCollapseBlockedPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><span data-i18n="settingsIconBadgePrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><span data-i18n="settingsContextMenuPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><span data-i18n="settingsTooltipsPrompt"><span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><span data-i18n="settingsColorBlindPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
</div>
<hr>
<div class="section" data-i18n="3pGroupPrivacy"></div>
<div class="ul">
<div class="li"><label><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><span><span data-i18n="settingsPrefetchingDisabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><span><span data-i18n="settingsHyperlinkAuditingDisabledPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><span><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><span><span data-i18n="settingsNoCSPReportsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div class="section" data-i18n="settingPerSiteSwitchGroup"></div>
<div class="ul">
<div class="li synopsis"><span><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></span></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><span><span data-i18n="settingsNoCosmeticFilteringPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><span><span data-i18n="settingsNoRemoteFontsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><span><span data-i18n="settingsNoScriptingPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div id="localData" class="ul">
<div class="fieldset">
<div class="li"><label><input type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><span data-i18n="settingsCollapseBlockedPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><span data-i18n="settingsIconBadgePrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><span data-i18n="settingsContextMenuPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><span data-i18n="settingsTooltipsPrompt"><span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><span data-i18n="settingsColorBlindPrompt"></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
</div>
<hr>
<div class="fieldset">
<div class="fieldset-header" data-i18n="3pGroupPrivacy"></div>
<div class="li"><label><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><span><span data-i18n="settingsPrefetchingDisabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><span><span data-i18n="settingsHyperlinkAuditingDisabledPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-hyperlink-auditing" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><span><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><span><span data-i18n="settingsNoCSPReportsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div class="fieldset">
<div class="fieldset-header" data-i18n="settingPerSiteSwitchGroup"></div>
<div class="li synopsis"><legend><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></legend></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><span><span data-i18n="settingsNoCosmeticFilteringPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><span><span data-i18n="settingsNoLargeMediaPrompt"><input type="number" min="0"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><span><span data-i18n="settingsNoRemoteFontsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><span><span data-i18n="settingsNoScriptingPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div id="localData" class="fieldset">
<div>
<div id="storageUsed" class="li"></div>
<div style="margin: 1.5em 0">
<div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div>
<div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
</div>
<div>
<button type="button" id="export" data-i18n="aboutBackupDataButton"></button>
<button type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<button type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div>
</div>

2
src/shortcuts.html
View File

@ -22,7 +22,7 @@
<td class="commandDesc">
<td class="commandShortcut">
<input type="text" placeholder="shortcutCapturePlaceholder">
<button class="commandReset custom" type="button">&times;</button>
<button class="commandReset" type="button">&times;</button>
</div>
</div>

8
src/whitelist.html
View File

@ -25,11 +25,11 @@
<p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Whitelist">&#xf05a;</a>
</p>
<p>
<button id="whitelistApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="whitelistApply"></span></button>
<button id="whitelistRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
<button id="whitelistApply" class="important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="whitelistApply"></span></button>
<button id="whitelistRevert" class="iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
&emsp;&emsp;
<button id="importWhitelistFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="whitelistImport"></span></button>
<button id="exportWhitelistToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="whitelistExport"></span></button>
<button id="importWhitelistFromFile" class="iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="whitelistImport"></span></button>
<button id="exportWhitelistToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="whitelistExport"></span></button>
</p>
</div>
<div id="whitelist" class="codeMirrorContainer codeMirrorFillVertical"></div>