Update panel

- Badge the Options icon when proxy and/or nativeMessaging permissions are disabled. Remove on click, don't show again.
- Use localized strings
- Refactors + cleanup

src/css/popup.css

@@ -445,6 +445,7 @@ input:checked + .slider::before {
 /* Primary CTA Buttons */
 
 .primary-cta {
+  block-size: 32px;
   background-color: var(--primaryCtaDefault);
   border: transparent;
   border-radius: 4px;
@@ -481,10 +482,6 @@ input:checked + .slider::before {
   transition: opacity 0.1s ease-in-out, max-height 0.3s ease-in-out;
 }
 
-#moz-vpn-tout.disappear {
-  animation: hideTout 0.2s ease-in forwards;
-}
-
 @keyframes appear {
   0% {
     opacity: 0;
@@ -497,22 +494,6 @@ input:checked + .slider::before {
   }
 }
 
-@keyframes hideTout {
-  0% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    transform: translateY(20%);
-    opacity: 0;
-  }
-}
-
 /* Mozilla VPN Controller UI in Container Management Panel */
 
 .moz-vpn-content,
@@ -522,9 +503,6 @@ input:checked + .slider::before {
   flex-direction: column;
   padding-block: 16px;
   transition: max-height 0.3s ease-in-out, padding-block-end 0.2s ease-in-out;
-
-  /* max-block-size: 56px; */
-  min-block-size: 56px;
   box-shadow: 0 0 0 1px var(--hr-grey);
 }
 
@@ -610,7 +588,8 @@ input.proxies {
 
 .moz-vpn-cta {
   block-size: 32px;
-  margin-block: 16px;
+  margin-block-start: 16px;
+  margin-block-end: 4px;
   margin-inline: var(--marginInline);
   text-align: center;
 }
@@ -685,6 +664,7 @@ input.proxies {
   max-block-size: 0;
   opacity: 0;
   visibility: hidden;
+  display: none;
   background-color: var(--bgColor);
   transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
 }
@@ -713,6 +693,7 @@ input.proxies {
 }
 
 .expanded .collapsible-content {
+  display: flex;
   max-block-size: 500px;
   opacity: 1;
   visibility: visible;
@@ -1518,9 +1499,7 @@ manage things like container crud */
 /* Panel footer */
 .panel-footer {
   align-items: center;
-  background: #efefef;
   block-size: var(--footerHeight);
-  border-block-end: 1px solid #d8d8d8;
   color: #000;
   display: flex;
   font-size: 13px;
@@ -1994,6 +1973,24 @@ input {
   text-decoration: none;
 }
 
+.info-icon-alert::after {
+  block-size: 12px;
+  inline-size: 12px;
+  background-color: var(--alertColor);
+  content: "1";
+  border-radius: 50%;
+  position: absolute;
+  inset-block: -5px;
+  inset-inline-end: -6px;
+  box-shadow: 0 0 1px #00000075;
+  font-size: 8px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bolder;
+}
+
 .delete-warning {
   padding-block-end: 8px;
   padding-block-start: 8px;
@@ -2035,7 +2032,9 @@ tr:hover > td > .trash-button {
 
 #advanced-proxy-settings-panel,
 .advanced-proxy-panel-content {
-  block-size: 100%;
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 0;
 }
 
 .permissions-overlay {
@@ -2053,17 +2052,12 @@ tr:hover > td > .trash-button {
 }
 
 #enable-proxy-permissions {
-  block-size: var(--rowHeight);
   text-align: center;
   font-family: var(--fontMetropolis);
   font-size: 14px;
   margin-block-start: 1rem;
 }
 
-.permissions-overlay-copy {
-  text-align: center;
-}
-
 @media (prefers-color-scheme: dark) {
   :root {
     --iconCloseX: url("/img/close-light.svg");
@@ -2094,6 +2088,10 @@ tr:hover > td > .trash-button {
     --text-grey: #fefffe;
   }
 
+  .permissions-overlay {
+    background-color: #494755;
+  }
+
   .tooltip {
     background-color: var(--controllerActive);
   }
@@ -2185,10 +2183,6 @@ tr:hover > td > .trash-button {
     background-color: #676767;
   }
 
-  .panel-footer {
-    border-block-end: solid 1px #4a4a4a;
-  }
-
   input[type="text"]:focus {
     box-shadow: 0 0 0 3px var(--blue50);
     border-color: var(--blue30);