Merge branch 'zen-browser:dev' into patch-2

.github/workflows/build.yml

@@ -153,9 +153,34 @@ jobs:
           commit_user_name: Zen Browser Robot
           commit_user_email: zen-browser-auto@users.noreply.github.com
 
-  check-release:
+  lint:
     runs-on: ubuntu-latest
     needs: [build-data]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+          token: ${{ secrets.DEPLOY_KEY }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Setup pnpm
+        run: npm install -g pnpm
+
+      - name: Install dependencies
+        run: |
+          pnpm install
+
+      - name: Lint
+        run: pnpm lint
+
+  check-release:
+    runs-on: ubuntu-latest
+    needs: [build-data, lint]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -397,7 +422,7 @@ jobs:
     if: ${{ inputs.create_release || inputs.update_branch == 'twilight' }}
     permissions: write-all
     name: Release
-    needs: [build-data, linux, windows-step-3, check-release, mac, appimage, source]
+    needs: [build-data, linux, windows-step-3, check-release, mac, appimage, source, lint]
     runs-on: ubuntu-latest
     environment:
       name: ${{ inputs.update_branch == 'stable' && 'Deploy-Release' || 'Deploy-Twilight' }}

package.json

@@ -25,6 +25,9 @@
     "type": "git",
     "url": "git+https://github.com/zen-browser/core.git"
   },
+  "hooks": {
+    "pre-commit": "npm run prepare"
+  },
   "keywords": [],
   "author": "",
   "license": "ISC",

src/browser/app/profile/zen-browser.js

@@ -185,7 +185,7 @@ pref('zen.splitView.rearrange-hover-size', 24);
 pref('zen.startup.smooth-scroll-in-tabs', true);
 
 // Zen Workspaces
-pref('zen.workspaces.enabled', true);
+pref('zen.workspaces.enabled', true, locked);
 pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.individual-pinned-tabs', true);

src/browser/base/content/ZenUIManager.mjs

@@ -315,7 +315,7 @@ var gZenVerticalTabsManager = {
       if (isSingleToolbar) {
         this._navbarParent = navBar.parentElement;
         let elements = document.querySelectorAll(
-          '#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container)'
+          '#nav-bar-customization-target > :is([cui-areatype="toolbar"], .chromeclass-toolbar-additional):not(#urlbar-container):not(toolbarspring)'
         );
         elements = Array.from(elements).reverse();
         // Add separator if it doesn't exist

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

@@ -9,6 +9,7 @@
 #tabbrowser-tabpanels[zen-split-view='true'] {
   display: flex;
   flex-direction: row;
+  margin-top: calc(var(--zen-split-column-gap) / -2);
 }
 
 #tabbrowser-tabpanels[zen-split-view='true'] > *:not([zen-split='true']) {
@@ -28,8 +29,9 @@
 #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'],
 #zen-splitview-dropzone {
   flex: 1;
-  margin: calc(var(--zen-split-column-gap) / 2) calc(var(--zen-split-row-gap) / 2 + 1px) !important;
+  margin: var(--zen-split-column-gap) calc(var(--zen-split-row-gap) + 1px) !important;
   margin-bottom: 0 !important;
+  margin-left: 0 !important;
   position: absolute !important;
   overflow: hidden;
 }
@@ -52,7 +54,7 @@
 
 #tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) {
   --zen-split-row-gap: calc(var(--zen-element-separation) + 1px);
-  --zen-split-column-gap: calc(var(--zen-element-separation) * 3 + 1px);
+  --zen-split-column-gap: calc(var(--zen-element-separation) + 1px);
   margin-right: calc(-1 * var(--zen-split-column-gap));
 
   :root[zen-right-side='true'] & {
@@ -63,23 +65,17 @@
 
 #tabbrowser-tabpanels:has(> [zen-split='true']),
 #zen-splitview-overlay {
-  margin-right: calc(var(--zen-element-separation) - var(--zen-split-row-gap) / 2);
-  margin-bottom: calc(var(--zen-element-separation) - var(--zen-split-column-gap) / 2);
-
-  margin-left: calc(var(--zen-split-row-gap) / -2);
-  margin-top: calc(var(--zen-split-column-gap) / -2);
-
   @media (-moz-bool-pref: 'zen.view.compact') {
     :root:not([customizing]) & {
       @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
         & {
-          margin-left: 0;
+          margin-left: 1px;
         }
       }
 
       @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
         & {
-          margin-top: 0;
+          margin-top: calc(var(--zen-split-column-gap) / -2);
         }
       }
     }
