From 5fb58865b0256a83c578ff746307cf9b2916c279 Mon Sep 17 00:00:00 2001
From: Guillaume Dufour <guillaume.duff@gmail.com>
Date: Sun, 14 Apr 2024 18:55:42 +0200
Subject: [PATCH] first try

---
 addon/button.js | 70 +++++++++++++++++++++++++++++++------------------
 1 file changed, 45 insertions(+), 25 deletions(-)

diff --git a/addon/button.js b/addon/button.js
index 587069cb5..2b202fcdb 100644
--- a/addon/button.js
+++ b/addon/button.js
@@ -23,8 +23,8 @@ function initButton(sfHost, inInspector) {
   btn.tabIndex = 0;
   btn.accessKey = "i";
   btn.title = "Show Salesforce details (Alt+I / Shift+Alt+I)";
-  rootEl.appendChild(btn);
   loadPopup();
+  rootEl.appendChild(btn);
   document.body.appendChild(rootEl);
 
   addFlowScrollability();
@@ -81,22 +81,34 @@ function initButton(sfHost, inInspector) {
     }
   }
 
-  function setRootCSSProperties(rootElement, buttonElement) {
+  function updateButtonCSSPropertiesFromStorage(rootElement, buttonElement) {
     let popupArrowOrientation = iFrameLocalStorage.popupArrowOrientation ? iFrameLocalStorage.popupArrowOrientation : "vertical";
     let popupArrowPosition = iFrameLocalStorage.popupArrowPosition ? (iFrameLocalStorage.popupArrowPosition + "%") : "122px";
-    let img = document.createElement("img");
+    updateButtonCSSPropertiesIfNeeded(rootElement, buttonElement, popupArrowOrientation, popupArrowPosition);
+  }
+  
+  function updateButtonCSSPropertiesIfNeeded(rootElement, buttonElement, popupArrowOrientation, popupArrowPosition) {
     if (popupArrowOrientation == "vertical") {
-      rootElement.style.right = 0;
       rootElement.style.top = popupArrowPosition;
-      img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAA40lEQVQoz2P4//8/AzpWzGj6L59U/V8urgxMg/g4FUn6J/+X9E38LxWc8V8htR67IpCkuGfMfxCQjSpENRFFkXvk/1+/foGxQloDSD0DVkVfvnyBY7hCdEVv3rxBwXCFIIdKh2WDFT1+/BgDo1qd2fL/1q1bWDFcoW5xz3/Xppn/oycu/X/x4kUMDFeoWdD136R8wn+f9rlgxSdOnEDBKFajK96/fz8coyjEpnj79u1gjKEQXXFE/+L/Gzdu/G9WMfG/am4HZlzDFAf3LPwfOWEJWBPIwwzYUg9MsXXNFDAN4gMAmASShdkS4AcAAAAASUVORK5CYII=";
-      buttonElement.classList.add("insext-btn-vertical");
+      if (!(buttonElement.classList.contains("insext-btn-vertical"))) {
+        rootElement.style.right = "0px";
+        buttonElement.classList.add("insext-btn-vertical");
+        buttonElement.classList.remove("insext-btn-horizontal");
+        let img = document.createElement("img");
+        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAPCAYAAADd/14OAAAA40lEQVQoz2P4//8/AzpWzGj6L59U/V8urgxMg/g4FUn6J/+X9E38LxWc8V8htR67IpCkuGfMfxCQjSpENRFFkXvk/1+/foGxQloDSD0DVkVfvnyBY7hCdEVv3rxBwXCFIIdKh2WDFT1+/BgDo1qd2fL/1q1bWDFcoW5xz3/Xppn/oycu/X/x4kUMDFeoWdD136R8wn+f9rlgxSdOnEDBKFajK96/fz8coyjEpnj79u1gjKEQXXFE/+L/Gzdu/G9WMfG/am4HZlzDFAf3LPwfOWEJWBPIwwzYUg9MsXXNFDAN4gMAmASShdkS4AcAAAAASUVORK5CYII=";
+        buttonElement.appendChild(img);
+        }
     } else {
-      rootElement.style.bottom = "0px";
       rootElement.style.right = popupArrowPosition;
-      img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAD6ADAAQAAAABAAAACgAAAADdC3pnAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABKElEQVQoFWNgwAI0C7r+6xb3/AdJKaTW/1fMaAKz0ZUyoguANHKzszEIcnMy3Hn+muHX2+cMLDwCDExs7Az3Z9ShqGdC1gzTKCHAyyDGz8OwszCM4c/Hdwy/P75l+PfrJwO6C+CakTXyc3EwlDnogM09M6eL4e+Xj1gNAGtG15hrrozsIIarSydjNYARXWOKnhQDJycnBubg4GBQDk5lYObhZ2DlFwaHARMocORFBRl4ONgYYtSEUGxE5zzevJDh77cvwEB8AQ4DJnZWFgY2FmaGSCU+dLVY+S+2LWZg+PeP4f+f3wwsP3//Yfj8/SdD6/G3DK/evceqAVkQFHiMwGhjZGFlYPn68xfDwzfvGX78+sPwYFYDSjwia4KxQdHF/JePgZGZmQEASqV1t0W3n+oAAAAASUVORK5CYII=";
-      buttonElement.classList.add("insext-btn-horizontal");
+      if (!(buttonElement.classList.contains("insext-btn-horizontal"))) {
+        rootElement.style.bottom = "0px";
+        buttonElement.classList.add("insext-btn-horizontal");
+        buttonElement.classList.remove("insext-btn-vertical");
+        let img = document.createElement("img");
+        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAD6ADAAQAAAABAAAACgAAAADdC3pnAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABKElEQVQoFWNgwAI0C7r+6xb3/AdJKaTW/1fMaAKz0ZUyoguANHKzszEIcnMy3Hn+muHX2+cMLDwCDExs7Az3Z9ShqGdC1gzTKCHAyyDGz8OwszCM4c/Hdwy/P75l+PfrJwO6C+CakTXyc3EwlDnogM09M6eL4e+Xj1gNAGtG15hrrozsIIarSydjNYARXWOKnhQDJycnBubg4GBQDk5lYObhZ2DlFwaHARMocORFBRl4ONgYYtSEUGxE5zzevJDh77cvwEB8AQ4DJnZWFgY2FmaGSCU+dLVY+S+2LWZg+PeP4f+f3wwsP3//Yfj8/SdD6/G3DK/evceqAVkQFHiMwGhjZGFlYPn68xfDwzfvGX78+sPwYFYDSjwia4KxQdHF/JePgZGZmQEASqV1t0W3n+oAAAAASUVORK5CYII=";
+        buttonElement.appendChild(img);
+      }
     }
-    buttonElement.appendChild(img);
   }
 
   function loadPopup() {
@@ -107,27 +119,35 @@ function initButton(sfHost, inInspector) {
         closePopup();
       }
     });
