feat: Small improvements to haptifc feedback and coloring, b=no-bug, c=common, media, tabs, workspaces

src/browser/app/profile/browser.inc

@@ -8,7 +8,6 @@ pref("browser.startup.page", 3);
 pref("browser.sessionstore.restore_pinned_tabs_on_demand", true);
 
 // Toolbars
-pref("browser.tabs.closeWindowWithLastTab", false);
 pref("browser.tabs.loadBookmarksInTabs", false);
 pref("browser.tabs.hoverPreview.enabled", false);
 pref("browser.tabs.dragdrop.moveOverThresholdPercent", 50);

src/browser/base/content/browser-commands-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-commands.js b/browser/base/content/browser-commands.js
-index 352de44dda36e3f6672eb353f42978ede0cd2681..0fde717eaf755526ec65b676c43bd34c6a675934 100644
+index b0b2383453ef771af3eb9260618f1e2e3022eb4e..7c5844582d9adb55c55fb1627a9980cf0e5c110b 100644
 --- a/browser/base/content/browser-commands.js
 +++ b/browser/base/content/browser-commands.js
 @@ -318,6 +318,10 @@ var BrowserCommands = {
@@ -13,18 +13,21 @@ index 352de44dda36e3f6672eb353f42978ede0cd2681..0fde717eaf755526ec65b676c43bd34c
      // A notification intended to be useful for modular peformance tracking
      // starting as close as is reasonably possible to the time when the user
      // expressed the intent to open a new tab.  Since there are a lot of
-@@ -400,6 +404,10 @@ var BrowserCommands = {
+@@ -402,6 +406,13 @@ var BrowserCommands = {
        return;
      }
  
 +    if (gBrowser.selectedTab.hasAttribute("zen-empty-tab")) {
++      if (gZenWorkspaces.shouldCloseWindow()) {
++        closeWindow(true);
++      }
 +      return;
 +    }
 +
      // Keyboard shortcuts that would close a tab that is pinned select the first
      // unpinned tab instead.
      if (
-@@ -407,8 +415,8 @@ var BrowserCommands = {
+@@ -409,8 +420,8 @@ var BrowserCommands = {
        (event.ctrlKey || event.metaKey || event.altKey) &&
        gBrowser.selectedTab.pinned
      ) {

src/browser/themes/shared/preferences/zen-preferences.css

@@ -591,7 +591,9 @@ groupbox h2 {
 #dataCollectionCategory,
 #dataCollectionGroup,
 #websiteAdvertisingCategory,
-#websiteAdvertisingGroup {
+#websiteAdvertisingGroup,
+#webAppearanceGroup,
+#helpButton {
   display: none !important;
 }
 

src/browser/themes/shared/zen-icons/icons.css

@@ -165,6 +165,7 @@
 
 #add-ons-button,
 #appMenu-extensions-themes-button,
+#appMenu-unified-extensions-button,
 #unified-extensions-button {
   list-style-image: url('extension.svg') !important;
 }

src/widget/cocoa/nsCocoaWindow-mm.patch

@@ -1,5 +1,5 @@
 diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
-index c4627621344d35081f11a7b0e03d02eca2097609..709a0dbfe46daa4148a423242c63598ba6904fde 100644
+index c4627621344d35081f11a7b0e03d02eca2097609..c9e35156b484f1afdecdd7f93b6bf02e25fae09b 100644
 --- a/widget/cocoa/nsCocoaWindow.mm
 +++ b/widget/cocoa/nsCocoaWindow.mm
 @@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect
@@ -7,7 +7,7 @@ index c4627621344d35081f11a7b0e03d02eca2097609..709a0dbfe46daa4148a423242c63598b
  // Returns an autoreleased NSImage.
  static NSImage* GetMenuMaskImage() {
 -  const CGFloat radius = 6.0f;
-+  const CGFloat radius = 11.0f;
++  const CGFloat radius = 10.0f;
    const NSSize maskSize = {radius * 3.0f, radius * 3.0f};
    NSImage* maskImage = [NSImage imageWithSize:maskSize
                                        flipped:FALSE

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

@@ -66,8 +66,8 @@
     }
 
     @media (-moz-pref('zen.view.grey-out-inactive-windows')) {
-      &:-moz-window-inactive::after {
+      &:-moz-window-inactive {
-        background: var(--zen-main-browser-background-toolbar);
+        background: InactiveCaption;
       }
     }
 

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

@@ -117,11 +117,13 @@
   --zen-button-padding: 0.6rem 1.2rem;
 
   --zen-toolbar-element-bg: light-dark(
-    color-mix(in srgb, var(--toolbox-textcolor) 10%, transparent 90%),
+    color-mix(in oklch, var(--toolbox-textcolor) 8%, rgba(255, 255, 255, 0.01)),
-    color-mix(in srgb, var(--toolbox-textcolor) 15%, transparent 85%)
+    color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent 85%)
   );
 
   /* Toolbar */
+  --tab-selected-color-scheme: inherit;
+
   --zen-toolbar-height: 38px;
   --zen-toolbar-button-inner-padding: 6px;
   --toolbarbutton-outer-padding: 4px;
@@ -231,12 +233,10 @@
 
   &[zen-should-be-dark-mode='true'] #browser {
     color-scheme: dark;
-    --tab-selected-color-scheme: dark;
   }
 
   &[zen-should-be-dark-mode='false'] #browser {
     color-scheme: light;
-    --tab-selected-color-scheme: light;
   }
 
   &,

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

@@ -17,7 +17,7 @@
 }
 
 #urlbar {
-  --urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
+  --urlbarView-separator-color: light-dark(hsl(0, 0%, 74.9%), hsl(0, 0%, 20%));
   --urlbarView-hover-background: var(--toolbarbutton-hover-background);
   --urlbarView-highlight-background: var(--toolbarbutton-hover-background);
   border-radius: calc(var(--toolbarbutton-border-radius) - 2px);

src/zen/media/zen-media-controls.css

@@ -284,6 +284,18 @@
   justify-content: space-between;
   max-width: 100%;
   --toolbarbutton-outer-padding: 0;
+  container: media-controls / inline-size;
+}
+
+#zen-media-playback-buttons {
+  gap: 1.3rem;
+}
+
+/* Hide #zen-media-focus-button if it doesn't fit in the toolbar */
+@container media-controls (max-width: 160px) {
+  #zen-media-focus-button {
+    display: none;
+  }
 }
 
 #zen-media-info-container {

