feat: Improved double toolbar urlbar twitching, b=no-bug, c=common, compact-mode

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -71,6 +71,7 @@ export var ZenCustomizableUI = new (class {
             <toolbarbutton
               class="toolbarbutton-1"
               command="cmd_toggleCompactModeIgnoreHover"
+              flex="1"
               data-l10n-id="zen-toggle-compact-mode-button" />
           </toolbaritem>
           <html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>

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

@@ -49,6 +49,7 @@
 
       :root[zen-single-toolbar='true'] & {
         transition-delay: 0.2s;
+        --zen-toolbar-height: 34px;
       }
 
       #tabbrowser-tabpanels[has-toolbar-hovered] & {

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

@@ -114,7 +114,7 @@
   border-radius: 0px !important;
 }
 
-#urlbar:not([breakout-extend='true']) .urlbar-input-box {
+#urlbar .urlbar-input-box {
   font-weight: 500;
 }
 
@@ -151,19 +151,35 @@
 :root:not([zen-single-toolbar='true'])
   #urlbar:not([breakout-extend='true'])
   .urlbar-input-container:not([pageproxystate='invalid']) {
-  flex-direction: row-reverse;
+  padding: 2px 3px;
   gap: 2px;
-  padding: 2px;
 
   & .urlbar-page-action {
     height: 100%;
   }
 
+  & #zen-copy-url-button {
+    order: -1;
+  }
+
   & #identity-box {
+    order: 999;
     margin: 0px !important;
   }
 }
 
+#zen-copy-url-button[disabled] {
+  opacity: 0.3;
+  background: transparent !important;
+}
+
+:root[zen-single-toolbar='true'],
+#urlbar:is([breakout-extend='true'], [pageproxystate='invalid']) {
+  #zen-copy-url-button[disabled] {
+    display: none !important;
+  }
+}
+
 .urlbar-page-action,
 #tracking-protection-icon-container {
   padding: 0 !important;
@@ -204,7 +220,8 @@
 #urlbar[breakout-extend='true'] {
   z-index: 2;
 
