Merge pull request #3108 from zen-browser/toolbar-redesign

Toolbar redesign

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

@@ -85,13 +85,6 @@ pref('zen.tabs.show-newtab-vertical', true);
 pref('zen.view.show-newtab-button-border-top', true);
 pref('zen.view.show-newtab-button-top', false);
 
-#ifdef XP_MACOSX
-// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
-pref('zen.view.experimental-rounded-view', false);
-#else
-pref('zen.view.experimental-rounded-view', true);
-#endif
-
 #ifdef XP_MACOSX
 pref('zen.theme.border-radius', 10); // In pixels
 #else

src/browser/base/content/ZenStartup.mjs

@@ -1,6 +1,5 @@
 {
   const lazy = {};
-  XPCOMUtils.defineLazyPreferenceGetter(lazy, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
   var ZenStartup = {
     init() {
       this.logHeader();
@@ -41,51 +40,13 @@
         gZenVerticalTabsManager.init();
         gZenCompactModeManager.init();
 
-        XPCOMUtils.defineLazyPreferenceGetter(
-          this,
-          'contentElementSeparation',
-          'zen.theme.content-element-separation',
-          0
-        );
-
         document.l10n.setAttributes(document.getElementById('tabs-newtab-button'), 'tabs-toolbar-new-tab');
-
-        function throttle(f, delay) {
-          let timer = 0;
-          return function (...args) {
-            clearTimeout(timer);
-            timer = setTimeout(() => f.apply(this, args), delay);
-          };
-        }
-
-        new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(
-          document.getElementById('tabbrowser-tabs')
-        );
       } catch (e) {
         console.error('ZenThemeModifier: Error initializing browser layout', e);
       }
       this.closeWatermark();
     },
 
-    _updateTabsToolbar() {
-      // Set tabs max-height to the "toolbar-items" height
-      const toolbarItems = document.getElementById('tabbrowser-tabs');
-      const tabs = document.getElementById('tabbrowser-arrowscrollbox');
-      tabs.style.maxHeight = '0px'; // reset to 0
-      const toolbarRect = toolbarItems.getBoundingClientRect();
-      let height = toolbarRect.height;
-      // -5 for the controls padding
-      let totalHeight = toolbarRect.height - (this.contentElementSeparation * 2) - 5;
-      // remove the height from other elements that aren't hidden
-      const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
-      for (let tab of otherElements) {
-        if (tabs === tab) continue;
-        totalHeight -= tab.getBoundingClientRect().height;
-      }
-      tabs.style.maxHeight = totalHeight + 'px';
-      //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
-    },
-
     openWatermark() {
       if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
         return;

src/browser/base/content/ZenUIManager.mjs

@@ -5,6 +5,45 @@ var gZenUIManager = {
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
+    XPCOMUtils.defineLazyPreferenceGetter(this, 'sidebarHeightThrottle', 'zen.view.sidebar-height-throttle', 500);
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      'contentElementSeparation',
+      'zen.theme.content-element-separation',
+      0
+    );
+    
+    function throttle(f, delay) {
+      let timer = 0;
+      return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => f.apply(this, args), delay);
+      };
+    }
+
+    new ResizeObserver(throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
+      document.getElementById('tabbrowser-tabs')
+    );
+  },
+
+
+  updateTabsToolbar() {
+    // Set tabs max-height to the "toolbar-items" height
+    const toolbarItems = document.getElementById('tabbrowser-tabs');
+    const tabs = document.getElementById('tabbrowser-arrowscrollbox');
+    tabs.style.maxHeight = '0px'; // reset to 0
+    const toolbarRect = toolbarItems.getBoundingClientRect();
+    let height = toolbarRect.height;
+    // -5 for the controls padding
+    let totalHeight = toolbarRect.height - (this.contentElementSeparation * 2) - 5;
+    // remove the height from other elements that aren't hidden
+    const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
+    for (let tab of otherElements) {
+      if (tabs === tab) continue;
+      totalHeight -= tab.getBoundingClientRect().height;
+    }
+    tabs.style.maxHeight = totalHeight + 'px';
+    //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
   },
 
   openAndChangeToTab(url, options) {
@@ -173,10 +212,10 @@ var gZenVerticalTabsManager = {
       !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
     ) {
       this.navigatorToolbox.prepend(topButtons);
-      browser.prepend(this.navigatorToolbox);
+    //  browser.prepend(this.navigatorToolbox);
     } else {
       customizationTarget.prepend(topButtons);
-      tabboxWrapper.prepend(this.navigatorToolbox);
+    //  tabboxWrapper.prepend(this.navigatorToolbox);
     }
 
     // Always move the splitter next to the sidebar

src/browser/base/content/browser-box-inc-xhtml.patch

@@ -1,11 +1,12 @@
 diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
-index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..281a3716d56edda243bfca7ebbe0797d75c844e7 100644
+index 7f71abe7d80e4c09dd088517ec9ef106c7cb8654..7e764f08346a048fd352d7f7c06ea434f9b19903 100644
 --- a/browser/base/content/browser-box.inc.xhtml
 +++ b/browser/base/content/browser-box.inc.xhtml
-@@ -22,7 +22,13 @@
+@@ -22,7 +22,14 @@
      <browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
    </vbox>
    <splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
++#include zen-sidebar-panel.inc.xhtml
 +<vbox flex="1" id="zen-appcontent-wrapper">
 +<html:div id="zen-appcontent-navbar-container"></html:div>
 +<hbox id="zen-tabbox-wrapper" flex="1">

src/browser/base/content/zen-assets.inc.xhtml

@@ -20,6 +20,7 @@
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-profile-dialog.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-sidebar-panels.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-popup.css" />
+<link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-cool-toolbar.css" />
 
 <link rel="stylesheet" type="text/css" href="chrome://browser/content/zen-styles/zen-compact-mode.css" />
 <link rel="stylesheet" type="text/css" href="chrome://browser/skin/zen-icons/icons.css" />

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

@@ -43,6 +43,7 @@
         content/browser/zen-styles/zen-popup.css                (content/zen-styles/zen-popup.css)
         content/browser/zen-styles/zen-sidebar-panels.css       (content/zen-styles/zen-sidebar-panels.css)
         content/browser/zen-styles/zen-gradient-generator.css   (content/zen-styles/zen-gradient-generator.css)
+        content/browser/zen-styles/zen-cool-toolbar.css         (content/zen-styles/zen-cool-toolbar.css)
         
         content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
         content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)

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

