Remove the Mozilla-VPN Banner Ad

Author: strseb

src/css/popup.css

@@ -110,7 +110,6 @@
   --usercontext-bg-hover-color: #f0f0fa;
   --usercontext-bg-focus-color: #e0e0e6;
   --usercontext-bg-active-color: #cfcfd8;
-  --moz-vpn-tout-shadow: 0 0 7px 0 #9498a25e;
 }
 
 [data-theme="dark"] {
@@ -180,7 +179,6 @@
   --usercontext-bg-active-color: #5b5b66;
   --usercontext-bg-focus-color: #2b2a33;
   --usercontext-bg-hover-color: #52525e;
-  --moz-vpn-tout-shadow: 0 0 7px 0 #7478825e;
 }
 
 /* General Rules and Resets */
@@ -635,37 +633,8 @@ input:checked:hover:focus + .slider {
   background-color: var(--button-bg-active-color-primary);
 }
 
-/* Mozilla VPN tout */
-
-#moz-vpn-tout {
-  opacity: 0;
-  background-color: var(--panel-bg-color);
-  visibility: visible;
-  max-block-size: 500px;
-  position: absolute;
-  inset-block-end: var(--footerHeight);
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  box-shadow: var(--moz-vpn-tout-shadow);
-  animation: appear 0.2s ease-out 0.5s forwards;
-  transition: opacity 0.1s ease-in-out, max-height 0.3s ease-in-out;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-    transform: translateY(10%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0%);
-  }
-}
-
 /* Mozilla VPN Controller UI in Container Management Panel */
 
-.moz-vpn-content,
 .moz-vpn-controller-content {
   display: flex;
   position: relative;
@@ -1053,7 +1022,6 @@ input.proxies {
 
 /* Mozilla VPN Server list */
 
-.moz-vpn-logo,
 .moz-vpn-logotype {
   color: var(--text-color-primary);
   background-image: var(--logoMozillaVpn);

src/js/popup.js

@@ -767,7 +767,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       }
     });
 
-    const mozillaVpnToutName = "moz-tout-main-panel";
     const mozillaVpnPermissionsWarningDotName = "moz-permissions-warning-dot";
 
     let { mozillaVpnHiddenToutsList } = await browser.storage.local.get("mozillaVpnHiddenToutsList");
@@ -776,31 +775,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       mozillaVpnHiddenToutsList = [];
     }
 
-    // Decide whether to show Mozilla VPN tout
-    const mozVpnTout = document.getElementById("moz-vpn-tout");
-    const mozillaVpnInstalled = await browser.runtime.sendMessage({ method: "MozillaVPN_getInstallationStatus" });
-    const mozillaVpnToutShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnToutName);
-    if (mozillaVpnInstalled || mozillaVpnToutShouldBeHidden) {
-      mozVpnTout.remove();
-    }
-
-    // Add handlers if tout is visible
-    const mozVpnDismissTout = document.querySelector(".dismiss-moz-vpn-tout");
-    if (mozVpnDismissTout) {
-      Utils.addEnterHandler((mozVpnDismissTout), async() => {
-        mozVpnTout.remove();
-        mozillaVpnHiddenToutsList.push({
-          name: mozillaVpnToutName
-        });
-        await browser.storage.local.set({ mozillaVpnHiddenToutsList });
-      });
-
-      Utils.addEnterHandler(document.querySelector("#moz-vpn-learn-more"), () => {
-        MozillaVPN.handleMozillaCtaClick("mac-main-panel-btn");
-        window.close();
-      });
-    }
-
     // Badge Options icon if both nativeMessaging and/or proxy permissions are disabled
     const bothMozillaVpnPermissionsEnabled = await MozillaVPN.bothPermissionsEnabled();
     const warningDotShouldBeHidden = mozillaVpnHiddenToutsList.find(tout => tout.name === mozillaVpnPermissionsWarningDotName);

src/popup.html

@@ -192,18 +192,7 @@ <h4 class="moz-vpn-logotype vpn-status-container-list display-none">Mozilla VPN
         </tr>
       </table>
     </div>
-    <div id="moz-vpn-tout" class="moz-vpn-content expanded">
-      <div class="flx-row button-wrapper">
-        <h4 class="moz-vpn-logo">Mozilla VPN</h4>
-        <button class="controller dismiss-moz-vpn-tout" tab-index="0"></button>
-      </div>
-      <div class="collapsible-content flx-col controller-collapsible-content">
-        <div class="flx-row flx-space-between">
-          <span class="moz-vpn-subtitle" data-i18n-message-id="integrateContainers"></span>
-        </div>
-        <button id="moz-vpn-learn-more" class="moz-vpn-cta primary-cta" data-i18n-message-id="getMozillaVpn"></button>
-      </div>
-    </div>
+
     <v-padding-hack-footer></v-padding-hack-footer> <!--prevents last container from getting covered up by the 'manage containers button' when list is long-->
     <div class="bottom-btn keyboard-nav controller" id="manage-containers-link" tabindex="0" data-i18n-message-id="manageContainers"></div>
   </div>