Reduce animation duration in ZenWorkspaces for improved responsiveness

src/browser/base/content/zen-assets.jar.inc.mn

@@ -13,7 +13,6 @@
         content/browser/zen-components/ZenSidebarManager.mjs    (zen-components/ZenSidebarManager.mjs)
         content/browser/zen-components/ZenProfileDialogUI.mjs   (zen-components/ZenProfileDialogUI.mjs)
         content/browser/zen-components/ZenKeyboardShortcuts.mjs (zen-components/ZenKeyboardShortcuts.mjs)
-        content/browser/zen-components/ZenThemeBuilder.mjs      (zen-components/ZenThemeBuilder.mjs)
         content/browser/zen-components/ZenThemesImporter.mjs    (zen-components/ZenThemesImporter.mjs)
         content/browser/zen-components/ZenTabUnloader.mjs       (zen-components/ZenTabUnloader.mjs)
         content/browser/zen-components/ZenPinnedTabsStorage.mjs (zen-components/ZenPinnedTabsStorage.mjs)

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -17,10 +17,6 @@
 
     overflow: hidden;
 
-    :root[zen-right-side='true'] & {
-      margin-left: var(--zen-element-separation);
-    }
-
     :root:not([zen-no-padding='true']) & {
       box-shadow: var(--zen-big-shadow);
     }

src/browser/base/zen-components/ZenCompactMode.mjs