@@ -194,26 +194,6 @@
   }
 }
 
-@keyframes zen-workspaces-button-active-collapsed-left {
-  from {
-    left: -20px;
-  }
-
-  to {
-    left: -2px;
-  }
-}
-
-@keyframes zen-workspaces-button-active-collapsed-right {
-  from {
-    right: -20px;
-  }
-
-  to {
-    right: -2px;
-  }
-}
-
 /* Mark: Zen Glance */
 @keyframes zen-glance-overlay-animation {
   from {

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

@@ -4,19 +4,9 @@
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
     position: relative;
 
-    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
-    
-    & .browserContainer {
-      overflow: hidden;
-      border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));
-    }
-  }
-
-  @media (-moz-bool-pref: 'zen.view.experimental-rounded-view') {
-    #tabbrowser-tabpanels {
-      mix-blend-mode: multiply;
-      -moz-osx-font-smoothing: grayscale;
-      isolation: isolate;
+    &:not([zen-split="true"]) {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 }

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

@@ -9,19 +9,6 @@
   --inactive-titlebar-opacity: 1;
 }
 
-:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
-  & #tabbrowser-tabpanels {
-    padding-right: var(--zen-element-separation);
-    padding-bottom: var(--zen-element-separation);
-    padding-left: 1px; /* Shadow offset */
-
-    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-      padding-right: 0;
-      padding-left: var(--zen-element-separation);
-    }
-  }
-}
-
 :root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
   #navigator-toolbox,
   #zen-sidebar-splitter {

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -7,19 +7,12 @@
         margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
       }
 
-      #zen-sidebar-top-buttons-customization-target {
-        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+      #zen-appcontent-wrapper {
+        margin-left: var(--zen-element-separation) !important;
       }
 
-      /* Set the extra paddings */
-      #tabbrowser-tabpanels {
-        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
-          padding-right: var(--zen-element-separation) !important;
-        }
-
-        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
-          padding-left: var(--zen-element-separation) !important;
-        }
+      #zen-sidebar-top-buttons-customization-target {
+        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
       }
 
       #zen-sidebar-splitter {
@@ -105,11 +98,8 @@
         --zen-toolbox-top-align: var(--zen-element-separation);
       }
 
-      &:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
-        padding-top: var(--zen-element-separation) !important;
-      }
-
       #sidebar-box,
+      #titlebar,
       #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
         margin-top: var(--zen-element-separation) !important;
       }

src/browser/base/content/zen-styles/zen-cool-toolbar.css

