feat: Improve transform detection, b=no-bug, c=common

src/zen/common/styles/zen-browser-ui.css

@@ -12,6 +12,12 @@
   /* see issue #426 */
   background: var(--zen-navigator-toolbox-background, transparent) !important;
   --inactive-titlebar-opacity: 0.8;
+
+  &[zen-library-open="true"] {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
 }
 
 #nav-bar,

src/zen/library/ZenLibrary.mjs

@@ -56,11 +56,19 @@ export class ZenLibrary extends MozLitElement {
     // Add connected call back and make `appContentWrapper` transform translate the oposite of this element
     this.#resizeObserver = new ResizeObserver(() => {
       requestAnimationFrame(() => {
-        let width = window.windowUtils.getBoundsWithoutFlushing(this).width;
-        if (gZenVerticalTabsManager._prefsRightSide) {
-          width = -width;
+        let isRightSide = gZenVerticalTabsManager._prefsRightSide;
+        let translateX = window.windowUtils.getBoundsWithoutFlushing(this)[
+          isRightSide ? "left" : "right"
+        ];
+        let contentPosition = window.windowUtils.getBoundsWithoutFlushing(lazy.appContentWrapper)[
+          isRightSide ? "right" : "left"
+        ]
+        let existingTransform = new DOMMatrix(lazy.appContentWrapper.style.transform).m41;
+        translateX = translateX-contentPosition + existingTransform;
+        if (isRightSide) {
+          translateX = -translateX;
         }
-        lazy.appContentWrapper.style.transform = `translateX(${width}px)`;
+        lazy.appContentWrapper.style.transform = `translateX(${translateX}px)`;
       });
     });
     this.#resizeObserver.observe(this);
@@ -139,7 +147,7 @@ export class ZenLibrary extends MozLitElement {
     let instance = this.getInstance();
     instance.toggleAttribute("open");
     if (!instance.isOpen) {
-      gNavToolbox.style.display = "";
+      gNavToolbox.removeAttribute("zen-library-open");
       lazy.appContentWrapper.style.transform = "";
       if (!instance._deletionIdleCallbackId) {
       instance._deletionIdleCallbackId = requestIdleCallback(() => {
@@ -151,7 +159,7 @@ export class ZenLibrary extends MozLitElement {
         cancelIdleCallback(instance._deletionIdleCallbackId);
         instance._deletionIdleCallbackId = null;
       }
-      gNavToolbox.style.display = "none";
+      gNavToolbox.setAttribute("zen-library-open", "true");
     }
   }
 }

src/zen/library/zen-library.css

@@ -5,8 +5,8 @@
  */
 
 :host {
-  transition: max-width 0.1s ease-in-out;
-  max-width: 0;
+  transition: transform 0.1s ease-in-out;
+  transform: translateX(-100%);
   z-index: 1;
   display: block;
   position: absolute;
@@ -14,8 +14,8 @@
 }
 
 :host([open]) {
-    max-width: 100%;
-  }
+  transform: translateX(0);
+}
 
 #zen-library-sidebar {
   display: flex;