@@ -143,7 +143,9 @@ var gZenCompactModeManager = {
         gZenUIManager.motion
           .animate(
             this.sidebar,
-            { marginLeft: `-${sidebarWidth}px` },
+            this.sidebarIsOnRight ? {
+              marginRight: `-${sidebarWidth}px`,
+            } : { marginLeft: `-${sidebarWidth}px` },
             {
               ease: 'easeIn',
               type: 'spring',
@@ -153,21 +155,29 @@ var gZenCompactModeManager = {
             }
           )
           .then(() => {
-            console.log('done');
             this.sidebar.removeAttribute('animate');
             this.sidebar.style.transition = 'none';
+            this.sidebar.style.removeProperty('margin-right');
             this.sidebar.style.removeProperty('margin-left');
+            this.sidebar.style.removeProperty('transform');
             setTimeout(() => {
               this.sidebar.style.removeProperty('transition');
             });
           });
       } else if (canHideSidebar && !isCompactMode) {
         document.getElementById('browser').style.overflow = 'hidden';
-        this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
+        if (this.sidebarIsOnRight) {
+          this.sidebar.style.marginRight = `-${sidebarWidth}px`;
+        } else {
+          this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
+        }
         gZenUIManager.motion
           .animate(
             this.sidebar,
-            { marginLeft: '0px' },
+            this.sidebarIsOnRight ? {
+              marginRight: 0,
+              transform: ['translateX(100%)', 'translateX(0)'],
+            } : { marginLeft: 0 },
             {
               ease: 'easeOut',
               type: 'spring',
@@ -179,6 +189,13 @@ var gZenCompactModeManager = {
           .then(() => {
             this.sidebar.removeAttribute('animate');
             document.getElementById('browser').style.removeProperty('overflow');
+            this.sidebar.style.transition = 'none';
+            this.sidebar.style.removeProperty('margin-right');
+            this.sidebar.style.removeProperty('margin-left');
+            this.sidebar.style.removeProperty('transform');
+            setTimeout(() => {
+              this.sidebar.style.removeProperty('transition');
+            });
           });
       } else {
         this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating

src/browser/base/zen-components/ZenThemeBuilder.mjs

@@ -1,176 +0,0 @@
-const kZenAccentColorConfigKey = 'zen.theme.accent-color';
-
-var gZenThemeBuilder = {
-  init() {
-    return; // TODO:
-    this._mouseMoveListener = this._handleThumbMouseMove.bind(this);
-    setTimeout(() => {
-      this._initBuilderUI();
-    }, 500);
-  },
-
-  get _builderWrapper() {
-    if (this.__builderWrapper) {
-      return this.__builderWrapper;
-    }
-    this.__builderWrapper = document.getElementById('zen-theme-builder-wrapper');
-    return this.__builderWrapper;
-  },
-
-  _initBuilderUI() {
-    let wrapper = this._builderWrapper;
-    if (!wrapper) {
-      return;
-    }
-
-    console.info('gZenThemeBuilder: init builder UI');
-
-    const kTemplate = `
-      <html:div id="zen-theme-builder">
-        <html:div id="zen-theme-builder-color-picker">
-          <html:canvas id="zen-theme-builder-color-picker-canvas"></html:canvas>
-          <html:div id="zen-theme-builder-color-picker-deck">
-            <html:div id="zen-theme-builder-color-picker-thumb"></html:div>
-          </html:div>
-        </html:div>
-      </html:div>
-    `;
-    wrapper.innerHTML = kTemplate;
-    this._initColorPicker();
-  },
-
-  _getPositionFromColor(ctx, color) {
-    var w = ctx.canvas.width,
-      h = ctx.canvas.height,
-      data = ctx.getImageData(0, 0, w, h), /// get image data
-      buffer = data.data, /// and its pixel buffer
-      len = buffer.length, /// cache length
-      x,
-      y = 0,
-      p,
-      px; /// for iterating
-    /// iterating x/y instead of forward to get position the easy way
-    for (; y < h; y++) {
-      /// common value for all x
-      p = y * 4 * w;
-      for (x = 0; x < w; x++) {
-        /// next pixel (skipping 4 bytes as each pixel is RGBA bytes)
-        px = p + x * 4;
-        /// if red component match check the others
-        if (buffer[px] === color[0]) {
-          if (buffer[px + 1] === color[1] && buffer[px + 2] === color[2]) {
-            return [x, y];
-          }
-        }
-      }
-    }
-    return null;
-  },
-
-  _hexToRgb(hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
-  },
-
-  _componentToHex(c) {
-    var hex = c.toString(16);
-    return hex.length == 1 ? '0' + hex : hex;
-  },
-
-  _rgbToHex(r, g, b) {
-    return '#' + this._componentToHex(r) + this._componentToHex(g) + this._componentToHex(b);
-  },
-
-  _initColorPicker() {
-    const canvas = document.getElementById('zen-theme-builder-color-picker-canvas');
-    const thumb = document.getElementById('zen-theme-builder-color-picker-thumb');
-
-    // A all the main colors are all blended together towards the center.
-    // But we also add some random gradients to make it look more interesting.
-    // Instead of using a simple gradient, we use a radial gradient.
-    const ctx = canvas.getContext('2d');
-    const size = 180;
-    canvas.width = size;
-    canvas.height = size;
-    const center = size / 2;
-    const radius = size / 2;
-    const gradient = ctx.createConicGradient(0, center, center);
-    gradient.addColorStop(0, '#fff490');
-    gradient.addColorStop(1 / 12, '#f9e380');
-    gradient.addColorStop(2 / 12, '#fecc87');
-    gradient.addColorStop(3 / 12, '#ffa894');
-    gradient.addColorStop(4 / 12, '#f98089');
-    gradient.addColorStop(5 / 12, '#f9b7c5');
-    gradient.addColorStop(6 / 12, '#c193b8');
-    gradient.addColorStop(7 / 12, '#a8b7e0');
-    gradient.addColorStop(8 / 12, '#88d2f9');
-    gradient.addColorStop(9 / 12, '#81e8e5');
-    gradient.addColorStop(10 / 12, '#b7e5a5');
-    gradient.addColorStop(11 / 12, '#eaefac');
-    gradient.addColorStop(1, '#fff490');
-
-    const radialGradient = ctx.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
-    radialGradient.addColorStop(0, 'rgba(255,255,255,1)');
-    radialGradient.addColorStop(1, 'rgba(255,255,255,0)');
-
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, size, size);
-
-    //ctx.fillStyle = radialGradient;
-    //ctx.fillRect(0, 0, size, size);
-
-    // Add the thumb.
-    const accentColor = Services.prefs.getStringPref(kZenAccentColorConfigKey, '#ffb787');
-    const pos = this._getPositionFromColor(ctx, this._hexToRgb(accentColor));
-
-    let x = pos ? pos[0] : center;
-    let y = pos ? pos[1] : center;
-
-    thumb.style.left = `${x}px`;
-    thumb.style.top = `${y}px`;
-
-    thumb.addEventListener('mousedown', this._handleThumbMouseDown.bind(this));
-    document.addEventListener('mouseup', this._handleThumbMouseUp.bind(this));
-  },
-
-  _handleThumbMouseDown(e) {
-    document.addEventListener('mousemove', this._mouseMoveListener);
-  },
-
-  _handleThumbMouseUp(e) {
-    document.removeEventListener('mousemove', this._mouseMoveListener);
-  },
-
-  _handleThumbMouseMove(e) {
-    const kThumbOffset = 15;
-    const deck = document.getElementById('zen-theme-builder-color-picker-deck');
-
-    const thumb = document.getElementById('zen-theme-builder-color-picker-thumb');
-    const rect = deck.getBoundingClientRect();
-    let x = e.clientX - rect.left;
-    let y = e.clientY - rect.top;
-
-    if (x > rect.width - kThumbOffset) {
-      x = rect.width - kThumbOffset;
-    }
-    if (y > rect.height - kThumbOffset) {
-      y = rect.height - kThumbOffset;
-    }
-    if (x < kThumbOffset) {
-      x = kThumbOffset;
-    }
-    if (y < kThumbOffset) {
-      y = kThumbOffset;
-    }
-
-    thumb.style.left = `${x}px`;
-    thumb.style.top = `${y}px`;
-
-    const canvas = document.getElementById('zen-theme-builder-color-picker-canvas');
-    const ctx = canvas.getContext('2d');
-    const imageData = ctx.getImageData(x, y, 1, 1);
-
-    // Update the accent color.
-    Services.prefs.setStringPref(kZenAccentColorConfigKey, this._rgbToHex(...imageData.data));
-  },
-};

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -1342,9 +1342,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         },
         {
           type: 'spring',
-          duration: 0.3,
+          duration: 0.2,
           bounce: 0.2,
-       // delay: gZenUIManager.motion.stagger(0.01),
+          // delay: gZenUIManager.motion.stagger(0.01),
         }
       );
     }
@@ -1355,10 +1355,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         opacity: 1,
       },
       {
-        duration: 0.3,
+        duration: 0.2,
         type: 'spring',
         bounce: 0.2,
-    // delay: gZenUIManager.motion.stagger(0.01),
+        // delay: gZenUIManager.motion.stagger(0.01),
       }
     );
   }

src/browser/components/preferences/zen-settings.js

@@ -494,7 +494,6 @@ var gZenLooksAndFeel = {
     this.__hasInitialized = true;
     this._initializeColorPicker(this._getInitialAccentColor());
     window.zenPageAccentColorChanged = this._handleAccentColorChange.bind(this);
-    gZenThemeBuilder.init();
     gZenMarketplaceManager.init();
     var onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);
     window.matchMedia('(prefers-color-scheme: dark)').addListener(onPreferColorSchemeChange);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -1,4 +1,3 @@
-<script src="chrome://browser/content/zen-components/ZenThemeBuilder.mjs" defer=""/>
 <script src="chrome://browser/content/preferences/zen-settings.js"/>
 <html:template id="template-paneZenLooks">