@@ -0,0 +1,45 @@
+
+:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']):not(:has(#tabbrowser-tabpanels[zen-split-view='true'])) {
+  & #zen-appcontent-wrapper {
+    box-shadow: 0 0 1px 1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
+    border-radius: var(--zen-border-radius);
+    padding: 0;
+    overflow: hidden;
+    margin: var(--zen-element-separation);
+    margin-left: 0;
+    
+    #browser:has(#navigator-toolbox[zen-right-side='true']) & {
+      margin-right: 0;
+      margin-left: var(--zen-element-separation);
+    }
+
+    & #zen-appcontent-navbar-container {
+      background: color-mix(in srgb, var(--zen-colors-tertiary) 90%, transparent 10%);
+    }
+
+    :root[zen-no-padding='true'] & {
+      border-radius: 0 !important;
+    }
+  }
+
+  & #zen-appcontent-navbar-container {
+    padding-left: 5px;
+  }
+
+  @media (-moz-platform: macos) {
+    & #zen-appcontent-navbar-container {
+      padding-right: 5px;
+    }
+  }
+
+  & #zen-appcontent-navbar-container {
+    border-bottom: 1px solid light-dark(rgba(0,0,0,.04), rgba(255,255,255,.04));
+  }
+
+  @media (-moz-bool-pref: 'zen.view.compact') {
+    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
+      @media not (-moz-platform: macos) {
+      }
+    }
+  }
+}

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

@@ -4,11 +4,11 @@
   visibility: inherit;
 }
 
-#tabbrowser-tabpanels {
+#zen-appcontent-wrapper {
   transition: transform 0.1s ease-in-out;
 }
 
-#tabbrowser-tabpanels:has(.zen-glance-background) {
+#zen-appcontent-wrapper:has(.zen-glance-background) {
   transform: scale(0.98);
   backdrop-filter: blur(5px);
 
@@ -54,8 +54,9 @@
     transform: translate(var(--initial-x), var(--initial-y));
     width: var(--initial-width);
     height: var(--initial-height);
-    position: absolute;
+    position: fixed;
     border-radius: var(--zen-border-radius);
+    overflow: hidden;
     opacity: 0;
     top: 0;
     left: 0;

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

@@ -36,9 +36,7 @@
 
 .zen-sidebar-panel-button image {
   border-radius: 10px !important;
-  background: var(--toolbarbutton-hover-background);
   border: 2px solid transparent;
-  transition: background 0.1s ease-in-out;
 }
 
 .zen-sidebar-panel-button:hover image {
@@ -146,7 +144,7 @@
 }
 
 #zen-sidebar-web-panel-wrapper {
-  margin: 0 calc(var(--zen-element-separation) / 2) var(--zen-element-separation) var(--zen-element-separation);
+  margin: var(--zen-element-separation) calc(var(--zen-element-separation) / 2) var(--zen-element-separation) var(--zen-element-separation);
 }
 
 #zen-sidebar-web-panel[pinned='true'] {
@@ -163,7 +161,7 @@
 #zen-sidebar-web-header,
 #zen-sidebar-panels-wrapper {
   width: 100%;
-  min-height: 50px;
+  min-height: var(--zen-toolbar-height) !important;
   display: flex;
   align-items: center;
   padding: 0 5px;
@@ -174,6 +172,8 @@
   position: relative;
   color-scheme: var(--toolbar-color-scheme);
   -moz-window-dragging: no-drag;
+
+  --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
 }
 
 #zen-sidebar-web-header {
@@ -225,7 +225,7 @@
 }
 
 #zen-sidebar-web-panel-title {
-  font-size: 1em;
+  font-size: .9em;
   font-weight: 600;
   margin: 0 10px;
   padding: 0;
@@ -250,6 +250,12 @@
   animation: better-sidebar-pinned-hide 0.15s ease-in-out forwards !important;
 }
 
+:root:has(#navigator-toolbox:not([zen-right-side='true'])) {
+  #zen-sidebar-web-panel-wrapper:not(:has(#zen-sidebar-web-panel[pinned='true'])) {
+    margin-left: 0 !important;
+  }
+}
+
 /** UNPINNED **/
 #zen-sidebar-web-panel {
   /* Sets perspective */

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

@@ -17,6 +17,10 @@
 
   #browser {
     --zen-toolbox-padding: calc(var(--zen-element-separation) / 1.5);
+
+    :root[zen-no-padding='true'] & {
+      --zen-toolbox-padding: 4px;
+    }
   }
 
   #vertical-pinned-tabs-container-separator {
@@ -41,7 +45,6 @@
     min-width: var(--zen-toolbox-min-width);
     margin-top: 0 !important; /* Fix full screen mode */
 
-    padding-top: var(--zen-toolbox-top-align);
     padding-bottom: var(--zen-element-separation) !important;
 
     border: none;