-  & .urlbar-input-container {
+  :root[zen-single-toolbar='true'] & .urlbar-input-box,
+  &[zen-floating-urlbar='true'] .urlbar-input-box {
     font-weight: 400;
     @media (-moz-platform: windows) {
       font-weight: 500;
@@ -212,10 +229,15 @@
   }
 
   & #identity-box {
-    margin-right: calc(var(--urlbar-margin-inline) - 1px);
     height: 100%;
   }
 
+  :root:not([zen-single-toolbar='true'])
+    &:not([zen-floating-urlbar='true'])
+    #identity-box:not([pageproxystate='invalid']) {
+    margin-inline-end: 0;
+  }
+
   & .urlbar-background {
     --zen-urlbar-background-base: light-dark(
       #fbfbfb,

src/zen/compact-mode/ZenCompactMode.mjs

@@ -202,6 +202,7 @@ var gZenCompactModeManager = {
   },
 
   updateCompactModeContext(isSingleToolbar) {
+    isSingleToolbar ||= this.checkIfIllegalState();
     const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
     const menu = document.getElementById('zen-context-menu-compact-mode');
     if (isSingleToolbar) {
@@ -231,6 +232,37 @@ var gZenCompactModeManager = {
     this.callAllEventListeners();
   },
 
+  /* Check for illegal states and fix them
+   * @returns {boolean} If the context menu should just show the "toggle" item
+   *    instead of a submenu with hide options
+   */
+  checkIfIllegalState() {
+    // Due to how we layout the sidebar and toolbar, there are some states
+    // that are not allowed mainly due to the caption buttons not being accessible
+    // at the top left/right of the window.
+    const isSidebarExpanded = gZenVerticalTabsManager._prefsSidebarExpanded;
+    if (isSidebarExpanded) {
+      // Fast exit if the sidebar is expanded, as we dont have illegal states then
+      return false;
+    }
+    const canHideSidebar = this.canHideSidebar;
+    const canHideToolbar = this.canHideToolbar;
+    const isLeftSideButtons = !gZenVerticalTabsManager.isWindowsStyledButtons;
+    const isRightSidebar = gZenVerticalTabsManager._prefsRightSide;
+    // on macos: collapsed + left side + only toolbar
+    // on windows: collapsed + right side + only toolbar
+    const closelyIllegalState =
+      (isLeftSideButtons && !isRightSidebar) || (!isLeftSideButtons && isRightSidebar);
+    if (closelyIllegalState && canHideToolbar && !canHideSidebar) {
+      // This state is illegal
+      Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
+      Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
+      this.callAllEventListeners();
+      return true;
+    }
+    return closelyIllegalState;
+  },
+
   callAllEventListeners() {
     this._eventListeners.forEach((callback) => callback());
   },
@@ -309,6 +341,13 @@ var gZenCompactModeManager = {
     );
   },
 
+  get canHideToolbar() {
+    return (
+      Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') &&
+      !gZenVerticalTabsManager._hasSetSingleToolbar
+    );
+  },
+
   animateCompactMode() {
     // Get the splitter width before hiding it (we need to hide it before animating on right)
     document.documentElement.setAttribute('zen-compact-animating', 'true');
@@ -464,14 +503,17 @@ var gZenCompactModeManager = {
       .getElementById('zen-context-menu-compact-mode-toggle')
       .setAttribute('checked', this.preference);
 
-    const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false);
-    const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false);
+    const hideTabBar = this.canHideSidebar;
+    const hideToolbar = this.canHideToolbar;
     const hideBoth = hideTabBar && hideToolbar;
 
     const idName = 'zen-context-menu-compact-mode-hide-';
-    document.getElementById(idName + 'sidebar').setAttribute('checked', !hideBoth && hideTabBar);
-    document.getElementById(idName + 'toolbar').setAttribute('checked', !hideBoth && hideToolbar);
-    document.getElementById(idName + 'both').setAttribute('checked', hideBoth);
+    const sidebarItem = document.getElementById(idName + 'sidebar');
+    const toolbarItem = document.getElementById(idName + 'toolbar');
+    const bothItem = document.getElementById(idName + 'both');
+    sidebarItem.setAttribute('checked', !hideBoth && hideTabBar);
+    toolbarItem.setAttribute('checked', !hideBoth && hideToolbar);
+    bothItem.setAttribute('checked', hideBoth);
   },
 
   _removeOpenStateOnUnifiedExtensions() {

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -76,21 +76,29 @@ export class nsZenSiteDataPanel {
             class="urlbar-page-action"
             role="button"
             data-l10n-id="zen-urlbar-copy-url-button"
-            hidden="true">
+            disabled="true">
         <image class="urlbar-icon"/>
       </hbox>
     `);
-    container.appendChild(fragment);
+    container.after(fragment);
 
     const aElement = this.document.getElementById('zen-copy-url-button');
     aElement.addEventListener('click', () => {
+      if (aElement.hasAttribute('disabled')) {
+        return;
+      }
       this.document.getElementById('cmd_zenCopyCurrentURL').doCommand();
     });
 
     this.window.gBrowser.addProgressListener({
       onLocationChange: (aWebProgress, aRequest, aLocation) => {
         if (aWebProgress.isTopLevel) {
-          aElement.hidden = !this.#canCopyUrl(aLocation);
+          const disabled = !this.#canCopyUrl(aLocation);
+          if (disabled) {
+            aElement.setAttribute('disabled', true);
+          } else {
+            aElement.removeAttribute('disabled');
+          }
         }
       },
     });
@@ -524,7 +532,11 @@ export class nsZenSiteDataPanel {
         break;
       }
       default: {
-        const label = event.target.closest('.permission-popup-permission-label-container');
+        const item = event.target.closest('.permission-popup-permission-item');
+        if (!item) {
+          break;
+        }
+        const label = item.querySelector('.permission-popup-permission-label-container');
         if (label?._permission) {
           this.#onPermissionClick(label);
         }