Adding upstream version 110.0.1.upstream/110.0.1upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

8 files changed, 862 insertions, 0 deletions

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..2c24550951
--- /dev/null
+++ b/browser/themes/shared/controlcenter/panel.css
@@ -0,0 +1,825 @@
+/* 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=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 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 {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 11em;
+  margin: 0.5em 0;
+}
+
+#identity-popup-security-httpsonlymode-info {
+  font-size: 0.85em;
+  color: var(--panel-description-color);
+}
+
+#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 and icon-margin are 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
+                  - var(--arrowpanel-header-info-icon-margin-inline-end) * 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(--panel-description-color);
+}
+
+/* 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^=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 > 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);
+  }
+}
+
+/* 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;
+}
+
+.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 {
+  -moz-box-align: center;
+  -moz-box-pack: center;
+}
+
+.protections-popup-empty-label {
+  color: var(--panel-description-color);
+}
+
+.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(--panel-description-color);
+  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(--panel-description-color);
+}
+
+.protections-popup-section-header {
+  color: var(--panel-description-color);
+}
+
+: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(--panel-description-color);
+}
+
+#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;
+  margin: 0;
+  margin-inline-start: 2px;
+  border-width: 0;
+  min-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(:-moz-focusring):hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.permission-popup-permission-remove-button:not(:-moz-focusring):hover:active {
+  background-color: var(--button-active-bgcolor)
+}
+
+#protections-popup[hasException] .protections-popup-tp-switch-on-header,
+#protections-popup:not([hasException]) .protections-popup-tp-switch-off-header {
+  display: none;
+}
+
+#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-cookie-banner-section[uiDisabled],
+#protections-popup-cookie-banner-section-separator[uiDisabled]{
+  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-tp-switch-label-box,
+.protections-popup-tp-switch-box {
+  min-height: 40px;
+  -moz-box-pack: center;
+}
+
+/* This is needed in order to show a correct height if the 'Site not working?'
+   link is not displaying. */
+.protections-popup-switch-section[short] > .protections-popup-tp-switch-label-box,
+.protections-popup-switch-section[short] > .protections-popup-tp-switch-box {
+  min-height: 30px;
+}
+
+.protections-popup-switch-header {
+  font-weight: 600;
+}
+
+.protections-popup-tp-switch {
+  appearance: none;
+  box-sizing: border-box;
+  min-width: 30px;
+  border-radius: 10px;
+  background-color: var(--button-bgcolor);
+  border: 1px solid hsla(210,4%,10%,.14);
+  margin-block: 4px;
+  margin-inline-start: 1px;
+  padding: 2px;
+  padding-inline-end: 0;
+  transition: padding .2s ease;
+}
+
+.protections-popup-tp-switch::before {
+  position: relative;
+  display: block;
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 10px;
+  background: white;
+  outline: 1px solid var(--panel-separator-color);
+}
+
+.protections-popup-tp-switch[enabled] {
+  background-color: var(--button-primary-bgcolor);
+  border-color: var(--button-primary-hover-bgcolor);
+  /* Push the toggle to the right. */
+  padding-inline-start: 16px;
+}
+
+.protections-popup-tp-switch[enabled]:hover {
+  background-color: var(--button-primary-hover-bgcolor);
+  border-color: var(--button-primary-active-bgcolor);
+}
+
+.protections-popup-tp-switch[enabled]:hover:active {
+  background-color: var(--button-primary-active-bgcolor);
+  border-color: var(--button-primary-active-bgcolor);
+}
+
+.protections-popup-tp-switch:not([enabled]):hover {
+  background-color: var(--button-hover-bgcolor);
+}
+
+.protections-popup-tp-switch:not([enabled]):hover:active {
+  background-color: var(--button-active-bgcolor);
+}
+
+#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(--panel-description-color);
+}
+
+.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;
+}
+
+#protections-popup-tp-switch-breakage-link,
+#protections-popup-tp-switch-breakage-fixed-link {
+  text-decoration: underline;
+}
+
+.permission-popup-section {
+  padding-bottom: 12px;
+}
+
+#permission-popup-menulist {
+  padding-inline: 12px 6px;
+}
+
+.protections-popup-section-header,
+.protections-popup-switch-section,
+#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;
+  }
+}
+
+.protections-popup-tp-switch:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+#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(--panel-description-color);
+}
+
+/** 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: #0090ED;
+}
+
+.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;
+}
+
+:root[lwt-popup-brighttext] .protections-popup-shim-allow-hint-icon,
+:root[lwt-popup-brighttext] .protections-popup-list-host-shim-allow-indicator {
+  fill: #80EBFF;
+}
+
+.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;
+}
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>