-    //manage our self the darg n drop
-    btn.ondragstart = function() {
-      return false;
-    };
+
     function onbuttonmove(event) {
       console.log('move to '+event.clientX+' , '+event.clientY);
       console.log(' on ' + rootEl.getBoundingClientRect());
-      //if 
-      //localStorage.setItem("popupArrowOrientation", orientation);
-      //localStorage.setItem("popupArrowPosition", position);
+      let popupArrowOrientation;
+      let popupArrowPosition;
+      // if above the diagonal
+      if (event.clientY > (rootEl.getBoundingClientRect().width * event.clientX) * rootEl.getBoundingClientRect().height) {
+        popupArrowOrientation = "horizontal";
+        popupArrowPosition = event.clientX / rootEl.getBoundingClientRect().width;
+      } else {
+        popupArrowOrientation = "vertical";
+        popupArrowPosition = event.clientY / rootEl.getBoundingClientRect().height;
+      }
+      updateButtonCSSPropertiesIfNeeded(rootEl, btn, popupArrowOrientation, popupArrowPosition)
+      
     };
-    btn.addEventListener("dragstart", (event) => {
-      event.dataTransfer.dropEffect = "move";
-    });
 
-    btn.addEventListener("drag", (event) => {
-      onbuttonmove(event);
+    btn.addEventListener("mousedown", (event) => {
+      console.log('start');
+      btn.addEventListener("mousemove", onbuttonmove);
     });
     
-    btn.addEventListener("drop", (event) => {
-      onbuttonmove(event);
+    btn.addEventListener("mouseup", (event) => {
+      console.log('end');
+      btn.removeEventListener("mousemove", onbuttonmove);
+      iFrameLocalStorage.setItem("popupArrowOrientation", popupArrowOrientation);
+      iFrameLocalStorage.setItem("popupArrowPosition", popupArrowPosition);
+      updateButtonCSSPropertiesFromStorage(rootEl, btn)
     });
     
     let popupSrc = chrome.runtime.getURL("popup.html");
@@ -156,7 +176,7 @@ function initButton(sfHost, inInspector) {
             popupEl.classList.add("insext-popup-vertical-up");
           }
         }
-        setRootCSSProperties(rootEl, btn);
+        updateButtonCSSPropertiesFromStorage(rootEl, btn);
         addFlowScrollability(popupEl);
         popupEl.contentWindow.postMessage({
           insextInitResponse: true,