no-bug: Move boost import/export buttons (gh-13724)

locales/en-US/browser/browser/zen-boosts.ftl

@@ -49,9 +49,9 @@ zen-unzap-tooltip =
             *[other] { $elementCount } elements zapped
     }
 zen-boost-save =
-    .tooltiptext = Export Boost
+    .label = Export Boost
 zen-boost-load =
-    .tooltiptext = Import Boost
+    .label = Import Boost
 zen-panel-ui-boosts-exported-message = Boost exported!
 zen-site-data-boosts = Boosts
 zen-site-data-create-boost =

src/zen/boosts/ZenBoostsEditor.mjs

@@ -103,12 +103,6 @@ export class nsZenBoostEditor {
     this.doc
       .getElementById("zen-boost-controls")
       .addEventListener("click", event => this.openAdvancedColorOptions(event));
-    this.doc
-      .getElementById("zen-boost-save")
-      .addEventListener("click", this.onSaveBoostClick.bind(this));
-    this.doc
-      .getElementById("zen-boost-load")
-      .addEventListener("click", this.onLoadBoostClick.bind(this));
     this.doc
       .getElementById("zen-boost-name-container")
       .addEventListener("click", this.onNameTextClick.bind(this));
@@ -677,17 +671,17 @@ ${cssSelector} {
   }
 
   /**
-   * Resets the color picker dot to the center position (default state).
+   * Resets the color picker dot to the default position (default state).
    */
   resetDotPosition() {
-    this.setDotPos(null, null);
-  }
+    const gradient = this.doc.querySelector(".zen-boost-color-picker-gradient");
+    const rect = gradient.getBoundingClientRect();
+    const padding = 50;
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const radius = (rect.width - padding) / 2;
 
-  /**
-   * Resets the secondary color picker dot to the center position (default state).
-   */
-  resetSecondaryDotPosition() {
-    this.setSecondaryDotPos(null, null);
+    this.setDotPos(centerX + radius / 1.25, centerY);
   }
 
   /**
@@ -744,9 +738,6 @@ ${cssSelector} {
       );
 
       if (nDistance > 15) {
-        // Optional haptic feedback
-        // Services.zen.playHapticFeedback();
-
         this.lastDotSetPos = {
           x: pixelX,
           y: pixelY,
@@ -810,7 +801,8 @@ ${cssSelector} {
     // Capture normalized position of dot for restoring it correctly later
     this.currentBoostData.dotPos.x = relativeX / rect.width;
     this.currentBoostData.dotPos.y = relativeY / rect.height;
-    this.currentBoostData.secondaryDotPos ||= {};
+
+    // Make sure to update store to feature proper new secondary position
     this.currentBoostData.secondaryDotPos.x = relativeXSec / rect.width;
     this.currentBoostData.secondaryDotPos.y = relativeYSec / rect.height;
 
@@ -870,7 +862,7 @@ ${cssSelector} {
     if (!pixelX || !pixelY) {
       pixelX = centerX;
       pixelY = centerY;
-      angle = 32; // Default angle
+      angle = this.currentBoostData.secondaryDotAngleDegDelta;
     } else {
       angle = Math.atan2(pixelY - centerY, pixelX - centerX);
       pixelX =
@@ -1382,15 +1374,11 @@ ${cssSelector} {
    * Handles opening a save file dialog and exporting the boost data to a JSON file
    */
   async onSaveBoostClick() {
-    const loadButton = this.doc.getElementById("zen-boost-save");
-    loadButton.setAttribute("mode", "blue");
-
     const success = await gZenBoostsManager.exportBoost(
       this.editorWindow,
       this.currentBoostData
     );
 
-    loadButton.setAttribute("mode", "");
     if (success) {
       this.openerWindow.gZenUIManager.showToast(
         "zen-panel-ui-boosts-exported-message"
@@ -1402,12 +1390,7 @@ ${cssSelector} {
    * Handles opening a load file dialog and importing the boost data to a JSON file
    */
   async onLoadBoostClick() {
-    const loadButton = this.doc.getElementById("zen-boost-load");
-    loadButton.setAttribute("mode", "orange-red");
-
     const data = await gZenBoostsManager.importBoost(this.editorWindow);
-
-    loadButton.setAttribute("mode", "");
     if (data) {
       this.currentBoostData = data;
       this.updateAllVisuals();
@@ -1505,12 +1488,12 @@ ${cssSelector} {
 
     const gradient = this.doc.querySelector(".zen-boost-color-picker-gradient");
     const rect = gradient.getBoundingClientRect();
+    this.currentBoostData.secondaryDotAngleDegDelta = Math.random() * 360;
     this.setDotPos(
       Math.round(rect.left + Math.random() * rect.width),
       Math.round(rect.top + Math.random() * rect.height),
       true
     );
-    this.currentBoostData.secondaryDotAngleDegDelta = Math.random() * 360;
     this.currentBoostData.changeWasMade = true;
 
     this.updateCurrentBoost();
@@ -1575,30 +1558,19 @@ ${cssSelector} {
     const dotSec = this.doc.querySelector(
       "#zen-boost-color-picker-dot-secondary"
     );
+    const gradient = this.doc.querySelector(".zen-boost-color-picker-gradient");
+    const rect = gradient.getBoundingClientRect();
 
     if (!this.currentBoostData.sizeOverride) {
       this.currentBoostData.sizeOverride = 1;
     }
 
-    if (
-      !this.currentBoostData.secondaryDotPos ||
-      !this.currentBoostData.secondaryDotPos.x ||
-      !this.currentBoostData.secondaryDotPos.y
-    ) {
-      this.resetSecondaryDotPosition();
-    }
-
     if (
       this.currentBoostData.dotPos.x == null ||
       this.currentBoostData.dotPos.y == null
     ) {
       this.resetDotPosition();
     } else {
-      const gradient = this.doc.querySelector(
-        ".zen-boost-color-picker-gradient"
-      );
-      const rect = gradient.getBoundingClientRect();
-
       // Test if the stored position is a non-normalized dot position
       if (
         this.currentBoostData.dotPos.x > 1 ||
@@ -1616,13 +1588,18 @@ ${cssSelector} {
       // Convert normalized position to relative position
       const xPos = this.currentBoostData.dotPos.x * rect.width;
       const yPos = this.currentBoostData.dotPos.y * rect.height;
+
+      dot.style.left = `${xPos}px`;
+      dot.style.top = `${yPos}px`;
+    }
+
+    if (
+      this.currentBoostData.secondaryDotPos?.x != null &&
+      this.currentBoostData.secondaryDotPos?.y != null
+    ) {
       const xPosSec = this.currentBoostData.secondaryDotPos.x * rect.width;
       const yPosSec = this.currentBoostData.secondaryDotPos.y * rect.height;
 
-      dot.setAttribute("animated", "true");
-      dot.style.left = `${xPos}px`;
-      dot.style.top = `${yPos}px`;
-      dotSec.setAttribute("animated", "true");
       dotSec.style.left = `${xPosSec}px`;
       dotSec.style.top = `${yPosSec}px`;
     }

src/zen/boosts/ZenBoostsManager.sys.mjs

@@ -118,7 +118,7 @@ class nsZenBoostsManager {
         dotPos: { x: null, y: null },
         dotDistance: 0,
 
-        secondaryDotAngleDegDelta: 32,
+        secondaryDotAngleDegDelta: 55,
         secondaryDotPos: { x: null, y: null },
 
         brightness: 0.5,

src/zen/boosts/zen-boost-editor.inc.xhtml

@@ -100,10 +100,6 @@
       </button>
 
     </vbox>
-    <hbox flex="1" class="footer" id="zen-boost-toolbar-wrapper">
-        <button data-l10n-id="zen-boost-save" id="zen-boost-save" class="subviewbutton mod-button med"></button>
-        <button data-l10n-id="zen-boost-load" id="zen-boost-load" class="subviewbutton mod-button med"></button>
-    </hbox>
   </vbox>
   <vbox flex="1" id="zen-boost-code-editor-root">
     <hbox id="zen-boost-code-top-bar">
@@ -143,6 +139,9 @@
     <menuitem data-l10n-id="zen-boost-edit-shuffle" id="zen-boost-edit-shuffle" command="cmd_zenBoostShuffle" />
     <menuitem data-l10n-id="zen-boost-edit-reset" id="zen-boost-edit-reset" command="cmd_zenBoostReset" />
     <menuseparator/>
+    <menuitem data-l10n-id="zen-boost-load" id="zen-boost-load" command="cmd_zenBoostLoad" />
+    <menuitem data-l10n-id="zen-boost-save" id="zen-boost-save" command="cmd_zenBoostSave" />
+    <menuseparator/>
     <menuitem data-l10n-id="zen-boost-edit-delete" id="zen-boost-edit-delete" command="cmd_zenBoostDelete" />
   </menupopup>
 
@@ -156,6 +155,12 @@
     <command id="cmd_zenBoostReset"
             oncommand="window.boostEditor.resetBoost();" />
 
+    <command id="cmd_zenBoostLoad"
+      oncommand="window.boostEditor.onLoadBoostClick();" />
+
+    <command id="cmd_zenBoostSave"
+            oncommand="window.boostEditor.onSaveBoostClick();" />
+
     <command id="cmd_zenBoostDelete"
             oncommand="window.boostEditor.deleteBoost();" />
   </commandset>

src/zen/boosts/zen-boosts.css

@@ -708,6 +708,11 @@ body {
     height: 24px;
     border-radius: 50%;
     background: var(--zen-theme-picker-dot-color);
+
+    /* Move away until initialized */
+    left: -100px;
+    top: -100px;
+
     @media (-prefers-color-scheme: dark) {
       box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
     }