src/zen/media/zen-media-controls.inc.xhtml

@@ -29,12 +29,14 @@
       <hbox id="zen-media-controls-hbox">
         <toolbarbutton id="zen-media-focus-button"
           class="toolbarbutton-1" />
-        <toolbarbutton id="zen-media-previoustrack-button"
+        <hbox id="zen-media-playback-buttons">
-          class="toolbarbutton-1" />
+          <toolbarbutton id="zen-media-previoustrack-button"
-        <toolbarbutton id="zen-media-playpause-button"
+            class="toolbarbutton-1" />
-          class="toolbarbutton-1" />
+          <toolbarbutton id="zen-media-playpause-button"
-        <toolbarbutton id="zen-media-nexttrack-button"
+            class="toolbarbutton-1" />
-          class="toolbarbutton-1" />
+          <toolbarbutton id="zen-media-nexttrack-button"
+            class="toolbarbutton-1" />
+        </hbox>
         <toolbarbutton id="zen-media-mute-button"
           class="toolbarbutton-1" />
         <hbox id="media-device-buttons">

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -541,7 +541,7 @@
         case 'unload-switch':
         case 'reset-switch':
         case 'switch':
-          if (behavior.includes('unload')) {
+          if (behavior.includes('unload') && !selectedTab.hasAttribute('zen-essential')) {
             if (selectedTab.hasAttribute('glance-id')) {
               break;
             }

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -54,6 +54,7 @@
                 mouse > rect[isVertical ? 'top' : 'left'] &&
                 mouse < rect[isVertical ? 'bottom' : 'right']
               ) {
+                const nextSibling = draggedTab.nextSibling;
                 if (
                   mouse <
                   rect[isVertical ? 'top' : 'left'] + rect[isVertical ? 'height' : 'width'] / 2
@@ -62,7 +63,9 @@
                 } else {
                   this.insertBefore(draggedTab, tab.nextSibling);
                 }
-                Services.zen.playHapticFeedback();
+                if (nextSibling !== draggedTab.nextSibling) {
+                  Services.zen.playHapticFeedback();
+                }
               }
             }
           }

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2022,10 +2022,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   _shouldChangeToTab(aTab) {
-    return !(
+    return !(aTab?.pinned && aTab?.hasAttribute('pending'));
-      aTab?.hasAttribute('zen-essential') ||
-      (aTab?.pinned && aTab?.hasAttribute('pending'))
-    );
   }
 
   async #shouldShowTabInCurrentWorkspace(tab) {

src/zen/workspaces/zen-gradient-generator.css

@@ -98,8 +98,8 @@
     min-width: 100%;
 
     & > box {
-      width: 20px;
+      width: 22px;
-      height: 20px;
+      height: 22px;
       border-radius: 50%;
       cursor: pointer;
       position: relative;
@@ -112,19 +112,6 @@
           linear-gradient(to top, var(--c3) 0%, transparent 60%);
       }
 
-      &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        outline: 2px solid color-mix(in srgb, var(--zen-toolbar-element-bg) 80%, transparent 20%);
-        border-radius: 50%;
-        pointer-events: none;
-        transition: transform 0.1s;
-      }
-
       &:hover {
         transform: scale(1.05);
 
@@ -248,19 +235,16 @@
 .zen-theme-picker-gradient {
   position: relative;
   overflow: hidden;
-  border-radius: var(--zen-native-content-radius);
+  border-radius: calc(var(--zen-native-content-radius) - 4px);
 
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
-  background: light-dark(
+  background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
-    var(--zen-toolbar-element-bg),
-    color-mix(in srgb, var(--zen-toolbar-element-bg) 60%, transparent 40%)
-  );
   background-image: radial-gradient(
     light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
     transparent 0
   );
-  background-position: -19px -19px;
+  background-position: -20px -20px;
-  background-size: 5px 5px;
+  background-size: 6px 6px;
 
   & .zen-theme-picker-dot {
     position: absolute;