no-bug: Fixed overflowable addons clipping button badges (gh-13679)

Signed-off-by: Guilherme Luiz Cella <151692400+guilherme-luiz-cella@users.noreply.github.com>
Co-authored-by: mr. m <91018726+mr-cheffy@users.noreply.github.com>

.github/workflows/sync-upstream.yml

@@ -129,7 +129,7 @@ jobs:
           token: ${{ secrets.DEPLOY_KEY }}
           commit-message: "chore: Sync upstream to `Firefox ${{ steps.build-data.outputs.version }}`"
           branch: "chore/upstream-sync"
-          title: "Sync upstream Firefox to version ${{ steps.build-data.outputs.version }}"
+          title: "no-bug: Sync upstream Firefox to version ${{ steps.build-data.outputs.version }}"
           body: |
             This PR syncs the upstream Firefox to version ${{ steps.build-data.outputs.version }}.
 

README.md

@@ -34,12 +34,12 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne
 
 ### Firefox Versions
 
-- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `150.0.2`! 🚀
-- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 150.0.2`!
+- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `150.0.3`! 🚀
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 150.0.3`!
 
 ### Contributing
 
-If you'd like to report a bug, please do so on our [GitHub Issues page](https://github.com/zen-browser/desktop/issues/) and for feature requests, you can use [Github Discussions](https://github.com/zen-browser/desktop/discussions).
+If you'd like to report a bug, please do so on our [GitHub Issues page](https://github.com/zen-browser/desktop/issues/) and for feature requests, you can use [GitHub Discussions](https://github.com/zen-browser/desktop/discussions).
 
 Zen is an open-source project, and we welcome contributions from the community! Please take a look at the [contribution guidelines](./docs/contribute.md) before getting started!
 

build/firefox-cache/l10n-last-commit-hash

@@ -1 +1 @@
-73901ca17f4a2159dd4488cea8684e9abbfdcc89
+69c3d9ff05fd352d761a41ec35f59b06e166e3bc

prefs/firefox/fullscreen.yaml

@@ -1,16 +0,0 @@
-# This Source Code Form is subject to the terms of the Mozilla Public
-# License, v. 2.0. If a copy of the MPL was not distributed with this
-# file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
-# Fullscreen API preferences
-- name: full-screen-api.transition-duration.enter
-  value: "0 0"
-
-- name: full-screen-api.transition-duration.leave
-  value: "0 0"
-
-- name: full-screen-api.warning.delay
-  value: -1
-
-- name: full-screen-api.warning.timeout
-  value: 0

prefs/zen/workspaces.yaml

@@ -18,7 +18,7 @@
   value: true
 
 - name: zen.workspaces.swipe-actions.delta-multiplier
-  value: 90
+  value: 100
 
 - name: zen.workspaces.switch-animation-duration
   value: 200

src/browser/components/urlbar/UrlbarValueFormatter-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarValueFormatter.sys.mjs b/browser/components/urlbar/UrlbarValueFormatter.sys.mjs
-index f28d277764158566bc9406ce0e6160d92d346a63..82dd5f8568ec1b12e87676e5c2b243824628b5af 100644
+index f28d277764158566bc9406ce0e6160d92d346a63..aee17083999f99670c2de7b47cb917e400da86a6 100644
 --- a/browser/components/urlbar/UrlbarValueFormatter.sys.mjs
 +++ b/browser/components/urlbar/UrlbarValueFormatter.sys.mjs
 @@ -77,7 +77,7 @@ export class UrlbarValueFormatter {
@@ -11,7 +11,30 @@ index f28d277764158566bc9406ce0e6160d92d346a63..82dd5f8568ec1b12e87676e5c2b24382
      });
    }
  
