diff --git a/src/1p-filters.html b/src/1p-filters.html index 57383187a..6454df7e6 100644 --- a/src/1p-filters.html +++ b/src/1p-filters.html @@ -24,11 +24,11 @@

- - + +   - - + +

diff --git a/src/3p-filters.html b/src/3p-filters.html index 2e9958fdf..57ea726ea 100644 --- a/src/3p-filters.html +++ b/src/3p-filters.html @@ -18,9 +18,9 @@
- - - + + +
diff --git a/src/about.html b/src/about.html index 13abb242b..a852c4afd 100644 --- a/src/about.html +++ b/src/about.html @@ -32,9 +32,11 @@
-
Punycode.js by Mathias Bynens
-
Font Awesome by Dave Gandy
CodeMirror by Marijn Haverbeke
+
Punycode.js by Mathias Bynens
+
Metropolis font family by Chris Simpson
+
Inter font family by Rasmus Andersson
+
FontAwesome font family by Dave Gandy
An implementation of Myers' diff algorithm by Arpad Borsos
diff --git a/src/advanced-settings.html b/src/advanced-settings.html index 868733b32..b3b64096a 100644 --- a/src/advanced-settings.html +++ b/src/advanced-settings.html @@ -19,7 +19,7 @@

-   +  

diff --git a/src/cloud-ui.html b/src/cloud-ui.html index df672dc98..17dc8eb44 100644 --- a/src/cloud-ui.html +++ b/src/cloud-ui.html @@ -5,14 +5,14 @@ - + - - + + cog
- +
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css index 785a5115d..6b682cf08 100644 --- a/src/css/3p-filters.css +++ b/src/css/3p-filters.css @@ -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; } diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css index d2a951a07..2241251ec 100644 --- a/src/css/cloud-ui.css +++ b/src/css/cloud-ui.css @@ -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; - } diff --git a/src/css/common.css b/src/css/common.css index e2a6f318d..e2389e2e5 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -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 diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 0d95de9cc..b144dca3c 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -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; } diff --git a/src/css/dashboard.css b/src/css/dashboard.css index 886145e75..7a939c8c1 100644 --- a/src/css/dashboard.css +++ b/src/css/dashboard.css @@ -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 */ diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css index dfd294172..7db2407f5 100644 --- a/src/css/document-blocked.css +++ b/src/css/document-blocked.css @@ -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; diff --git a/src/css/fonts/Inter/Inter-Regular.woff2 b/src/css/fonts/Inter/Inter-Regular.woff2 new file mode 100644 index 000000000..d5ffd2a1f Binary files /dev/null and b/src/css/fonts/Inter/Inter-Regular.woff2 differ diff --git a/src/css/fonts/Inter/Inter-SemiBold.woff2 b/src/css/fonts/Inter/Inter-SemiBold.woff2 new file mode 100644 index 000000000..df746af99 Binary files /dev/null and b/src/css/fonts/Inter/Inter-SemiBold.woff2 differ diff --git a/src/css/fonts/Inter/LICENSE.txt b/src/css/fonts/Inter/LICENSE.txt new file mode 100644 index 000000000..d6882801b --- /dev/null +++ b/src/css/fonts/Inter/LICENSE.txt @@ -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. diff --git a/src/css/fonts/Metropolis/Metropolis-Regular.woff2 b/src/css/fonts/Metropolis/Metropolis-Regular.woff2 new file mode 100644 index 000000000..f50bf3422 Binary files /dev/null and b/src/css/fonts/Metropolis/Metropolis-Regular.woff2 differ diff --git a/src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 b/src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 new file mode 100644 index 000000000..fad6dfdec Binary files /dev/null and b/src/css/fonts/Metropolis/Metropolis-SemiBold.woff2 differ diff --git a/src/css/fonts/Metropolis/README.md b/src/css/fonts/Metropolis/README.md new file mode 100644 index 000000000..1dc4d5313 --- /dev/null +++ b/src/css/fonts/Metropolis/README.md @@ -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. diff --git a/src/css/fonts/Metropolis/UNLICENSE b/src/css/fonts/Metropolis/UNLICENSE new file mode 100644 index 000000000..68a49daad --- /dev/null +++ b/src/css/fonts/Metropolis/UNLICENSE @@ -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 diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index b74128d46..850e45bea 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -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; diff --git a/src/css/settings.css b/src/css/settings.css index 768d1014c..0e7ea9398 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -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; + } diff --git a/src/css/themes/default.css b/src/css/themes/default.css index 31aa20a61..f727976c1 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -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); } diff --git a/src/dashboard.html b/src/dashboard.html index d50ffe453..8e78909e0 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -24,8 +24,8 @@
  -   - +   +
diff --git a/src/dyna-rules.html b/src/dyna-rules.html index b264050cc..17b13e21f 100644 --- a/src/dyna-rules.html +++ b/src/dyna-rules.html @@ -25,14 +25,14 @@

- - + +

- - - + + +
 
diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js index b57c01078..5dbe1266b 100644 --- a/src/js/popup-fenix.js +++ b/src/js/popup-fenix.js @@ -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); /******************************************************************************/ diff --git a/src/logger-ui.html b/src/logger-ui.html index 9193a8ead..577e9294a 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -142,7 +142,7 @@
- +
@@ -160,7 +160,7 @@
- +
diff --git a/src/popup-fenix.html b/src/popup-fenix.html index 3cda7ecf9..9e050e1be 100644 --- a/src/popup-fenix.html +++ b/src/popup-fenix.html @@ -11,7 +11,7 @@ - +
diff --git a/src/settings.html b/src/settings.html index 5d29e8093..27dad990b 100644 --- a/src/settings.html +++ b/src/settings.html @@ -12,43 +12,43 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 info-circle
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 info-circle
+
+
+
+
+
+
+
+
-
- - -

  - -

-

+ + +
+
+ + +
diff --git a/src/shortcuts.html b/src/shortcuts.html index 5ee3e4954..7fa07b352 100644 --- a/src/shortcuts.html +++ b/src/shortcuts.html @@ -22,7 +22,7 @@ - +
diff --git a/src/whitelist.html b/src/whitelist.html index db2777620..311a4f8ab 100644 --- a/src/whitelist.html +++ b/src/whitelist.html @@ -25,11 +25,11 @@

- - + +    - - + +