chore: Visual changes and zap fixes, c=boosts, b=no-bug (#13225)

src/zen/boosts/ZenBoostStyles.sys.mjs

@@ -68,7 +68,7 @@ export class nsZenBoostStyles {
     let zapBlocks = "";
     if (boostData.zapSelectors) {
       for (const selector of boostData.zapSelectors) {
-        zapBlocks += `html > body ${selector}:not([zen-zap-unhide]){ display: none !important; }\n`;
+        zapBlocks += `${selector}:not([zen-zap-unhide]){ display: none !important; }\n`;
       }
 
       if (zapBlocks != "") {

src/zen/boosts/ZenBoostsEditor.mjs

@@ -461,9 +461,12 @@ ${cssSelector} {
     const actor =
       linkedBrowser.browsingContext.currentWindowGlobal.getActor("ZenBoosts");
     const zapButton = this.doc.getElementById("zen-boost-zap");
+    
     const zapEnabled = await actor.sendQuery("ZenBoost:ZapModeEnabled");
+    // Checks if there are any zaps
+    const zapAny = await actor.sendQuery("ZenBoost:ZapModeAny");
 
-    zapButton.setAttribute("enabled", zapEnabled ? "true" : "false");
+    zapButton.setAttribute("enabled", (zapEnabled || zapAny) ? "true" : "false");
   }
 
   async onUpdatePickerButtonVisual() {
@@ -1295,6 +1298,7 @@ ${cssSelector} {
     this.updateDot();
     this.updateCircleRadius();
     this.onUpdateZapValue();
+    this.onUpdateZapButtonVisual();
   }
 
   /**

src/zen/boosts/ZenZapDissolve.sys.mjs

@@ -509,8 +509,8 @@ void main() {
 
     ctx.drawWindow(
       this.window,
-      rect.left,
-      rect.top,
+      rect.left + this.window.scrollX,
+      rect.top + this.window.scrollY,
       rect.width,
       rect.height,
       "rgba(0,0,0,0)"

src/zen/boosts/actors/ZenBoostsChild.sys.mjs

@@ -262,6 +262,9 @@ export class ZenBoostsChild extends JSWindowActorChild {
         break;
       case "ZenBoost:ZapModeEnabled":
         return this.#currentState === ZenBoostsChild.STATES.ZAP;
+      case "ZenBoost:ZapModeAny":
+        const { boostData } = (await this.getWebsiteBoost()).boostEntry;
+        return boostData.zapSelectors.length > 0;
       case "ZenBoost:SelectorPickerModeEnabled":
         return this.#currentState === ZenBoostsChild.STATES.PICKER;
       case "ZenBoost:OpenInspector":

src/zen/boosts/zen-boosts.css

@@ -534,11 +534,11 @@ body {
 }
 
 .zen-boost-font-button-active {
-  background-color: #5b5b5c22 !important;
+  background-color: #5454572f;
 }
 
 .zen-boost-font-button-active:hover {
-  background-color: #5b5b5c32 !important;
+  background-color: #5b5b5c28;
 }
 
 @property --mod-button-c1 {

src/zen/boosts/zen-selector.css

@@ -17,11 +17,11 @@
 
 #select-component {
   width: min-content;
-  font-family: system-ui !important;
+  font-family: system-ui;
 
   height: 98px;
 
-  pointer-events: auto !important;
+  pointer-events: auto;
 
   transform-origin: top;
   overflow: hidden;
@@ -182,7 +182,7 @@
 #selector-element-preview-text {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 9pt;
-  color: #797b7f;
+  color: rgb(76, 78, 80);
 }
 
 #hover-div {

src/zen/boosts/zen-zap.css

@@ -53,10 +53,10 @@
 }
 
 #zap-controls-container {
-  font-family: system-ui !important;
+  font-family: system-ui;
 
   display: flex;
-  pointer-events: auto !important;
+  pointer-events: auto;
   z-index: 999999;
 
   bottom: 8px;
@@ -92,7 +92,7 @@
     }
 
     border: none;
-    background: linear-gradient(0deg, #afafaf 0%, #e5e5e5 100%) !important;
+    background: linear-gradient(0deg, #afafaf 0%, #e5e5e5 100%);
 
     color: #1d1b1b;
     font-weight: bold;
@@ -148,11 +148,11 @@
 }
 
 #zen-zap-dissolve-canvas {
-  position: absolute !important;
-  width: 100% !important;
-  height: 100% !important;
-  left: 0 !important;
-  top: 0 !important;
-  pointer-events: none !important;
-  z-index: 2147483647 !important;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  z-index: 2147483647;
 }