Bug 1997406 — implement new status card designs for the ip protection panel r=fluent-reviewers,ip-protection-reviewers,bolsson,rking

Differential Revision: https://phabricator.services.mozilla.com/D271156

Author: kpatenio

browser/components/ipprotection/assets/flags/us.png

@@ -17,10 +17,6 @@ export const LINKS = Object.freeze({
   SUPPORT_URL: "https://support.mozilla.org/kb/use-ip-concealment-in-firefox",
 });
 
-export const FLAGS = Object.freeze({
-  us: "chrome://browser/content/ipprotection/assets/flags/us.png",
-});
-
 export const ERRORS = Object.freeze({
   GENERIC: "generic-error",
 });

browser/components/ipprotection/assets/ipprotection-connection-off.svg

@@ -12,8 +12,6 @@ import {
 // eslint-disable-next-line import/no-unassigned-import
 import "chrome://browser/content/ipprotection/ipprotection-header.mjs";
 // eslint-disable-next-line import/no-unassigned-import
-import "chrome://browser/content/ipprotection/ipprotection-flag.mjs";
-// eslint-disable-next-line import/no-unassigned-import
 import "chrome://browser/content/ipprotection/ipprotection-message-bar.mjs";
 // eslint-disable-next-line import/no-unassigned-import
 import "chrome://browser/content/ipprotection/ipprotection-signedout.mjs";
@@ -226,16 +224,6 @@ export default class IPProtectionContentElement extends MozLitElement {
     `;
   }
 
-  descriptionTemplate() {
-    return this.state.location
-      ? html`
-          <ipprotection-flag
-            .location=${this.state.location}
-          ></ipprotection-flag>
-        `
-      : null;
-  }
-
   statusCardTemplate() {
     return html`
       <ipprotection-status-card

browser/components/ipprotection/assets/ipprotection-connection-on.svg

@@ -5,14 +5,7 @@
 @import "chrome://global/skin/global.css";
 
 :host {
-  --status-card-connected-background-color: var(--color-violet-90);
-  --status-card-connected-text-color: var(--color-white);
-  --connection-globe-icon-size: 48px;
-  --connection-rings-extra-space-x: 23px;
-  --connection-rings-extra-space-y: 23px;
-  --connection-shield-color: var(--panel-background);
-  --connection-shield-off-background-color: var(--icon-color-critical);
-  --connection-shield-on-background-color: var(--color-accent-primary);
+  --border-color: var(--border-color-card);
 }
 
 #ipprotection-content-wrapper {
@@ -22,11 +15,6 @@
   padding-block: var(--panel-subview-body-padding-block);
 }
 
-.vpn-top-content {
-  margin-inline: var(--space-large);
-  margin-block-start: var(--space-small);
-}
-
 .vpn-status-group {
   display: block;
   position: relative;
@@ -35,76 +23,14 @@
 }
 
 .is-enabled {
-  color: var(--status-card-connected-text-color);
-  background-color: var(--status-card-connected-background-color);
+  background-color: var(--background-color-success);
 }
 
 #status-card {
-  --shield-bgcolor: var(--connection-shield-off-background-color);
-  --box-icon-size: var(--connection-globe-icon-size);
-  --box-icon-fill: var(--connection-shield-color);
-  --box-icon-stroke: var(--shield-bgcolor);
   --box-label-font-weight: var(--font-weight-semibold);
   -moz-context-properties: fill, stroke;
-  /**
-   * moz-box-group changes the border of items based on its position in the group.
-   * Undo it to preserve the border radius even though the animation rings are
-   * loaded first in the group.
-   */
-  --box-border-radius-start: initial;
-  fill: var(--connection-shield-color);
-  stroke: var(--shield-bgcolor);
-
-  &.is-enabled {
-    --shield-bgcolor: var(--connection-shield-on-background-color);
-  }
 }
 
 #connection-toggle {
-  --toggle-width: var(--size-item-xlarge);
-  --toggle-height: var(--size-item-medium);
-  --toggle-dot-margin: 2px;
   margin-inline-end: var(--space-small);
 }
-
-#status-card-animation {
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-#animation-rings {
-  display: block;
-  width: 100%;
-  height: 100%;
-  contain: strict;
-  /**
-   * A hacky attempt at centering the rings with the globe icon.
-   * It makes some assumptions about the icon size and padding pixels used in moz-box-item.
-   * The rings are 200px in height and width, so they have a radius of 100px.
-   * Additional px gap is merely for alignment and not tied to any element.
-   * TODO: (Bug 1981251) See if we can better calculate the center coords.
-   */
-  background-position-x: calc(-100px + var(--connection-globe-icon-size) + var(--space-large) - var(--connection-rings-extra-space-x));
-  background-position-y: calc(-100px + var(--connection-globe-icon-size) + var(--space-large) - var(--connection-rings-extra-space-y));
-  background-image: url("chrome://browser/content/ipprotection/assets/rings.svg");
-  background-repeat: no-repeat;
-
-  &:dir(rtl) {
-    --connection-rings-extra-space-x: 4.5px;
-    /* Shift by approximately 100% of the element's width to move the rings to the opposite side. */
-    background-position-x: calc(100% + var(--connection-globe-icon-size) + var(--space-large) + var(--connection-rings-extra-space-x));
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    display: none;
-  }
-}
-
-#location-wrapper {
-  --box-icon-fill: currentColor;
-  --box-label-font-weight: var(--font-weight-semibold);
-}