Bug 1984040 — fix ip protection status card top border and ring alignment. r=ip-protection-reviewers,fchasen

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

Author: kpatenio

browser/components/ipprotection/content/ipprotection-content.css

@@ -45,6 +45,12 @@ hr {
   --box-icon-fill: var(--connection-shield-color);
   --box-icon-stroke: var(--shield-bgcolor);
   -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);
 
@@ -67,14 +73,21 @@ hr {
   width: 100%;
   height: 100%;
   contain: strict;
-  background-position-x: -66px;
-  background-position-y: -70px;
+  /**
+   * 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(--icon-size-xlarge) + var(--space-large) - 15px);
+  background-position-y: calc(-100px + var(--icon-size-xlarge) + var(--space-large) - 13px);
   background-image: url("chrome://browser/content/ipprotection/assets/rings.svg");
   background-repeat: no-repeat;
 
   &:dir(rtl) {
-    background-position-x: calc(100% + 66px);
-    background-position-y: calc(100% + 11px);
+    /* Shift by approximately 100% of the element's width to move the rings to the opposite side. */
+    background-position-x: calc(100% + var(--icon-size-xlarge) + var(--space-large) + 28px);
   }
 
   @media (prefers-reduced-motion: reduce) {

browser/components/ipprotection/content/ipprotection-content.mjs

@@ -295,6 +295,12 @@ export default class IPProtectionContentElement extends MozLitElement {
       : null;
   }
 
+  animationRingsTemplate() {
+    return html` <div id="status-card-animation">
+      <div id="animation-rings"></div>
+    </div>`;
+  }
+
   statusCardTemplate() {
     let protectionEnabled = this.state.isProtectionEnabled;
     const statusCardL10nId = protectionEnabled
@@ -311,12 +317,8 @@ export default class IPProtectionContentElement extends MozLitElement {
     let time =
       this.canShowConnectionTime && this._timeString ? this._timeString : "";
 
-    return html`<moz-box-group class="vpn-status-group">
-      ${this.showAnimation
-        ? html` <div id="status-card-animation">
-            <div id="animation-rings"></div>
-          </div>`
-        : null}
+    return html` <moz-box-group class="vpn-status-group">
+      ${this.showAnimation ? this.animationRingsTemplate() : null}
       <moz-box-item
         id="status-card"
         class=${classMap({