-@@ -371,7 +371,7 @@ export class UrlbarValueFormatter {
+@@ -105,6 +105,22 @@ export class UrlbarValueFormatter {
+   }
+ 
+   #ensureFormattedHostVisible(urlMetaData) {
++    // Make sure the domain is visible even with long subdomains when the single sidebar is being used
++    if (
++      this.#window.gZenVerticalTabsManager?._hasSetSingleToolbar
++      && Services.prefs.getBoolPref("zen.urlbar.show-domain-only-in-sidebar")
++    ) {
++      const hoverAttr = "zen-has-implicit-hover";
++      const hasHover = this.#window.gNavToolbox.hasAttribute(hoverAttr);
++      this.#window.gNavToolbox.removeAttribute(hoverAttr);
++
++      this.#inputField.scrollLeft = this.#inputField.scrollLeftMax;
++
++      if (hasHover) {
++        this.#window.gNavToolbox.setAttribute(hoverAttr, true);
++      }
++      return;
++    }
+     // Make sure the host is always visible. Since it is aligned on
+     // the first strong directional character, we set scrollLeft
+     // appropriately to ensure the domain stays visible in case of an
+@@ -371,7 +387,7 @@ export class UrlbarValueFormatter {
     * @returns {boolean}
     *   True if formatting was applied and false if not.
     */
@@ -20,7 +43,7 @@ index f28d277764158566bc9406ce0e6160d92d346a63..82dd5f8568ec1b12e87676e5c2b24382
      let urlMetaData = this.#getUrlMetaData();
      if (!urlMetaData) {
        return false;
-@@ -640,6 +640,7 @@ export class UrlbarValueFormatter {
+@@ -640,6 +656,7 @@ export class UrlbarValueFormatter {
        this.#window.requestAnimationFrame(() => {
          if (instance == this.#resizeInstance) {
            this.#ensureFormattedHostVisible();

src/browser/themes/shared/urlbar-searchbar-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
-index 0ee35cfe67c9bce37a844d4b7d9715d4fb50f709..5cdb8037e49a68ea4126af349690af8a16b5e59b 100644
+index 0ee35cfe67c9bce37a844d4b7d9715d4fb50f709..034cf876c8cef5a2b4c0ca5f209d127dbfc90b20 100644
 --- a/browser/themes/shared/urlbar-searchbar.css
 +++ b/browser/themes/shared/urlbar-searchbar.css
 @@ -10,7 +10,7 @@
@@ -20,7 +20,18 @@ index 0ee35cfe67c9bce37a844d4b7d9715d4fb50f709..5cdb8037e49a68ea4126af349690af8a
  }
  
  /* Document Picture-in-Picture API window */
-@@ -333,10 +333,14 @@ toolbar[inactive="true"] .urlbar,
+@@ -200,6 +200,10 @@ toolbar[inactive="true"] .urlbar,
+   .urlbar:not([focused])[textoverflow="left"][domaindir="rtl"] > .urlbar-input-container > .urlbar-input-box > & {
+     mask-image: linear-gradient(to right, transparent var(--urlbar-scheme-size), black calc(var(--urlbar-scheme-size) + 3ch));
+   }
++
++  #navigator-toolbox[zen-has-implicit-hover="true"] .urlbar:not([focused])[textoverflow="left"] > .urlbar-input-container > .urlbar-input-box > & {
++    mask-image: linear-gradient(to right, transparent, black 3ch, black calc(100% - 3ch), transparent);
++  }
+ }
+ 
+ #urlbar-scheme {
+@@ -333,10 +337,14 @@ toolbar[inactive="true"] .urlbar,
  
  .urlbar[breakout][breakout-extend] {
    height: auto;

src/external-patches/firefox/native_macos_popovers/D284084.patch

@@ -385,12 +385,12 @@ diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
 +                                           preferredEdge:preferredEdge
 +                                            hiddenAnchor:shouldHideAnchor];
 +        SyncPopoverBounds([(PopupWindow*)mWindow popover], popupFrame);
-+        if (mPopupLevel == PopupLevel::Parent) {
-+          [nativeParentWindow addChildWindow:mWindow ordered:NSWindowAbove];
-+        }
++
++
++
 +
 +        // Exit early here since the popover is now shown.
-+        mWindow.isBeingShown = NO;
++
 +        return;
 +      }
        // If our popup window is a non-native context menu, tell the OS (and

src/external-patches/firefox/native_macos_popovers/D299584.patch

@@ -0,0 +1,51 @@
+diff --git a/widget/cocoa/nsCocoaWindow.h b/widget/cocoa/nsCocoaWindow.h
+--- a/widget/cocoa/nsCocoaWindow.h
++++ b/widget/cocoa/nsCocoaWindow.h
+@@ -140,10 +140,11 @@
+ 
+   // NSPopover support for native appearance
+   NSPopover* mPopover;
+   NSViewController* mPopoverViewController;
+   BOOL mUsePopover;
++  NSRect mLastPopoverRect;
+ }
+ 
+ - (id)initWithContentRect:(NSRect)contentRect
+                 styleMask:(NSUInteger)styleMask
+                   backing:(NSBackingStoreType)bufferingType
+diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
+--- a/widget/cocoa/nsCocoaWindow.mm
++++ b/widget/cocoa/nsCocoaWindow.mm
+@@ -5597,11 +5597,10 @@
+     return false;
+   }
+   nsMenuPopupFrame* popupFrame = GetPopupFrame();
+   return [mWindow isKindOfClass:[PopupWindow class]] &&
+          [(PopupWindow*)mWindow usePopover] && popupFrame &&
+-         popupFrame->ShouldFollowAnchor() &&
+          !popupFrame->PopupElement().GetBoolAttr(nsGkAtoms::nonnativepopover);
+ }
+ 
+ TransparencyMode nsCocoaWindow::GetTransparencyMode() {
+   NS_OBJC_BEGIN_TRY_BLOCK_RETURN;
+@@ -8775,10 +8774,19 @@
+   NS_OBJC_BEGIN_TRY_IGNORE_BLOCK;
+   if (!mPopover) {
+     return;
+   }
+ 
++  if (!positioningRect.size.width && !positioningRect.size.height &&
++      mLastPopoverRect.size.width && mLastPopoverRect.size.height) {
++    // Sometimes, specially when downloading addons from unofficial sources,
++    // the popover is shown in a very fast motion and the positioningRect is
++    // empty.
++    positioningRect = mLastPopoverRect;
++  }
++  mLastPopoverRect = positioningRect;
++
+   // Close existing popover if it's already shown
+   if (mPopover.shown) {
+     [mPopover close];
+   }
+ 
+

src/external-patches/manifest.json

@@ -4,7 +4,10 @@
 [
   {
     "type": "phabricator",
-    "id": "D284084",
+    "ids": [
+      "D284084",
+      "D299584"
+    ],
     "name": "Native MacOS popovers",
     "replaces": {
       // Specifically trying to target FeatureCallout.sys.mjs's change.
@@ -22,7 +25,9 @@
       " #include \"nsISupportsPrimitives.h\"\n": "",
 
       "     Atom(\"nonnative\", \"nonnative\"),\n": "",
-      "Atom(\"noscript\", \"noscript\"),": "Atom(\"noscript\", \"noscript\"),\n     Atom(\"noshade\", \"noshade\"),"
+      "Atom(\"noscript\", \"noscript\"),": "Atom(\"noscript\", \"noscript\"),\n     Atom(\"noshade\", \"noshade\"),",
+
+      "GetBoolAttr(nsGkAtoms::nonnative)": "GetBoolAttr(nsGkAtoms::nonnativepopover)"
     }
   },
   {

src/widget/SwipeTracker-cpp.patch

@@ -1,5 +1,5 @@
 diff --git a/widget/SwipeTracker.cpp b/widget/SwipeTracker.cpp
-index 887d06d3bd9cdaa934880e0ae7a11ec8b737fb61..7225d4264c9ec71ef1e5e717a1a62c4ef0aff0b7 100644
+index 887d06d3bd9cdaa934880e0ae7a11ec8b737fb61..979f93ddab0d661ac1a1d73e7a0ba27fa2c8f9b7 100644
 --- a/widget/SwipeTracker.cpp
 +++ b/widget/SwipeTracker.cpp
 @@ -3,6 +3,7 @@
@@ -20,7 +20,15 @@ index 887d06d3bd9cdaa934880e0ae7a11ec8b737fb61..7225d4264c9ec71ef1e5e717a1a62c4e
    // gestureAmount needs to stay between -1 and 0 when swiping right and
    // between 0 and 1 when swiping left.
    double min =
-@@ -90,7 +94,7 @@ bool SwipeTracker::ComputeSwipeSuccess() const {
+@@ -84,13 +88,14 @@ bool SwipeTracker::ComputeSwipeSuccess() const {
+   // If the fingers were moving away from the target direction when they were
+   // lifted from the touchpad, abort the swipe.
+   if (mCurrentVelocity * targetValue <
+-      -StaticPrefs::widget_swipe_velocity_twitch_tolerance()) {
++      -StaticPrefs::widget_swipe_velocity_twitch_tolerance()
++    && !StaticPrefs::zen_swipe_is_fast_swipe()) {
+     return false;
+   }
  
    return (mGestureAmount * targetValue +
            mCurrentVelocity * targetValue *
@@ -29,7 +37,7 @@ index 887d06d3bd9cdaa934880e0ae7a11ec8b737fb61..7225d4264c9ec71ef1e5e717a1a62c4e
           kSwipeSuccessThreshold;
  }
  
-@@ -141,7 +145,8 @@ nsEventStatus SwipeTracker::ProcessEvent(
+@@ -141,7 +146,8 @@ nsEventStatus SwipeTracker::ProcessEvent(
    // display the UI as if we were at the success threshold as that would
    // give a false indication that navigation would happen.
    if (!computedSwipeSuccess && (eventAmount >= kSwipeSuccessThreshold ||

src/zen/common/modules/ZenUIManager.mjs

@@ -698,11 +698,6 @@ window.gZenUIManager = {
       this.urlbarShowDomainOnly
     ) {
       let url = BrowserUIUtils.removeSingleTrailingSlashFromURL(aURL);
-      requestIdleCallback(() => {
-        // Scroll the urlbar all the way to the right so that
-        // the domain is always visible when the url is too long.
-        gURLBar.inputField.scrollLeft = gURLBar.inputField.scrollWidth;
-      });
       let stripped = url.startsWith("https://") ? url.split("/")[2] : url;
       if (stripped.startsWith("www.")) {
         stripped = stripped.substring(4);

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

@@ -45,6 +45,7 @@ body,
   overflow: clip;
 
   isolation: isolate;
+  contain: content;
 
   &::after,
   &::before {
@@ -53,6 +54,7 @@ body,
     inset: 0;
     z-index: 0;
     pointer-events: none;
+    will-change: background-color;
   }
 
   &::after {
@@ -106,8 +108,6 @@ body,
 }
 
 #zen-browser-background {
-  contain: paint;
-
   /* This is conceptually a background, but putting this on a pseudo-element
     * avoids it from suppressing the chrome-content separator border, etc.
     *

src/zen/common/styles/zen-omnibox.css

@@ -120,6 +120,7 @@
 
 #urlbar .urlbar-input {
   border-radius: 0 !important;
+  color: color-mix(in srgb, var(--input-color, FieldText) 70%, transparent);
 }
 
 #urlbar .urlbar-input-box {

src/zen/common/styles/zen-overflowing-addons.css

@@ -6,7 +6,7 @@
 
 #zen-overflow-extensions-list {
   display: none;
-  
+
   :root[zen-single-toolbar="true"] &:not(:empty) {
     --uei-icon-size: 14px;
     display: grid;
@@ -25,7 +25,6 @@
       margin: 0;
       width: 100%;
       height: 100%;
-      padding: 8px 0;
       justify-content: center;
       align-items: center;
     }
@@ -33,17 +32,21 @@
     & .unified-extensions-item-action-button {
       appearance: none;
       background-color: var(--zen-toolbar-element-bg);
-      height: 30px;
+      height: 26px;
       margin: 0;
       justify-content: center;
       align-items: center;
-      border-radius: var(--border-radius-medium);
-      overflow: clip;
+      border-radius: calc(var(--border-radius-medium) - 2px);
+      overflow: visible;
       padding: 0;
 
       &:hover {
         background-color: var(--zen-toolbar-element-bg-hover);
       }
+
+      & .toolbarbutton-badge {
+        transform: translate(4px, 2px);
+      }
     }
 
     .unified-extensions-item-contents,
@@ -52,4 +55,4 @@
       display: none;
     }
   }
-}
+}

src/zen/spaces/ZenSpaceManager.mjs

@@ -816,14 +816,12 @@ class nsZenWorkspaces {
 
     let removedEmptyTab = false;
     let initialTabWasEmpty = false;
-    if (
-      this._initialTab &&
-      !(this._initialTab._shouldRemove && this._initialTab._veryPossiblyEmpty)
-    ) {
-      initialTabWasEmpty = !!this._initialTab._veryPossiblyEmpty;
-      gBrowser.selectedTab = this._initialTab;
-      this.moveTabToWorkspace(this._initialTab, this.activeWorkspace);
-      gBrowser.moveTabTo(this._initialTab, {
+    if (this._shouldOverrideTabs) {
+      let initialTab = this._initialTab || gBrowser.selectedTab;
+      initialTabWasEmpty = !!initialTab._veryPossiblyEmpty;
+      gBrowser.selectedTab = initialTab;
+      this.moveTabToWorkspace(initialTab, this.activeWorkspace);
+      gBrowser.moveTabTo(initialTab, {
         forceUngrouped: true,
         tabIndex: 0,
       });
@@ -1985,26 +1983,41 @@ class nsZenWorkspaces {
       );
       const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
       const newTransform = `translateX(${offset}%)`;
+      // Only animate the workspace that is coming in, to avoid having multiple workspaces
+      // animating off-screen at the same time which can cause performance issues. With an off
+      // set of 1 or -1, so we animate the current workspace and the next one.
+      const goingLeft = newWorkspaceIndex < previousWorkspaceIndex;
+      const willBeVisible =
+        (goingLeft &&
+          elementWorkspaceIndex >= newWorkspaceIndex &&
+          elementWorkspaceIndex <= previousWorkspaceIndex) ||
+        (!goingLeft &&
+          elementWorkspaceIndex <= newWorkspaceIndex &&
+          elementWorkspaceIndex >= previousWorkspaceIndex);
       if (shouldAnimate) {
-        const existingPaddingTop = element.style.paddingTop;
-        animations.push(
-          gZenUIManager.motion.animate(
-            element,
-            {
-              transform: existingTransform
-                ? [existingTransform, newTransform]
-                : newTransform,
-              paddingTop: existingTransform
-                ? [existingPaddingTop, existingPaddingTop]
-                : existingPaddingTop,
-            },
-            {
-              type: "spring",
-              bounce: 0,
-              duration: kGlobalAnimationDuration,
-            }
-          )
-        );
+        if (!willBeVisible) {
+          element.style.transform = newTransform;
+        } else {
+          const existingPaddingTop = element.style.paddingTop;
+          animations.push(
+            gZenUIManager.motion.animate(
+              element,
+              {
+                transform: existingTransform
+                  ? [existingTransform, newTransform]
+                  : newTransform,
+                paddingTop: existingTransform
+                  ? [existingPaddingTop, existingPaddingTop]
+                  : existingPaddingTop,
+              },
+              {
+                type: "spring",
+                bounce: 0,
+                duration: kGlobalAnimationDuration,
+              }
+            )
+          );
+        }
       }
       element.active = offset === 0;
       if (offset === 0) {

src/zen/spaces/ZenSpacesSwipe.mjs

@@ -20,22 +20,7 @@ export class ZenSpacesSwipe {
   };
 
   constructor() {
-    const elements = [
-      gNavToolbox,
-      // Event handlers do not work on elements inside shadow DOM
-      // so we need to attach them directly.
-      document
-        .getElementById("tabbrowser-arrowscrollbox")
-        ?.shadowRoot?.querySelector("scrollbox"),
-    ];
-
-    for (const element of elements) {
-      if (!element) {
-        continue;
-      }
-      this._attachWorkspaceSwipeGestures(element);
-    }
-
+    this.#attachWorkspaceSwipeGestures(gNavToolbox);
     this._popupOpenHandler = this._popupOpenHandler.bind(this);
   }
 
@@ -50,7 +35,7 @@ export class ZenSpacesSwipe {
     );
   }
 
-  _attachWorkspaceSwipeGestures(element) {
+  #attachWorkspaceSwipeGestures(element) {
     element.addEventListener(
       "MozSwipeGestureMayStart",
       this._handleSwipeMayStart.bind(this),

src/zen/spaces/zen-workspaces.css

@@ -11,7 +11,6 @@
   align-items: center;
   display: flex;
   font-size: x-small;
-  margin: 0 3px;
   padding: 0;
 
   position: relative;
@@ -347,8 +346,12 @@ zen-workspace {
       overflow-y: auto;
     }
 
-    :root[swipe-gesture] &::part(scrollbox) {
-      scrollbar-width: none;
+    :root[swipe-gesture] &{
+      pointer-events: none;
+
+      &::part(scrollbox) {
+        scrollbar-width: none;
+      }
     }
 
     &[overflowing] {

src/zen/split-view/ZenViewSplitter.mjs

@@ -969,19 +969,14 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
   };
 
   _oppositeSide(side) {
-    if (side === "top") {
-      return "bottom";
-    }
-    if (side === "bottom") {
-      return "top";
-    }
-    if (side === "left") {
-      return "right";
-    }
-    if (side === "right") {
-      return "left";
-    }
-    return undefined;
+    const OPPOSITE_SIDES = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left",
+    };
+
+    return OPPOSITE_SIDES[side];
   }
 
   calculateHoverSide(x, y, elementRect) {

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -335,7 +335,7 @@
     #tabbrowser-tabs:not([movingtab])
     &:active:not(:has(.tab-content > image:active)) {
       scale: var(--zen-active-tab-scale);
-      rotate: 0.02deg; /* Subtle rotation to trigger GPU acceleration and prevent blurriness */
+      rotate: 0.01deg; /* Subtle rotation to trigger GPU acceleration and prevent blurriness */
     }
 
     :root:not([zen-renaming-tab="true"])
@@ -1326,6 +1326,7 @@
   padding: 0;
   outline: none !important;
   border-radius: 0;
+  width: 100%;
 }
 
 /* ==========================================================================

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "150.0.2",
-    "candidate": "150.0.2",
+    "version": "150.0.3",
+    "candidate": "150.0.3",
     "candidateBuild": 1
   },
   "buildOptions": {
@@ -20,7 +20,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.19.12b",
+        "displayVersion": "1.19.13b",
         "github": {
           "repo": "zen-browser/desktop"
         },