@@ -102,8 +98,6 @@
 #zen-splitview-overlay {
   position: relative;
   flex: 1;
-  padding-right: var(--zen-element-separation);
-  padding-bottom: var(--zen-element-separation);
   z-index: 2;
 }
 
@@ -122,7 +116,6 @@
 
 .zen-split-view-splitter[orient='horizontal'] {
   height: var(--zen-split-column-gap);
-  margin-top: calc(var(--zen-split-column-gap) / -2);
   cursor: ns-resize;
 }
 

src/browser/base/content/zen-styles/zen-sidebar-panels.css

@@ -111,6 +111,13 @@
   border: none;
   cursor: ew-resize;
 
+  &:is(.zen-split-view-splitter[orient='vertical']) {
+    /* Bit of a hacky solution, but it works */
+    width: calc(var(--zen-element-separation) - 3px);
+    margin-left: calc(-1 * var(--zen-element-separation) / 2 - 2px);
+    height: unset;
+  }
+
   &::before {
     height: 30px;
     width: 3px;

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -102,6 +102,10 @@
 
   & #nav-bar {
     margin-bottom: 6px;
+
+    & toolbarspring {
+      display: none;
+    }
   }
 
   & #zen-sidebar-top-buttons {

src/browser/base/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs

@@ -14,14 +14,18 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
 
   initalizeZenAPI(event) {
     const verifier = this.contentWindow.document.querySelector('meta[name="zen-content-verified"]');
+
     if (verifier) {
       verifier.setAttribute('content', 'verified');
     }
+
     const possibleRicePage = this.collectRiceMetadata();
+
     if (possibleRicePage?.id) {
       this.sendAsyncMessage('ZenThemeMarketplace:RicePage', possibleRicePage);
       return;
     }
+
     this.initiateThemeMarketplace();
     this.contentWindow.document.addEventListener('ZenCheckForThemeUpdates', this.checkForThemeUpdates.bind(this));
   }
@@ -55,7 +59,7 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
     return this.contentWindow.document.getElementById('install-theme');
   }
 
-  get actionButtonUnnstall() {
+  get actionButtonUninstall() {
     return this.contentWindow.document.getElementById('install-theme-uninstall');
   }
 
@@ -64,10 +68,12 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
       case 'ZenThemeMarketplace:ThemeChanged': {
         const themeId = message.data.themeId;
         const actionButton = this.actionButton;
-        const actionButtonInstalled = this.actionButtonUnnstall;
+        const actionButtonInstalled = this.actionButtonUninstall;
+
         if (actionButton && actionButtonInstalled) {
           actionButton.disabled = false;
           actionButtonInstalled.disabled = false;
+
           if (await this.isThemeInstalled(themeId)) {
             actionButton.classList.add('hidden');
             actionButtonInstalled.classList.remove('hidden');
@@ -76,18 +82,24 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
             actionButtonInstalled.classList.add('hidden');
           }
         }
+
         break;
       }
+
       case 'ZenThemeMarketplace:CheckForUpdatesFinished': {
         const updates = message.data.updates;
+
         this.contentWindow.document.dispatchEvent(
           new CustomEvent('ZenThemeMarketplace:CheckForUpdatesFinished', { detail: { updates } })
         );
+
         break;
       }
+
       case 'ZenThemeMarketplace:GetThemeInfo': {
         const themeId = message.data.themeId;
         const theme = await this.getThemeInfo(themeId);
+
         return theme;
       }
     }