@@ -240,7 +243,8 @@
     }
 
     & #zen-sidebar-top-buttons {
-      padding-left: var(--zen-toolbox-padding);
+      padding: var(--zen-element-separation);
+      margin-top: var(--zen-element-separation);
     }
 
     & #zen-workspaces-button[as-button='true'] {
@@ -372,12 +376,6 @@
         }
       }
     }
-
-    @media (-moz-bool-pref: 'zen.view.compact') and (-moz-bool-pref: 'zen.view.compact.hide-toolbar') and (not (-moz-bool-pref: 'zen.view.compact.hide-tabbar')) {
-      & {
-        margin-top: var(--zen-element-separation) !important;
-      }
-    }
   }
 
   /* Mark: toolbox as collapsed */
@@ -413,6 +411,10 @@
       display: none;
     }
 
+    & #TabsToolbar {
+      padding-top: var(--zen-element-separation);
+    }
+
     & #zen-current-workspace-indicator {
       padding-left: 0;
       padding-right: 0;
@@ -563,19 +565,6 @@
             bottom: 50% !important;
             transform: translateY(50%) !important;
           }
-
-          @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-            :root:has(#navigator-toolbox:not([zen-right-side='true'])) &[active='true']::after {
-              left: -2px;
-              animation: zen-workspaces-button-active-collapsed-left 0.1s ease-in-out !important;
-            }
-
-            :root:has(#navigator-toolbox[zen-right-side='true']) &[active='true']::after {
-              left: unset !important;
-              right: -2px;
-              animation: zen-workspaces-button-active-collapsed-right 0.1s ease-in-out !important;
-            }
-          }
         }
       }
     }

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

@@ -87,7 +87,7 @@
   --zen-button-padding: 0.6rem 1.2rem;
 
   /* Toolbar */
-  --zen-toolbar-height: 41px;
+  --zen-toolbar-height: 38px;
   --zen-toolbar-button-inner-padding: 6px;
   --toolbarbutton-outer-padding: 4px;
 

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

@@ -55,17 +55,13 @@
       }
 
       @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-        &[active='true']::after {
-          content: '';
-          position: absolute;
-          width: 4px;
-          border-radius: 99px;
-          height: 4px;
-          background: var(--zen-primary-color);
-          bottom: -2px;
-          left: 50%;
-          transform: translateX(-50%);
-          animation: zen-workspaces-button-active 0.1s ease-in-out;
+        & {
+          opacity: 0.4;
+          transition: opacity 0.2s;
+        }
+        
+        &[active='true'] {
+          opacity: 1;
         }
       }
     }
@@ -431,7 +427,7 @@
   }
 
   & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name  {
-    margin-left: 25px;
+    margin-left: 22px;
   }
 }
 

src/browser/base/content/zen-tabbrowser-elements.inc.xhtml

@@ -1,3 +1,2 @@
-#include zen-sidebar-panel.inc.xhtml
 #include zen-splitview-overlay.inc.xhtml
 #include zen-glance.inc.xhtml

src/browser/base/content/zenThemeModifier.js

