diff options
Diffstat (limited to 'browser/themes/shared/controlcenter')
9 files changed, 824 insertions, 0 deletions
diff --git a/browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg b/browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg new file mode 100644 index 0000000000..29ba08f7b6 --- /dev/null +++ b/browser/themes/shared/controlcenter/3rdpartycookies-blocked.svg @@ -0,0 +1,6 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M5.59978 2.99995H4.39978L4.03378 3.36595L3.04678 2.37895C4.06753 1.47739 5.31505 0.871608 6.65478 0.626953L7.03178 0.910953C7.01178 1.10495 6.99978 1.30095 6.99978 1.49995C7.00068 2.96218 7.49473 4.38137 8.40205 5.52805C9.30938 6.67472 10.5769 7.48186 11.9998 7.81895V8.59995L12.3998 8.99995H13.5998L13.9998 8.59995V7.96095C14.4328 7.92695 14.8568 7.86395 15.2628 7.75395L15.4998 7.99995C15.5004 9.82521 14.8319 11.5874 13.6208 12.953L8.99978 8.33195V7.39995L8.59978 6.99995H7.66778L5.63378 4.96595L5.99978 4.59995V3.39995L5.59978 2.99995ZM0.627649 2.01098C0.790849 2.00886 0.948424 2.07057 1.06679 2.18295L13.8168 14.9319C13.9336 15.0496 13.9992 15.2087 13.9992 15.3744C13.9992 15.5402 13.9336 15.6993 13.8168 15.8169C13.6993 15.934 13.5402 15.9997 13.3743 15.9997C13.2084 15.9997 13.0493 15.934 12.9318 15.8169L11.6588 14.5439C10.5768 15.1519 9.32979 15.4999 7.99979 15.4999C6.01066 15.4999 4.10301 14.7098 2.69649 13.3032C1.28996 11.8967 0.499788 9.98907 0.499787 7.99995C0.498852 6.71891 0.828477 5.45931 1.45679 4.34295L0.181787 3.06795C0.0694089 2.94958 0.00770211 2.79201 0.00981831 2.62881C0.0119345 2.46561 0.0777068 2.30969 0.193117 2.19428C0.308527 2.07887 0.464448 2.01309 0.627649 2.01098ZM1.99979 8.59995L2.39979 8.99995H3.59979L3.99979 8.59995V7.39995L3.59979 6.99995H2.39979L1.99979 7.39995V8.59995ZM5.59979 12.9999L5.99979 12.5999V11.3999L5.59979 10.9999H4.39979L3.99979 11.3999V12.5999L4.39979 12.9999H5.59979Z"/> +</svg> diff --git a/browser/themes/shared/controlcenter/3rdpartycookies.svg b/browser/themes/shared/controlcenter/3rdpartycookies.svg new file mode 100644 index 0000000000..4477d1b43e --- /dev/null +++ b/browser/themes/shared/controlcenter/3rdpartycookies.svg @@ -0,0 +1,6 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M6.655.627C3.155 1.261.5 4.318.5 8a7.5 7.5 0 0 0 15 0l-.237-.246c-.406.11-.83.173-1.263.207l0 .639-.4.4-1.2 0-.4-.4 0-.781A6.498 6.498 0 0 1 7 1.5c0-.199.012-.395.032-.589zM2.4 9 2 8.6l0-1.2.4-.4 1.2 0 .4.4 0 1.2-.4.4zM6 12.6l-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4zm0-8-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4zm3 4-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4zm3 4-.4.4-1.2 0-.4-.4 0-1.2.4-.4 1.2 0 .4.4z"/> +</svg> diff --git a/browser/themes/shared/controlcenter/cryptominers.svg b/browser/themes/shared/controlcenter/cryptominers.svg new file mode 100644 index 0000000000..9486ae76de --- /dev/null +++ b/browser/themes/shared/controlcenter/cryptominers.svg @@ -0,0 +1,6 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M12 2 9.25 2l0-.875a.625.625 0 0 0-1.25 0L8 2 5.414 2a.997.997 0 0 0-.707.293L3.293 3.707A1 1 0 0 0 3 4.414L3 5a1 1 0 0 0 1 1l4 0 0 8.875a.625.625 0 0 0 1.25 0L9.25 6 12 6a1 1 0 0 0 1-1l0-2a1 1 0 0 0-1-1z"/> +</svg> diff --git a/browser/themes/shared/controlcenter/dashboard.svg b/browser/themes/shared/controlcenter/dashboard.svg new file mode 100644 index 0000000000..e2908d9485 --- /dev/null +++ b/browser/themes/shared/controlcenter/dashboard.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 12H4a2 2 0 0 1-2-2V3a1 1 0 0 0-2 0v7a4 4 0 0 0 4 4h11a1 1 0 0 0 0-2z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M4 11a1 1 0 0 0 1-1V8a1 1 0 0 0-2 0v2a1 1 0 0 0 1 1zM7 11a1 1 0 0 0 1-1V4a1 1 0 0 0-2 0v6a1 1 0 0 0 1 1zM10 11a1 1 0 0 0 1-1V6a1 1 0 0 0-2 0v4a1 1 0 0 0 1 1zM13 11a1 1 0 0 0 1-1V7a1 1 0 0 0-2 0v3a1 1 0 0 0 1 1z"/></svg> diff --git a/browser/themes/shared/controlcenter/etp-milestone.svg b/browser/themes/shared/controlcenter/etp-milestone.svg new file mode 100644 index 0000000000..c9dd70954a --- /dev/null +++ b/browser/themes/shared/controlcenter/etp-milestone.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg width="32" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M31.617 10.435V5.009a1.74 1.74 0 00-1.443-1.74L16.296.87a1.687 1.687 0 00-.592 0L1.87 3.288a1.74 1.74 0 00-1.444 1.74v5.425c-.043 2.87-.07 4.948.052 6.244.748 8.295 2.496 12.078 5.47 16.147a16.165 16.165 0 009.704 6.287c.113.013.227.013.34 0 .112.014.226.014.338 0a16.409 16.409 0 009.757-6.313c2.974-4.07 4.722-7.826 5.47-16.156.13-1.287.104-3.365.06-6.226z" fill="context-fill"/><path d="M15.704.87L1.87 3.287a1.74 1.74 0 00-1.444 1.74v5.425c-.043 2.87-.07 4.948.052 6.244.748 8.295 2.496 12.078 5.47 16.147a16.165 16.165 0 009.704 6.287c.113.013.227.013.34 0V.87a1.74 1.74 0 00-.288 0z" opacity=".5" fill="context-stroke"/><path d="M12.878 11.635c-1.4.174-2.295 2.191-2.052 4.122.122.982.713 1.452.87 3.217 0 .174 0 .322.043.47a16.66 16.66 0 003.044-.166 5.009 5.009 0 01-.053-.87c.219-1.13.347-2.275.383-3.425-.226-1.757-.983-3.505-2.235-3.348zm2.052 8.487c-.84.135-1.688.202-2.539.2h-.548c.025.398.083.794.174 1.182.14.566.618 1.557 1.687 1.418a1.452 1.452 0 001.374-1.809c-.035-.348-.095-.67-.148-.991zm4.2-5.879c-1.252-.156-2.008 1.592-2.234 3.34.036 1.15.164 2.296.382 3.426.008.29-.01.581-.052.87 1.002.146 2.015.202 3.026.164v-.47c.174-1.738.765-2.234.87-3.216.295-1.922-.6-3.94-1.992-4.114zm-2.208 9.47a1.452 1.452 0 001.339 1.809c1.07.139 1.548-.87 1.687-1.418a7.07 7.07 0 00.174-1.174H19.6c-.845 0-1.688-.066-2.522-.2-.06.322-.121.644-.156.983z" fill="#FBFBFE"/></svg> diff --git a/browser/themes/shared/controlcenter/hero-message-background.svg b/browser/themes/shared/controlcenter/hero-message-background.svg new file mode 100644 index 0000000000..d54f1cbc4a --- /dev/null +++ b/browser/themes/shared/controlcenter/hero-message-background.svg @@ -0,0 +1,4 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg width="163" height="120" fill="context-fill" xmlns="http://www.w3.org/2000/svg"><defs/><defs><linearGradient x1="-23.704%" y1="116.44%" x2="93.24%" y2="15.294%" id="a"><stop offset="0%"/><stop stop-color="#fff" offset="100%"/></linearGradient></defs><mask id="b"><path fill="url(#a)" d="M0 0h163v120H0z"/></mask><path d="M25.808 95.468a.426.426 0 01.36 0 .52.52 0 01.275.326c1.015 2.024 2.68 5.116 4.131 6.713.341.372.07 1.026-.39.972a8.237 8.237 0 01-1.73-.402c.879 1.55 1.85 3.107 2.783 4.28 1.718-2.462 3.441-5.294 5.04-8.114a20.436 20.436 0 01-4.309 1.001c-1.144.146-1.817-1.495-.972-2.421 3.612-3.977 7.76-11.674 10.286-16.717.102-.355.35-.65.682-.81.284-.134.613-.134.898 0 .332.16.58.455.681.81 2.526 5.043 6.675 12.74 10.287 16.717.84.926.171 2.567-.973 2.421a20.436 20.436 0 01-4.309-1.001c2.628 4.635 5.593 9.306 8.316 12.306 1.065 1.172.217 3.25-1.23 3.065a28.237 28.237 0 01-3.048-.553 104.238 104.238 0 003.87 5.939c3.008-3.664 6.18-8.726 9.032-13.754a25.262 25.262 0 01-5.32 1.237c-1.41.18-2.238-1.847-1.2-2.989 4.459-4.908 9.578-14.408 12.697-20.63.125-.44.433-.804.844-1 .35-.168.757-.168 1.108 0 .411.196.718.56.844 1 3.117 6.222 8.237 15.724 12.695 20.63 1.038 1.14.212 3.17-1.2 2.99a25.252 25.252 0 01-5.318-1.238c2.014 3.554 4.19 7.124 6.354 10.206 1.243-2.014 2.414-4.236 3.266-5.937a.751.751 0 01.396-.468.598.598 0 01.52 0 .747.747 0 01.395.468 85.217 85.217 0 002.93 5.384c2.357-3.709 4.615-7.976 6.218-11.177.1-.356.35-.65.682-.811.284-.134.613-.134.897 0 .333.16.58.455.682.811a151.554 151.554 0 003.97 7.439c2.2-2.858 4.475-6.523 6.54-10.167a20.492 20.492 0 01-4.31 1.002c-1.143.146-1.817-1.495-.972-2.421 3.613-3.977 7.761-11.674 10.288-16.717.101-.356.35-.65.682-.81.284-.136.613-.136.897 0 .332.16.58.454.682.81 2.525 5.043 6.675 12.74 10.286 16.717.842.926.172 2.567-.972 2.421a20.514 20.514 0 01-4.31-1.002c2.139 3.77 4.5 7.564 6.772 10.463A67.07 67.07 0 00150 67.202C150 30.087 120.006 0 82.993 0 45.98 0 16 30.085 16 67.2a67.068 67.068 0 007.89 31.665 58.848 58.848 0 001.643-3.076.52.52 0 01.275-.321z" fill-opacity=".15" mask="url(#b)"/><path d="M49.37 43.344c0 4.74-3.822 8.63-8.536 8.63H6.528c-3.597 0-6.513-2.978-6.513-6.598 0-3.62 2.916-6.596 6.513-6.596.53.002 1.057.07 1.57.2a6.807 6.807 0 011.284-5.767 6.727 6.727 0 015.296-2.563 6.695 6.695 0 013.817 1.191c1.438-5.56 6.761-9.179 12.429-8.45 5.667.73 9.912 5.58 9.911 11.325 4.714-.002 8.534 3.889 8.534 8.628zm103.79-19.978c-.795 0-1.588.096-2.36.288a10.268 10.268 0 00-4.186-10.761 10.138 10.138 0 00-11.491.01C132.954 4.525 124.93-.93 116.39.17c-8.541 1.099-14.939 8.41-14.938 17.068-7.065.067-12.757 5.845-12.757 12.949s5.692 12.882 12.757 12.949h51.713c5.388-.058 9.726-4.467 9.726-9.885s-4.338-9.827-9.726-9.885h-.005z" transform="translate(0 22)" mask="url(#b)" fill-opacity=".2"/><path d="M107.998 44.892c.013-2.062-1.43-3.834-3.418-4.199L83.5 37l-21.08 3.693c-1.988.365-3.43 2.137-3.418 4.199-.013 5.058.018 14.086.372 18.06 1.032 11.567 3.086 17.294 7.865 23.92C73.732 95.879 83.5 97 83.5 97s9.765-1.122 16.262-10.127c4.779-6.629 6.834-12.357 7.865-23.92.353-3.972.385-13.003.372-18.061zm-5.252 17.607c-1.021 11.447-3.05 16.024-6.932 21.416-4.327 6-10.438 7.648-12.306 8.024-1.845-.382-8.023-2.061-12.322-8.024-3.883-5.383-5.91-9.964-6.932-21.416-.24-2.692-.368-8.866-.353-16.992L83.5 42.07l19.6 3.436c.015 8.124-.113 14.298-.353 16.992z" fill="#fff"/><path d="M71.306 62.31c.93 10.77 2.67 13.95 5.429 17.906A12.913 12.913 0 0083 85V50l-12 2.173c.052 4.775.155 8.396.306 10.137z" fill="#fff"/></svg>
\ No newline at end of file diff --git a/browser/themes/shared/controlcenter/mcb-disabled.svg b/browser/themes/shared/controlcenter/mcb-disabled.svg new file mode 100644 index 0000000000..b9396a8e2a --- /dev/null +++ b/browser/themes/shared/controlcenter/mcb-disabled.svg @@ -0,0 +1,7 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M18.75 9.977h-.727L6 22h12.75A2.25 2.25 0 0 0 21 19.75v-7.523a2.25 2.25 0 0 0-2.25-2.25zm-9.75 0V7a3 3 0 0 1 6 0v1.5l2.838-2.838A5.994 5.994 0 0 0 6 7v2.977h-.75A2.25 2.25 0 0 0 3 12.227v7.523a2.224 2.224 0 0 0 .105.645L13.523 9.977z"/> + <path d="M2.5 23a1.5 1.5 0 0 1-1.061-2.561l19-19A1.5 1.5 0 0 1 22.56 3.56l-19 19A1.5 1.5 0 0 1 2.5 23z" fill="#ff0039" fill-opacity="1"/> +</svg> diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css new file mode 100644 index 0000000000..d7685cdc69 --- /dev/null +++ b/browser/themes/shared/controlcenter/panel.css @@ -0,0 +1,781 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* Hide all conditional elements by default. */ +:is([when-connection],[when-customroot],[when-mixedcontent],[when-ciphers],[when-httpsonlystatus]) { + display: none; +} + +#identity-popup, +#permission-popup, +#protections-popup { + --popup-width: 30.81em; + /* Set default fill for icons in the identity popup. + Individual icons can override this. */ + fill: currentColor; + --horizontal-padding: calc(var(--arrowpanel-menuitem-padding-inline) * 2); + --vertical-section-padding: 0.9em; + --height-offset: 0px; + font: menu; +} + +#protections-popup[toast] { + --popup-width: 27.12em; +} + +#protections-popup[infoMessageShowing] { + --height-offset: 260px; +} + +/* This is used by screenshots tests to hide intermittently different + * identity popup shadows (see bug 1425253). */ +#identity-popup.no-shadow, +#permission-popup.no-shadow { + -moz-window-shadow: none; +} + +/* Show the right elements for the right connection states. */ +#identity-popup[customroot=true] [when-customroot=true], +#identity-popup[connection=not-secure] [when-connection~=not-secure], +#identity-popup[connection=secure-cert-user-overridden] [when-connection~=secure-cert-user-overridden], +#identity-popup[connection=secure-ev] [when-connection~=secure-ev], +#identity-popup[connection=secure] [when-connection~=secure], +#identity-popup[connection=chrome] [when-connection~=chrome], +#identity-popup[connection=file] [when-connection~=file], +#identity-popup[connection=associated] [when-connection~=associated], +#identity-popup[connection=extension] [when-connection~=extension], +#identity-popup[connection=cert-error-page] [when-connection~=cert-error-page], +#identity-popup[connection=net-error-page] [when-connection~=net-error-page], +#identity-popup[connection=https-only-error-page] [when-connection~=https-only-error-page], +/* Show weak cipher messages when needed. */ +#identity-popup[ciphers=weak] [when-ciphers~=weak], +/* Show mixed content warnings when needed */ +#identity-popup[mixedcontent~=active-loaded] [when-mixedcontent=active-loaded], +#identity-popup[mixedcontent~=passive-loaded]:not([mixedcontent~=active-loaded]) [when-mixedcontent=passive-loaded], +#identity-popup[mixedcontent~=active-blocked]:not([mixedcontent~=passive-loaded]) [when-mixedcontent=active-blocked], +/* Show the right elements when there is mixed passive content loaded and active blocked. */ +#identity-popup[mixedcontent~=active-blocked][mixedcontent~=passive-loaded] [when-mixedcontent~=active-blocked][when-mixedcontent~=passive-loaded], +/* HTTPS-Only and HTTPS-First Mode */ +#identity-popup[httpsonlystatus=exception] [when-httpsonlystatus~=exception], +#identity-popup[httpsonlystatus=upgraded] [when-httpsonlystatus~=upgraded], +#identity-popup[httpsonlystatus=failed-top] [when-httpsonlystatus~=failed-top], +#identity-popup[httpsonlystatus=failed-sub] [when-httpsonlystatus~=failed-sub], +/* Show 'disable MCB' button always when there is mixed active content blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=active-blocked] > button[when-mixedcontent=active-blocked] { + display: revert; +} + +/* Hide 'not secure' message in subview when weak cipher or mixed content messages are shown. */ +#identity-popup-securityView-extended-info:is([mixedcontent],[ciphers]) > description[when-connection=not-secure], +/* Hide 'passive-loaded (only)' message when there is mixed passive content loaded and active blocked. */ +#identity-popup-securityView-extended-info[mixedcontent~=passive-loaded][mixedcontent~=active-blocked] > description[when-mixedcontent=passive-loaded] { + display: none; +} + +/* Make sure hidden elements don't accidentally become visible from one of the + above selectors (see Bug 1194258) */ +#identity-popup [hidden] { + display: none !important; +} + +#identity-popup-mainView, +#permission-popup-mainView, +#protections-popup-mainView { + min-width: var(--popup-width); + max-width: var(--popup-width); +} + +#protections-popup[toast] #protections-popup-mainView > :not(#protections-popup-mainView-panel-header-section), +#protections-popup[toast] #protections-popup-mainView-panel-header-section > :not(#protections-popup-mainView-panel-header), +#protections-popup[toast] #protections-popup-mainView-panel-header > :is(.panel-info-button, #protections-popup-main-header-label) { + /* Hide all elements in the panel except for the toast descriptions */ + display: none; +} + +#protections-popup[toast] #protections-popup-mainView-panel-header { + min-height: unset; /* revert panelUI-shared.css */ +} + +#identity-popup-security-description > description { + font-weight: 600; + margin-top: 0.5em; +} + +#identity-popup-security-httpsonlymode { + margin-top: 1em; +} + +#identity-popup-security-httpsonlymode-menulist { + width: 11em; + margin: 0.5em 0; +} + +#identity-popup-security-httpsonlymode-info { + font-size: 0.85em; + color: var(--text-color-deemphasized); +} + +#identity-popup-security-httpsonlymode-info > description { + margin-bottom: 0.5em; +} + +#permission-popup-permissions-content { + padding-inline: 1.25em; + min-width: 0; +} + +/* CONTENT */ + +:where(#protections-popup, #identity-popup) :is(description, label) { + margin: 0; +} + +#protections-popup .panel-header > h1 > span, +#permission-popup .panel-header > h1 > span, +#identity-popup .panel-header > h1 > span { + /* This is needed for the overflow-wrap to work correctly when the domain name is really long. */ + max-width: calc(var(--popup-width) - 2 * var(--arrowpanel-menuitem-margin-inline)); + overflow-wrap: break-word; +} + +#protections-popup .panel-header > h1 > span { + /* The protections popup panel header text needs a different calculation because it contains an info button. + * icon-full-width is included twice to compensate for the margin-inline-start of the text, + * used to center it even if the header includes a info button. See .panel-header-with-info-button */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-info-icon-full-width) * 2); +} + +#identity-popup .panel-header > .subviewbutton-back + h1 > span { + /* Same idea as above, but in the identity popup when there's a back button. */ + max-width: calc(var(--popup-width) + - var(--arrowpanel-menuitem-margin-inline) * 2 + - var(--arrowpanel-header-back-icon-full-width) * 2); +} + +#protections-popup:not([infoMessageShowing]) #protections-popup-mainView-panel-header-section + toolbarseparator { + display: none; +} + +#protections-popup-mainView-panel-header-section { + /* Don't display the info message on top of the panel content while it fades in and out */ + overflow: hidden; +} + +#permission-popup-permissions-content > description, +#protections-popup-content > description { + color: var(--text-color-deemphasized); +} + +/* This element needs the pre-wrap because we add newlines to it in the code. */ +#identity-popup-content-supplemental { + white-space: pre-wrap; +} + +/* SECURITY */ + +#identity-popup[mixedcontent~=active-loaded] .identity-popup-connection-not-secure, +#identity-popup:not([mixedcontent]) .identity-popup-connection-not-secure { + font-weight: bold; +} + +#identity-popup-mainView > .panel-subview-body { + padding-bottom: var(--panel-subview-body-padding-block); +} + +#identity-popup-mainView[footerVisible="true"] > .panel-subview-body { + padding-bottom: 0; +} + +.identity-popup-section { + margin-inline: var(--arrowpanel-menuitem-margin-inline); + padding-inline: var(--arrowpanel-menuitem-padding-inline); +} + +.identity-popup-section.indented { + /* Align with the text displayed following the lock icon, in the connection status button above. + 16px is the icon size and 8px is the inline-start padding of the text. */ + padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + 16px + 8px); +} + +.identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + -moz-context-properties: fill; + min-height: 24px; +} + +#identity-popup[connection=chrome] .identity-popup-security-connection { + list-style-image: url(chrome://branding/content/icon48.png); +} + +#identity-popup[connection=file] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/page-portrait.svg); +} + +#identity-popup[connection=associated] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); +} + +#identity-popup[connection^=secure] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security.svg); +} + +/* Use [isbroken] to make sure we don't show a warning lock on an http page. See Bug 1192162. */ +#identity-popup[ciphers=weak] .identity-popup-security-connection, +#identity-popup[mixedcontent~=passive-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + -moz-context-properties: fill, fill-opacity; +} + +#identity-popup[connection=secure-cert-user-overridden] .identity-popup-security-connection, +#identity-popup[connection=cert-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/security-warning.svg); + fill: unset; +} + +#identity-popup[connection=net-error-page] .identity-popup-security-connection { + list-style-image: url(chrome://global/skin/icons/info.svg); + fill: unset; +} + +#identity-popup[mixedcontent~=active-loaded][isbroken] .identity-popup-security-connection { + list-style-image: url(chrome://browser/skin/controlcenter/mcb-disabled.svg); +} + +#identity-popup[connection=extension] .identity-popup-security-connection { + list-style-image: url(chrome://mozapps/skin/extensions/extension.svg); +} + +.identity-popup-security-connection-icon { + width: 16px; + height: 16px; +} + +.identity-popup-connection-secure.security-view, +.identity-popup-connection-secure.upgraded, +.identity-popup-connection-not-secure.security-view { + padding-inline-start: 8px; +} + +#identity-popup-securityView-extended-info > button, +#identity-popup-securityView-extended-info > hbox > .text-link, +#identity-popup-content-verifier, +#identity-popup-content-verifier ~ description, +#identity-popup-content-owner-label { + margin-block: 0.5em; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box { + font-weight: 600; +} + +#identity-popup-securityView-extended-info > .identity-popup-warning-box > label { + display: inline-block; +} + +#identity-popup-securityView-extended-info > button { + margin-inline: 0; +} + +@media (-moz-platform: macos) { + #identity-popup-securityView-extended-info > button { + min-height: 30px; + } + + #identity-popup-securityView-extended-info > button:focus-visible { + outline: var(--focus-outline); + } +} + +#identity-popup-content-verifier-unknown > label { + display: inline; +} + +#protections-popup-sendReportView-description > label { + display: inline; +} + +/* CONTENT BLOCKING / TRACKING PROTECTION */ + +#protections-popup-sendReportView-heading, +#protections-popup-sendReportView-body, +#protections-popup-siteNotWorkingView-body { + padding: var(--vertical-section-padding) var(--horizontal-padding); +} + +.protections-popup-sendReportView-collection-section { + margin-bottom: 16px; +} + +#protections-popup-sendReportView-collection-url { + appearance: none; + border: none; + margin: 4px 0; +} + +#protections-popup-sendReportView-collection-comments { + height: 120px; + resize: vertical; +} + +.protections-popup-sendReportView-collection-section label { + margin-bottom: 2px; +} + +#protections-popup-sendReportView-report-error { + margin-bottom: 24px; + color: #d74345; +} + +#protections-popup-not-blocking-section-why:hover, +#protections-popup-show-report-stack:hover > .protections-popup-footer-button { + background-color: var(--panel-item-hover-bgcolor); +} + +#protections-popup-show-report-stack:hover:active > .protections-popup-footer-button { + background-color: var(--panel-item-active-bgcolor); +} + +/* This subview could get filled with a lot of trackers, set a maximum size + * and allow it to scroll vertically.*/ +#protections-popup-socialblockView, +#protections-popup-cookiesView, +#protections-popup-trackersView { + max-height: calc(600px + var(--height-offset)); +} + +#protections-popup-trackersView-list.empty { + align-items: center; + justify-content: center; +} + +.protections-popup-empty-label { + color: var(--text-color-deemphasized); +} + +.protections-popup-trackersView-empty-image { + width: 48px; + height: 48px; + -moz-context-properties: fill; + margin-bottom: 16px; +} + +#protections-popup-cookiesView .protections-popup-empty-label { + margin-inline-start: 24px; + margin-block: 2px 4px; +} + +.protections-popup-cookiesView-list-header { + color: var(--text-color-deemphasized); + margin: 5px 0; +} + +#protections-popup-cookiesView-list > .protections-popup-cookiesView-list-section:only-of-type > .protections-popup-cookiesView-list-header { + display: none; +} + +.protections-popup-list { + padding: 5px 16px !important; /* override panelUI-shared.css */ +} + +.protections-popup-list-item { + display: flex; + margin: 5px 0; +} + +.protections-popup-list-host-label { + direction: ltr; + text-align: match-parent; +} + +/* Special alignment for items which include a state label (e.g. "Allowed") */ +.protections-popup-list-item-with-state > label { + margin: auto 0; +} +.protections-popup-list-item-with-state { + justify-content: space-between; +} + +/* Content Blocking categories */ + +#protections-popup-no-trackers-found-description { + margin: 4.85em 7.25em; + font-size: 1.1em; + text-align: center; + color: var(--text-color-deemphasized); +} + +.protections-popup-section-header { + color: var(--text-color-deemphasized); +} + +:root[uidensity="compact"] .protections-popup-section-header { + margin-block: 4px; +} + +#tracking-protection-container > tooltip { + max-width: var(--popup-width); +} +/* + * The category list is split into two sections: "Blocking" and "Not Blocking", + * with five different category items distributed between them at runtime. + * To achieve this, we use a grid layout with 12 rows: one row for each header + * label and five rows in each section for the items. + * Items with the "blocked" class are assigned rows 2-6, and those without + * are assigned rows 8-12, with the headers taking rows 1 and 7. + */ + +#protections-popup-no-trackers-found-description:not([hidden]) ~ #protections-popup-content { + display: none; +} + +#protections-popup-not-blocking-section-why { + border-radius: 2px; +} + +#protections-popup-not-blocking-section-why:hover { + outline: 4px solid var(--panel-item-hover-bgcolor); +} + +.trackers-icon { + list-style-image: url(chrome://browser/skin/canvas.svg); +} + +.socialblock-icon { + list-style-image: url(chrome://browser/skin/thumb-down.svg); +} + +.thirdpartycookies-icon { + list-style-image: url(chrome://browser/skin/controlcenter/3rdpartycookies.svg); +} + +.cryptominers-icon { + list-style-image: url(chrome://browser/skin/controlcenter/cryptominers.svg); +} + +.fingerprinters-icon { + list-style-image: url(chrome://browser/skin/fingerprint.svg); +} + +/* PERMISSIONS */ + +.permission-popup-permission-item { + min-height: 24px; +} + +.protections-popup-category[uidisabled] { + display: none; +} + +#permission-popup-storage-access-permission-list-header { + padding-inline-end: 8px; +} + +.permission-popup-permission-item, +#permission-popup-storage-access-permission-list-header { + margin-block: 0.25em; +} + +#permission-popup-permission-reload-hint, +#permission-popup-permission-empty-hint { + margin-top: 8px; +} + +.permission-popup-permission-list-anchor[anchorfor="3rdPartyStorage"] > vbox:only-child { + display: none; +} + +#permission-popup-storage-access-permission-list-hint { + margin-top: 0.25em; + color: var(--text-color-deemphasized); +} + +#permission-popup-storage-access-permission-list-hint, +#permission-popup-storage-access-permission-learn-more { + /* Matches offset for items - 16px icon + 8px margin */ + margin-inline-start: calc(16px + 8px); +} + +.permission-popup-permission-icon { + width: 16px; + height: 16px; +} + +.permission-popup-permission-label, +.permission-popup-permission-header-label { + margin-inline-start: 8px; +} + +.permission-popup-permission-label-subitem { + /* Align label with other labels with icon. */ + /* icon width + icon inline margin + label inline margin */ + margin-inline-start: calc(16px + 3px + 10px); +} + +.permission-popup-permission-state-label { + margin-inline-end: 5px; + text-align: end; +} + +.permission-popup-permission-remove-button { + appearance: none; + min-width: auto; + margin: 0; + margin-inline-start: 2px; + border-width: 0; + padding: 2px; + padding-inline-end: 6px; + background-color: var(--button-bgcolor); + color: var(--button-color); + border-radius: 4px; +} + +.permission-popup-permission-remove-button > .button-box > .button-icon { + margin: 0; + width: 12px; + height: 12px; + list-style-image: url(chrome://global/skin/icons/close.svg); + -moz-context-properties: fill; + fill: currentColor; +} + +.permission-popup-permission-remove-button > .button-box > .button-text { + display: none; +} + +.permission-popup-permission-remove-button:not(:focus-visible):hover { + background-color: var(--button-hover-bgcolor); +} + +.permission-popup-permission-remove-button:not(:focus-visible):hover:active { + background-color: var(--button-active-bgcolor) +} + +#protections-popup-cookie-banner-section[hasException] .protections-popup-cookie-banner-switch-on-header, +#protections-popup-cookie-banner-section:not([hasException]) .protections-popup-cookie-banner-switch-off-header { + display: none; +} + +#protections-popup-toast-panel-tp-on-desc, +#protections-popup-toast-panel-tp-off-desc { + display: none; +} + +#protections-popup:not([hasException])[toast] #protections-popup-toast-panel-tp-on-desc, +#protections-popup[hasException][toast] #protections-popup-toast-panel-tp-off-desc { + display: revert; +} + +.protections-popup-switch-header { + font-weight: 600; +} + +#protections-popup-siteNotWorkingView-body-issue-list { + padding-inline-start: 1em; +} + +/* Protection popup footer categories */ + +#protections-popup-trackers-blocked-counter-box { + margin: var(--arrowpanel-menuitem-margin); + padding: var(--arrowpanel-menuitem-padding); + visibility: hidden; + opacity: 0; + transition: opacity 200ms linear; + justify-self: end; +} + +#protections-popup-trackers-blocked-counter-box[showing] { + visibility: visible; + opacity: 1; +} + +#protections-popup-trackers-blocked-counter-description, +#protections-popup-footer-protection-type-label { + color: var(--text-color-deemphasized); +} + +.protections-popup-description > description { + margin: 10px 16px; +} + +#protections-popup:not([milestone]) #protections-popup-milestones, +#protections-popup:not([milestone]) #protections-popup-milestones-separator { + display: none; +} + +#protections-popup-milestones-content { + background-color: var(--panel-banner-item-background-color); +} + +/* The padding-block for menuitems is set to 0 in compact mode which, with the + * shield icon being bigger than a usual menuitem, makes the item look crowded + * even for compact mode. */ +:root[uidensity="compact"] #protections-popup-milestones-content { + padding-block: 4px; +} + +#protections-popup-milestones-content:hover { + background-color: var(--panel-banner-item-hover-bgcolor); +} + +#protections-popup-milestones-content:hover:active { + background-color: var(--panel-banner-item-active-bgcolor); +} + +#protections-popup-milestones-text { + font-weight: 600; +} + +#protections-popup-milestones-illustration { + list-style-image: url(chrome://browser/skin/controlcenter/etp-milestone.svg); + -moz-context-properties: fill, stroke; + margin-inline-start: var(--horizontal-padding); + margin-inline-end: 4px; + height: 40px; + width: 32px; +} + +#protections-popup[milestone] #protections-popup-milestones-illustration { + fill: #45278d; + stroke: #321c64; +} + +#protections-popup[milestone="5000"] #protections-popup-milestones-illustration { + fill: #5a29cb; + stroke: #45278d; +} + +#protections-popup[milestone="10000"] #protections-popup-milestones-illustration { + fill: #7641e5; + stroke: #5a29cb; +} + +#protections-popup[milestone="25000"] #protections-popup-milestones-illustration { + fill: #e31587; + stroke: #c60084; +} + +#protections-popup[milestone="50000"] #protections-popup-milestones-illustration { + fill: #ff298a; + stroke: #e31587; +} + +#protections-popup[milestone="100000"] #protections-popup-milestones-illustration { + fill: #ffa436; + stroke: #e27f2e; +} + +#protections-popup[milestone="500000"] #protections-popup-milestones-illustration { + fill: #ffd567; + stroke: #ffbd4f; +} + +.permission-popup-section { + padding-bottom: 12px; +} + +#permission-popup-menulist { + padding-inline: 12px 6px; +} + +.protections-popup-section-header, +.protections-popup-switch-section-header, +#protections-popup-siteNotWorkingView-header { + padding: var(--arrowpanel-menuitem-padding); + margin: var(--arrowpanel-menuitem-margin); +} + +.identity-popup-expander:focus-visible, +.permission-popup-permission-remove-button:focus-visible { + outline: var(--focus-outline); +} + +@media (-moz-platform: linux) { + .identity-popup-expander > .button-box, + .permission-popup-permission-remove-button > .button-box { + appearance: none; + } +} + +#blocked-popup-indicator-item, +#geo-access-indicator-item { + margin-top: -2px; + margin-inline-start: 16px; +} + +#geo-access-indicator-item { + font-size: 0.8em; + color: var(--text-color-deemphasized); +} + +/** Shim-allow warning and indicator icons **/ + +.protections-popup-shim-allow-hint { + padding: 0 2em; + margin-block-end: 10px; +} + +.protections-popup-shim-allow-hint-icon, +.protections-popup-list-host-shim-allow-indicator { + -moz-context-properties: fill; + background-image: url("chrome://global/skin/icons/info-filled.svg"); + background-repeat: no-repeat; + background-position: center; + + fill: light-dark(#0090ED, #80EBFF); +} + +.protections-popup-shim-allow-hint-icon { + width: 24px; + height: 24px; + + background-size: contain; + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + width: 16px; +} + +.protections-popup-shim-allow-hint-icon { + margin-inline-end: 0.5em; +} + +.protections-popup-list-host-shim-allow-indicator { + margin-inline-start: 0.5em; + min-width: 16px; +} + +#cookieBannerView-disable-site, +#cookieBannerView-enable-site { + font-weight: 600; +} + +.protections-popup-cookieBannerView-footer { + margin-top: auto; +} + + +/* Cookie banner state toggles for the popup menu item */ + +#protections-popup-cookie-banner-section:not([data-state="detected"]) description#protections-popup-cookie-banner-detected, +#protections-popup-cookie-banner-section:not([data-state="undetected"]) description#protections-popup-cookie-banner-undetected, +#protections-popup-cookie-banner-section:not([data-state="site-disabled"]) description#protections-popup-cookie-banner-site-disabled { + display: none; +} + +/* Cookie banner state toggles for the subview: if the state is detected, show + * the disable controls; if the state is site-disabled, show the enable controls. */ +#protections-popup-cookieBannerView:not([data-state="detected"]) #protections-popup-cookieBannerView-disable-button, +#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site, +#protections-popup-cookieBannerView:not([data-state="detected"]) description#cookieBannerView-disable-site-warning, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) #protections-popup-cookieBannerView-enable-button, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site, +#protections-popup-cookieBannerView:not([data-state="site-disabled"]) description#cookieBannerView-enable-site-description { + display: none; +} diff --git a/browser/themes/shared/controlcenter/tracking-protection.svg b/browser/themes/shared/controlcenter/tracking-protection.svg new file mode 100644 index 0000000000..341e44fa6d --- /dev/null +++ b/browser/themes/shared/controlcenter/tracking-protection.svg @@ -0,0 +1,6 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M10 20c-.466 0-.934-.115-1.354-.332-2.15-1.121-4.122-2.933-5.552-5.102-.709-1.073-1.206-2.368-1.478-3.85L.909 6.872a3.058 3.058 0 0 1 1.554-3.247L8.565.363a3.029 3.029 0 0 1 2.867-.004l6.102 3.323a3.05 3.05 0 0 1 1.557 3.254l-.705 3.792c-.271 1.473-.769 2.762-1.475 3.832-1.429 2.169-3.401 3.982-5.555 5.106A2.94 2.94 0 0 1 10 20zM9.515 1.556 2.845 5.13l-.507 1.238.754 4.077c.235 1.282.658 2.391 1.255 3.295 1.292 1.96 3.065 3.592 4.992 4.597l1.324 0c1.93-1.008 3.704-2.643 4.995-4.602.595-.902 1.017-2.006 1.252-3.28l.753-4.087-.61-1.239-6.559-3.572-.979 0z"/> +</svg> |