@@ -101,7 +113,7 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
 
   async addIntallButtons() {
     const actionButton = this.actionButton;
-    const actionButtonUnnstall = this.actionButtonUnnstall;
+    const actionButtonUnnstall = this.actionButtonUninstall;
     const errorMessage = this.contentWindow.document.getElementById('install-theme-error');
     if (!actionButton || !actionButtonUnnstall) {
       return;

src/browser/base/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs

@@ -45,7 +45,7 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
     window.gZenThemePicker.riceManager.openRicePage(data);
   }
 
-  compareversion(version1, version2) {
+  compareVersions(version1, version2) {
     var result = false;
     if (typeof version1 !== 'object') {
       version1 = version1.toString().split('.');
@@ -73,22 +73,31 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
 
   async checkForThemeUpdates() {
     console.info('ZenThemeMarketplaceParent: Checking for theme updates');
+
     let updates = [];
     this._themes = null;
+
     for (const theme of Object.values(await this.getThemes())) {
       const themeInfo = await this.sendQuery('ZenThemeMarketplace:GetThemeInfo', { themeId: theme.id });
+
       if (!themeInfo) {
         continue;
       }
-      if (!this.compareversion(themeInfo.version, theme.version || '0.0.0') && themeInfo.version != theme.version) {
+
+      if (!this.compareVersions(themeInfo.version, theme.version || '0.0.0') && themeInfo.version != theme.version) {
         console.info('ZenThemeMarketplaceParent: Theme update found', theme.id, theme.version, themeInfo.version);
+
         themeInfo.enabled = theme.enabled;
         updates.push(themeInfo);
+
         await this.removeTheme(theme.id, false);
+
         this._themes[themeInfo.id] = themeInfo;
       }
     }
+
     await this.updateThemes(this._themes);
+
     this.sendAsyncMessage('ZenThemeMarketplace:CheckForUpdatesFinished', { updates });
   }
 
@@ -166,27 +175,30 @@ export class ZenThemeMarketplaceParent extends JSWindowActorParent {
 
   async checkForThemeChanges() {
     const themes = await this.getThemes();
+
     const themeIds = Object.keys(themes);
-    let changed = false;
+
     for (const themeId of themeIds) {
       const theme = themes[themeId];
+
       if (!theme) {
         continue;
       }
+
       const themePath = PathUtils.join(this.themesRootPath, themeId);
+
       if (!(await IOUtils.exists(themePath))) {
         await this.installTheme(theme);
-        changed = true;
       }
     }
-    if (changed) {
-      this.triggerThemeUpdate();
-    }
+
+    this.triggerThemeUpdate();
   }
 
   async removeTheme(themeId, triggerUpdate = true) {
     const themePath = PathUtils.join(this.themesRootPath, themeId);
     await IOUtils.remove(themePath, { recursive: true, ignoreAbsent: true });
+
     if (triggerUpdate) {
       this.triggerThemeUpdate();
     }

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

@@ -292,7 +292,7 @@ var gZenMarketplaceManager = {
         preferencesWrapper.setAttribute('flex', '1');
 
         for (const entry of preferences) {
-          const { property, label, type, placeholder } = entry;
+          const { property, label, type, placeholder, defaultValue } = entry;
 
           switch (type) {
             case 'dropdown': {
@@ -309,7 +309,7 @@ var gZenMarketplaceManager = {
               menulist.setAttribute('sizetopopup', 'none');
               menulist.setAttribute('id', property + '-popup-menulist');
 
-              const savedValue = Services.prefs.getStringPref(property, 'none');
+              const savedValue = Services.prefs.getStringPref(property, defaultValue ?? 'none');
 
               menulist.setAttribute('value', savedValue);
               menulist.setAttribute('tooltiptext', property);
@@ -395,7 +395,7 @@ var gZenMarketplaceManager = {
               checkboxElement.setAttribute('zen-pref', property);
 
               // Checkbox only works with "true" and "false" values, it's not like HTML checkboxes.
-              if (Services.prefs.getBoolPref(property, false)) {
+              if (Services.prefs.getBoolPref(property, defaultValue ?? false)) {
                 checkboxElement.setAttribute('checked', 'true');
               }
 
@@ -423,7 +423,7 @@ var gZenMarketplaceManager = {
               container.setAttribute('align', 'center');
               container.setAttribute('role', 'group');
 
-              const savedValue = Services.prefs.getStringPref(property, '');
+              const savedValue = Services.prefs.getStringPref(property, defaultValue ?? '');
               const sanitizedProperty = property?.replaceAll(/\./g, '-');
 
               const input = document.createElement('input');
@@ -439,8 +439,8 @@ var gZenMarketplaceManager = {
               }
 
               input.addEventListener(
-                'change',
-                ZenThemesCommon.throttle((event) => {
+                'input',
+                ZenThemesCommon.debounce((event) => {
                   const value = event.target.value;
 
                   Services.prefs.setStringPref(property, value);

src/browser/themes/shared/toolbarbuttons-css.patch

@@ -1,8 +1,8 @@
 diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
-index ef04ef4eedb984f14ee1196a3f89b026b2d6d587..734985e86b2ee2987461766593ac6902a510e7b6 100644
+index ca1d70b515f17922c3625e38e2110368ad0de652..22cb71fb3d254edf46a73c4308a0e136002f203a 100644
 --- a/browser/themes/shared/toolbarbuttons.css
 +++ b/browser/themes/shared/toolbarbuttons.css
-@@ -426,7 +426,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
+@@ -420,7 +420,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
       */
      align-items: stretch;
      > .toolbarbutton-icon {