@@ -73,6 +73,11 @@ var ZenThemeModifier = {
   updateElementSeparation() {
     const separation = Services.prefs.getIntPref('zen.theme.content-element-separation');
     document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
+    if (separation == 0) {
+      document.documentElement.setAttribute("zen-no-padding", true);
+    } else {
+      document.documentElement.removeAttribute("zen-no-padding");
+    }
   },
 
   /**

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

@@ -293,6 +293,7 @@
       setTimeout(() => {
         window.requestAnimationFrame(() => {
           this.browserWrapper.setAttribute("animate-full-end", true);
+          this.overlay.classList.remove("zen-glance-overlay");
           setTimeout(() => {
             this.animatingFullOpen = false;
             this.closeGlance({ noAnimation: true });

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

@@ -36,10 +36,10 @@
     }
   }
 
-  class ZenPinnedTabManager extends ZenPreloadedFeature {
+  class ZenPinnedTabManager extends ZenDOMOperatedFeature {
 
     init() {
-      if (!this.enabled || PrivateBrowsingUtils.isWindowPrivate(window)) {
+      if (!this.enabled) {
         return;
       }
       this.observer = new ZenPinnedTabsObserver();
@@ -51,7 +51,7 @@
     }
 
     async initTabs() {
-      if (!this.enabled || PrivateBrowsingUtils.isWindowPrivate(window)) {
+      if (!this.enabled) {
         return;
       }
       await ZenPinnedTabsStorage.init();
@@ -60,7 +60,7 @@
     get enabled() {
       if (typeof this._enabled === 'undefined') {
         this._enabled = !(
-          document.documentElement.hasAttribute('privatebrowsingmode') ||
+          PrivateBrowsingUtils.isWindowPrivate(window) ||
           document.documentElement.getAttribute('chromehidden')?.includes('toolbar') ||
           document.documentElement.getAttribute('chromehidden')?.includes('menubar')
         );

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

@@ -35,7 +35,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   }
 
   onlySafeWidthAndHeight() {
-    const panel = document.getElementById('zen-sidebar-web-panel');
+    const panel = this.sidebar;
     const width = panel.style.width;
     const height = panel.style.height;
     panel.setAttribute('style', '');
@@ -239,8 +239,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   }
 
   _handleClickOutside(event) {
-    let sidebar = document.getElementById('zen-sidebar-web-panel');
-    if (!sidebar.hasAttribute('pinned') || this._isDragging || !this.shouldCloseOnBlur) {
+    if (!this.sidebar.hasAttribute('pinned') || this._isDragging || !this.shouldCloseOnBlur) {
       return;
     }
     let target = event.target;
@@ -272,6 +271,8 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
     let sidebar = document.getElementById('zen-sidebar-web-panel');
     if (!this.sidebar.hasAttribute('pinned')) {
       this.moveToTabBoxWrapper();
+    } else {
+      this.moveToTabBox();
     }
     sidebar.removeAttribute('hidden');
     this.update();
@@ -598,7 +599,7 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   }
 
   moveToTabBoxWrapper() {
-    this.tabBox.before(this.sidebarWrapper);
+    document.getElementById('zen-appcontent-wrapper').before(this.sidebarWrapper);
     this.sidebarWrapper.style.order = '';
   }
 
@@ -609,10 +610,10 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
   togglePinned(elem) {
     if (this.sidebar.hasAttribute('pinned')) {
       this._removePinnedFromElements();
-      //this.moveToTabBoxWrapper();
+      this.moveToTabBoxWrapper();
     } else {
       this._setPinnedToElements();
-      //this.moveToTabBox();
+      this.moveToTabBox();
     }
     this.update();  
   }

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

@@ -316,5 +316,4 @@ gZenActorsManager.addJSWindowActor("ZenThemeMarketplace", {
     },
   },
   matches: ["https://*.zen-browser.app/*", "about:preferences"],
-  allFrames: true,
 });

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

@@ -1160,6 +1160,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     await this._updateWorkspacesChangeContextMenu();
 
     document.getElementById('tabbrowser-tabs')._positionPinnedTabs();
+    gZenUIManager.updateTabsToolbar();
 
     await this._propagateWorkspaceData({clearCache: onInit});
     for (let listener of this._changeListeners ?? []) {

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

@@ -22,6 +22,7 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
   initiateThemeMarketplace() {
     this.contentWindow.setTimeout(() => {
       this.addIntallButtons();
+      this.injectMarkplaceAPI();
     }, 0);
   }
 
@@ -67,6 +68,16 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
     }
   }
 
+  injectMarkplaceAPI() {
+    Cu.exportFunction(
+      this.installTheme.bind(this),
+      this.contentWindow,
+      {
+        defineAs: "ZenInstallTheme",
+      }
+    );
+  }
+
   async addIntallButtons() {
     const actionButton = this.actionButton;
     const actionButtonUnnstall = this.actionButtonUnnstall;
@@ -102,7 +113,6 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
 
   async getThemeInfo(themeId) {
     const url = this.getThemeAPIUrl(themeId);
-    console.info('ZTM: Fetching theme info from: ', url);
     const data = await fetch(url, {
       mode: 'no-cors',
     });
@@ -122,14 +132,19 @@ export class ZenThemeMarketplaceChild extends JSWindowActorChild {
     const button = event.target;
     button.disabled = true;
     const themeId = button.getAttribute('zen-theme-id');
-    console.info('ZTM: Uninstalling theme with id: ', themeId);
     this.sendAsyncMessage('ZenThemeMarketplace:UninstallTheme', { themeId });
   }
 
-  async installTheme(event) {
-    const button = event.target;
-    button.disabled = true;
-    const themeId = button.getAttribute('zen-theme-id');
+  async installTheme(object) {
+    // Object can be an event or a theme id
+    let themeId;
+    if (object.target) {
+      const button = object.target;
+      button.disabled = true;
+      themeId = button.getAttribute('zen-theme-id');
+    } else {
+      themeId = object.themeId;
+    }
     console.info('ZTM: Installing theme with id: ', themeId);
 
     const theme = await this.getThemeInfo(themeId);