Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

Co-authored-by: Mr. M <mr.m@tuta.com>

build/flatpak/app.zen_browser.zen.yml.template

@@ -7,7 +7,7 @@ base-version: '24.08'
 add-extensions:
   org.freedesktop.Platform.ffmpeg-full:
     directory: lib/ffmpeg
-    version: '24.08'
+    version: '24.08.26'
     add-ld-path: .
   app.zen_browser.zen.systemconfig:
     directory: etc/zen

locales/en-US/browser/browser/preferences/zen-preferences.ftl

@@ -33,8 +33,6 @@ zen-glance-trigger-shift-click =
     .label = Shift + Click
 zen-glance-trigger-meta-click =
     .label = Meta (Command) + Click
-zen-glance-trigger-mantain-click =
-    .label = Hold Click (Coming Soon!)
 
 zen-look-and-feel-compact-view-header = Show in compact view
 zen-look-and-feel-compact-view-description = Only show the toolbars you use!

locales/en-US/browser/browser/zen-general.ftl

@@ -49,6 +49,9 @@ zen-library-sidebar-workspaces =
 zen-library-sidebar-mods =
     .label = Mods
 
+zen-toggle-compact-mode-button =
+    .tooltiptext = Toggle Compact Mode
+
 # note: Do not translate the "<br/>" tags in the following string
 
 zen-learn-more-text = Learn More
@@ -64,3 +67,24 @@ zen-icons-picker-svg =
   .label = Icons
 
 urlbar-search-mode-zen_actions = Actions
+zen-site-data-settings = Settings
+
+zen-generic-manage = Manage
+zen-generic-more = More
+
+# These labels will be used for the site data panel settings
+zen-site-data-setting-allow = Allowed
+zen-site-data-setting-block = Blocked
+zen-site-data-security-info-extension =
+    .label = Extension
+zen-site-data-security-info-secure =
+    .label = Secure
+zen-site-data-security-info-not-secure =
+    .label = Not Secure
+
+zen-site-data-manage-addons =
+    .label = Manage Extensions
+zen-site-data-get-addons =
+    .label = Add Extensions
+zen-site-data-site-settings =
+    .label = All Site Settings

locales/en-US/browser/browser/zen-vertical-tabs.ftl

@@ -3,20 +3,9 @@ zen-toolbar-context-tabs-right =
     .label = Tabs on the right
     .accesskey = R
 
-zen-toolbar-context-compact-mode =
-    .label = Compact mode
-    .accesskey = C
-
 zen-toolbar-context-compact-mode-enable =
     .label = Enable compact mode
     .accesskey = D
-zen-toolbar-context-compact-mode-just-tabs =
-    .label = Hide sidebar
-zen-toolbar-context-compact-mode-just-toolbar =
-    .label = Hide toolbar
-zen-toolbar-context-compact-mode-hide-both =
-    .label = Hide both
-    .accesskey = H
 zen-toolbar-context-new-folder =
     .label = New Folder
     .accesskey = N

prefs/compact-mode.yaml

@@ -2,12 +2,6 @@
 # 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/.
 
-- name: zen.view.compact.hide-tabbar
-  value: true
-
-- name: zen.view.compact.hide-toolbar
-  value: false
-
 - name: zen.view.compact.toolbar-flash-popup
   value: false
 

prefs/folders.yaml

@@ -6,7 +6,7 @@
   value: true
 
 - name: zen.folders.search.hover-delay
-  value: 1000 # ms
+  value: 900 # ms
 
 - name: zen.folders.max-subfolders
   value: 5

prefs/glance.yaml

@@ -8,9 +8,6 @@
 - name: zen.glance.enable-contextmenu-search
   value: true
 
-- name: zen.glance.hold-duration
-  value: 300 # in ms
-
 - name: zen.glance.open-essential-external-links
   value: true
 

prefs/theme.yaml

@@ -26,7 +26,7 @@
 - name: zen.theme.disable-lightweight
   value: true
 
-- name: zen.theme.use-sysyem-colors
+- name: zen.theme.use-system-colors
   value: false
 
 - name: zen.theme.hide-tab-throbber

prefs/zen-urlbar.yaml

@@ -8,6 +8,9 @@
 - name: zen.urlbar.show-protections-icon
   value: false
 
+- name: zen.urlbar.show-contextual-id
+  value: false
+
 - name: zen.urlbar.behavior
   value: floating-on-type
 

scripts/run_tests.py

@@ -6,6 +6,7 @@ import os
 import sys
 import json
 from pathlib import Path
+from typing import Any
 
 IGNORE_PREFS_FILE_IN = os.path.join(
     'src', 'zen', 'tests', 'ignorePrefs.json'
@@ -15,6 +16,15 @@ IGNORE_PREFS_FILE_OUT = os.path.join(
 )
 
 
+class JSONWithCommentsDecoder(json.JSONDecoder):
+  def __init__(self, **kw):
+    super().__init__(**kw)
+
+  def decode(self, s: str) -> Any:
+    s = '\n'.join(l for l in s.split('\n') if not l.lstrip(' ').startswith('//'))
+    return super().decode(s)
+
+
 def copy_ignore_prefs():
   print("Copying ignorePrefs.json from src/zen/tests to engine/testing/mochitest...")
   # if there are prefs that dont exist on output file, copy them from input file
@@ -22,7 +32,7 @@ def copy_ignore_prefs():
   with open(IGNORE_PREFS_FILE_OUT, 'r') as f:
     all_prefs = json.load(f)
     with open(IGNORE_PREFS_FILE_IN, 'r') as f_in:
-      new_prefs = json.load(f_in)
+      new_prefs = json.load(f_in, cls=JSONWithCommentsDecoder)
       all_prefs.extend(p for p in new_prefs if p not in all_prefs)
   with open(IGNORE_PREFS_FILE_OUT, 'w') as f_out:
     json.dump(all_prefs, f_out, indent=2)

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

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js
-index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd693f1f1135 100644
+index d7542a38a0242dd9c9c6390171d59992d75a0c19..baa5d84c26f7e74c779bc7e1a2b83b543b413441 100644
 --- a/browser/base/content/browser-addons.js
 +++ b/browser/base/content/browser-addons.js
 @@ -1064,7 +1064,7 @@ var gXPInstallObserver = {
@@ -20,7 +20,38 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
        },
      };
  
-@@ -2608,7 +2608,7 @@ var gUnifiedExtensions = {
+@@ -2205,7 +2205,7 @@ var gUnifiedExtensions = {
+   // If the new ID is not added in NOTIFICATION_IDS, consider handling the case
+   // in the "PopupNotificationsBeforeAnchor" handler elsewhere in this file.
+   getPopupAnchorID(aBrowser, aWindow) {
+-    const anchorID = "unified-extensions-button";
++    const anchorID = "zen-site-data-icon-button";
+     const attr = anchorID + "popupnotificationanchor";
+ 
+     if (!aBrowser[attr]) {
+@@ -2216,7 +2216,7 @@ var gUnifiedExtensions = {
+         anchorID
+         // Anchor on the toolbar icon to position the popup right below the
+         // button.
+-      ).firstElementChild;
++      );
+     }
+ 
+     return anchorID;
+@@ -2509,11 +2509,7 @@ var gUnifiedExtensions = {
+     // Lazy load the unified-extensions-panel panel the first time we need to
+     // display it.
+     if (!this._panel) {
+-      let template = document.getElementById(
+-        "unified-extensions-panel-template"
+-      );
+-      template.replaceWith(template.content);
+-      this._panel = document.getElementById("unified-extensions-panel");
++      this._panel = document.getElementById("zen-unified-site-data-panel");
+       let customizationArea = this._panel.querySelector(
+         "#unified-extensions-area"
+       );
+@@ -2608,7 +2604,7 @@ var gUnifiedExtensions = {
          this.recordButtonTelemetry(reason || "extensions_panel_showing");
          this.ensureButtonShownBeforeAttachingPanel(panel);
          PanelMultiView.openPopup(panel, this._button, {
@@ -29,7 +60,7 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
            triggerEvent: aEvent,
          });
        }
-@@ -2795,18 +2795,20 @@ var gUnifiedExtensions = {
+@@ -2795,18 +2791,20 @@ var gUnifiedExtensions = {
        this._maybeMoveWidgetNodeBack(widgetId);
      }
  

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

@@ -0,0 +1,12 @@
+diff --git a/browser/base/content/browser-pageActions.js b/browser/base/content/browser-pageActions.js
+index 00da33bc11189db17b6a2e656acb3a778531197c..9571155baccad9a886cbe9c7bf0bd76a135331c4 100644
+--- a/browser/base/content/browser-pageActions.js
++++ b/browser/base/content/browser-pageActions.js
+@@ -451,6 +451,7 @@ var BrowserPageActions = {
+       ),
+       document.getElementById(this.mainButtonNode.id),
+       document.getElementById("identity-icon"),
++      document.getElementById("zen-site-data-icon-button"),
+     ];
+     for (let node of potentialAnchorNodes) {
+       if (node && !node.hidden) {

src/browser/base/content/navigator-toolbox-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js
-index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e71604425 100644
+index 413bad2a62058a1c434d6a44e927e44eb397289d..472eab5d3bca2bc665920707a71105167cbe75ec 100644
 --- a/browser/base/content/navigator-toolbox.js
 +++ b/browser/base/content/navigator-toolbox.js
 @@ -8,7 +8,7 @@
@@ -11,6 +11,24 @@ index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e
      const widgetOverflow = document.getElementById("widget-overflow");
  
      function onPopupShowing(event) {
+@@ -110,7 +110,7 @@ document.addEventListener(
+         #pageActionButton,
+         #downloads-button,
+         #fxa-toolbar-menu-button,
+-        #unified-extensions-button,
++        #zen-site-data-icon-button,
+         #library-button
+         `);
+       if (!element) {
+@@ -138,7 +138,7 @@ document.addEventListener(
+           gSync.toggleAccountPanel(element, event);
+           break;
+ 
+-        case "unified-extensions-button":
++        case "zen-site-data-icon-button":
+           gUnifiedExtensions.togglePanel(event);
+           break;
+ 
 @@ -187,6 +187,7 @@ document.addEventListener(
          #reload-button ,
          #urlbar-go-button,
@@ -27,3 +45,21 @@ index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e
            gBrowser.handleNewTabMiddleClick(element, event);
            break;
  
+@@ -317,7 +319,7 @@ document.addEventListener(
+         #pageActionButton,
+         #downloads-button,
+         #fxa-toolbar-menu-button,
+-        #unified-extensions-button,
++        #zen-site-data-icon-button,
+         #library-button
+       `);
+       if (!element) {
+@@ -396,7 +398,7 @@ document.addEventListener(
+           gSync.toggleAccountPanel(element, event);
+           break;
+ 
+-        case "unified-extensions-button":
++        case "zen-site-data-icon-button":
+           gUnifiedExtensions.togglePanel(event);
+           break;
+ 

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

@@ -5,10 +5,7 @@
 <commandset id="zenCommandSet">
   <command id="cmd_zenCompactModeToggle" />
   <command id="cmd_zenCompactModeShowSidebar" />
-  <command id="cmd_zenCompactModeShowToolbar" />
+  <command id="cmd_toggleCompactModeIgnoreHover" />
-  <command id="cmd_zenCompactModeHideSidebar" />
-  <command id="cmd_zenCompactModeHideToolbar" />
-  <command id="cmd_zenCompactModeHideBoth" />
 
   <command id="cmd_zenWorkspaceForward" />
   <command id="cmd_zenWorkspaceBackward" />

src/browser/base/content/zen-panels/popups.inc

@@ -49,3 +49,12 @@
   <menuitem id="context_zenFolderUnpack" data-l10n-id="zen-folders-panel-unpack-folder"/>
   <menuitem id="context_zenFolderDelete" data-l10n-id="zen-folders-panel-delete-folder"/>
 </menupopup>
+
+<menupopup id="zenSiteDataActions">
+  <menuitem id="context_zenClearSiteData" data-l10n-id="identity-clear-site-data"/>
+  <menuseparator />
+  <menuitem command="Tools:Addons" data-l10n-id="zen-site-data-manage-addons"/>
+  <menuitem id="context_zenOpenGetAddons" data-l10n-id="zen-site-data-get-addons"/>
+  <menuseparator />
+  <menuitem id="context_zenOpenSiteSettings" data-l10n-id="zen-site-data-site-settings"/>
+</menupopup>

src/browser/base/content/zen-panels/site-data.inc

@@ -0,0 +1,87 @@
+# 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/.
+
+<panel id="zen-unified-site-data-panel"
+        role="group"
+        type="arrow"
+        noautofocus="true"
+        position="bottomright topright">
+  <panelmultiview mainViewId="unified-extensions-view">
+# We'll keep the view with this name/id in order to prevent
+# any sort of future issues we may have if firefox decides
+# to change the functionality of this view
+    <panelview id="unified-extensions-view"
+                class="cui-widget-panelview"
+                mainview-with-header="true">
+      <hbox id="zen-site-data-header">
+        <toolbarbutton id="zen-site-data-header-share"
+                        data-l10n-id="zen-site-data-share"
+                        flex="1"
+                        closemenu="none" />
+        <toolbarbutton id="zen-site-data-header-reader-mode"
+                        command="View:ReaderView"
+                        flex="1" />
+        <toolbarbutton id="zen-site-data-header-screenshot"
+                        command="Browser:Screenshot"
+                        flex="1" />
+        <toolbarbutton id="zen-site-data-header-bookmark"
+                        command="Browser:AddBookmarkAs"
+                        flex="1" />
+      </hbox>
+      <vbox class="zen-site-data-section">
+        <hbox class="zen-site-data-section-header">
+          <label data-l10n-id="unified-extensions-header-title" flex="1" />
+          <label data-l10n-id="zen-generic-manage" id="zen-site-data-manage-addons" />
+        </hbox>
+        <hbox class="panel-subview-body" context="unified-extensions-context-menu" id="zen-site-data-addons">
+          <html:div id="unified-extensions-messages-container">
+            <!-- messages will be inserted here -->
+          </html:div>
+
+          <vbox id="overflowed-extensions-list">
+            <!-- overflowed extension buttons from the nav-bar will go here -->
+          </vbox>
+
+          <vbox id="unified-extensions-area">
+            <!-- default area for extension browser action buttons -->
+          </vbox>
+
+          <vbox class="unified-extensions-list">
+            <!-- active visible extensions go here -->
+          </vbox>
+
+          <vbox id="zen-site-data-new-addon-button-container">
+            <toolbarbutton id="zen-site-data-new-addon-button"
+                  class="subviewbutton toolbarbutton-1" />
+          </vbox>
+        </hbox>
+
+# Keep this button on the DOM even though we hide it for ever,
+# again, to keep firefox happy if they decide to change functionality
+# for this specific button / id
+        <toolbarbutton id="unified-extensions-manage-extensions"
+                        class="subviewbutton panel-subview-footer-button unified-extensions-manage-extensions"
+                        data-l10n-id="unified-extensions-manage-extensions" 
+                        hidden="true" />
+      </vbox>
+      <vbox class="zen-site-data-section">
+        <hbox class="zen-site-data-section-header">
+          <label data-l10n-id="zen-site-data-settings" flex="1" />
+          <label data-l10n-id="zen-generic-more" id="zen-site-data-settings-more" />
+        </hbox>
+        <vbox id="zen-site-data-settings-list">
+          <!-- settings will be inserted here -->
+        </vbox>
+      </vbox>
+      <hbox id="zen-site-data-footer">
+        <toolbarbutton id="zen-site-data-security-info" 
+                       class="subviewbutton zen-interactive-button" />
+        <toolbarbutton id="zen-site-data-actions"
+                       class="subviewbutton zen-interactive-button"
+                       closemenu="none"
+                       context="zenSiteDataActions" />
+      </hbox>
+    </panelview>
+  </panelmultiview>
+</panel>

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

@@ -5,5 +5,6 @@
 #include zen-panels/gradient-generator.inc
 #include zen-panels/emojis-picker.inc
 #include zen-panels/folders-search.inc
+#include zen-panels/site-data.inc
 
 #include zen-panels/popups.inc

src/browser/components/customizableui/CustomizableUI-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index 4f62449d670701c77c681ae36e00bae8bf2f636c..132c77e396cb259181ed13ca8ff784e0ade05e3b 100644
+index 4f62449d670701c77c681ae36e00bae8bf2f636c..ac542f33927f9de9040bab9cd98351a4d74ede4e 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
 @@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -10,6 +10,15 @@ index 4f62449d670701c77c681ae36e00bae8bf2f636c..132c77e396cb259181ed13ca8ff784e0
    HomePage: "resource:///modules/HomePage.sys.mjs",
    PanelMultiView:
      "moz-src:///browser/components/customizableui/PanelMultiView.sys.mjs",
+@@ -323,7 +324,7 @@ var CustomizableUIInternal = {
+       {
+         type: CustomizableUI.TYPE_PANEL,
+         defaultPlacements: [],
+-        anchor: "unified-extensions-button",
++        anchor: "zen-site-data-icon-button",
+       },
+       false
+     );
 @@ -333,19 +334,14 @@ var CustomizableUIInternal = {
        "back-button",
        "forward-button",

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

@@ -648,8 +648,6 @@ var gZenLooksAndFeel = {
         Services.prefs.removeObserver(pref, this);
       }
     });
-    this.setCompactModeStyle();
-
     this.applySidebarLayout();
   },
 
@@ -696,41 +694,6 @@ var gZenLooksAndFeel = {
       });
     }
   },
-
-  setCompactModeStyle() {
-    const chooser = document.getElementById('zen-compact-mode-styles-form');
-    const radios = [...chooser.querySelectorAll('input')];
-
-    let value = '';
-    if (
-      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false) &&
-      Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false)
-    ) {
-      value = 'both';
-    } else {
-      value = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ? 'left' : 'top';
-    }
-    chooser.querySelector(`[value='${value}']`).checked = true;
-    for (let radio of radios) {
-      radio.addEventListener('change', (e) => {
-        let value = e.target.value;
-        switch (value) {
-          case 'left':
-            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
-            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
-            break;
-          case 'top':
-            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
-            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
-            break;
-          default:
-            Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
-            Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
-            break;
-        }
-      });
-    }
-  },
 };
 
 /* eslint-disable no-unused-vars */
@@ -1075,11 +1038,6 @@ var gZenCKSSettings = {
 };
 
 Preferences.addAll([
-  {
-    id: 'zen.view.compact.hide-toolbar',
-    type: 'bool',
-    default: false,
-  },
   {
     id: 'zen.view.compact.toolbar-flash-popup',
     type: 'bool',

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -56,43 +56,6 @@
       <label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
       <description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
 
-        <html:div id="ZenCompactModeStyle">
-            <form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
-                  <label class="web-appearance-choice">
-                        <div class="web-appearance-choice-image-container">
-                            <div class="zen-compact-mode-styles-browser-wrapper" left="">
-                                <div></div>
-                            </div>
-                        </div>
-                        <div class="web-appearance-choice-footer">
-                        <input type="radio" name="web-appearance" value="left" data-l10n-id="preferences-web-appearance-choice-input-auto"
-                        /><span data-l10n-id="zen-compact-mode-styles-left" />
-                  </div>
-                  </label>
-                        <label class="web-appearance-choice">
-                        <div class="web-appearance-choice-image-container">
-                            <div class="zen-compact-mode-styles-browser-wrapper" top="">
-                                <div></div>
-                            </div>
-                        </div>
-                        <div class="web-appearance-choice-footer">
-                        <input type="radio" name="web-appearance" value="top" data-l10n-id="preferences-web-appearance-choice-input-light"
-                        /><span data-l10n-id="zen-compact-mode-styles-top" />
-                  </div>
-                  </label>
-                        <label class="web-appearance-choice">
-                        <div class="web-appearance-choice-image-container">
-                            <div class="zen-compact-mode-styles-browser-wrapper" both="">
-                                <div></div>
-                            </div>
-                        </div>
-                        <div class="web-appearance-choice-footer">
-                        <input type="radio" name="web-appearance" value="both" data-l10n-id="preferences-web-appearance-choice-input-dark"
-                        /><span data-l10n-id="zen-compact-mode-styles-both" />
-                  </div>
-                  </label>
-            </form>
-      </html:div>
       <vbox class="indent">
             <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
                       data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
@@ -124,7 +87,6 @@
 #ifdef XP_MACOSX
                         <menuitem data-l10n-id="zen-glance-trigger-meta-click" value="meta"/>
 #endif
-                        <menuitem data-l10n-id="zen-glance-trigger-mantain-click" value="mantain" disabled="true"/>
                   </menupopup>
             </menulist>
         </hbox>

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
-index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079774eed27 100644
+index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..b63bf54956a42c63d5cadc9360545e235161f625 100644
 --- a/browser/components/urlbar/UrlbarInput.sys.mjs
 +++ b/browser/components/urlbar/UrlbarInput.sys.mjs
 @@ -74,6 +74,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () =>
@@ -75,11 +75,25 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      }
  
      if (isCanonized) {
-@@ -2205,6 +2237,12 @@ export class UrlbarInput {
+@@ -2191,6 +2223,13 @@ export class UrlbarInput {
+     await this.#updateLayoutBreakoutDimensions();
+   }
+ 
++  get zenUrlbarBehavior() {
++    if (this.document.documentElement.hasAttribute("inDOMFullscreen")) {
++      return "float";
++    }
++    return lazy.ZEN_URLBAR_BEHAVIOR;
++  }
++
+   startLayoutExtend() {
+     if (!this.#allowBreakout || this.hasAttribute("breakout-extend")) {
+       // Do not expand if the Urlbar does not support being expanded or it is
+@@ -2205,6 +2244,12 @@ export class UrlbarInput {
  
      this.setAttribute("breakout-extend", "true");
  
-+    if (lazy.ZEN_URLBAR_BEHAVIOR == 'float' || (lazy.ZEN_URLBAR_BEHAVIOR == 'floating-on-type' && !this.focusedViaMousedown)) {
++    if (this.zenUrlbarBehavior == 'float' || (this.zenUrlbarBehavior == 'floating-on-type' && !this.focusedViaMousedown)) {
 +      this.setAttribute("zen-floating-urlbar", "true");
 +      this.window.gZenUIManager.onFloatingURLBarOpen();
 +    } else {
@@ -88,7 +102,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      // Enable the animation only after the first extend call to ensure it
      // doesn't run when opening a new window.
      if (!this.hasAttribute("breakout-extend-animate")) {
-@@ -2224,6 +2262,24 @@ export class UrlbarInput {
+@@ -2224,6 +2269,24 @@ export class UrlbarInput {
        return;
      }
  
@@ -113,7 +127,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      this.removeAttribute("breakout-extend");
      this.#updateTextboxPosition();
    }
-@@ -2553,7 +2609,7 @@ export class UrlbarInput {
+@@ -2553,7 +2616,7 @@ export class UrlbarInput {
  
          this.textbox.parentNode.style.setProperty(
            "--urlbar-container-height",
@@ -122,7 +136,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
          );
          this.textbox.style.setProperty(
            "--urlbar-height",
-@@ -2986,6 +3042,7 @@ export class UrlbarInput {
+@@ -2986,6 +3049,7 @@ export class UrlbarInput {
    }
  
    _toggleActionOverride(event) {
@@ -130,7 +144,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      if (
        event.keyCode == KeyEvent.DOM_VK_SHIFT ||
        event.keyCode == KeyEvent.DOM_VK_ALT ||
-@@ -3087,7 +3144,7 @@ export class UrlbarInput {
+@@ -3087,7 +3151,7 @@ export class UrlbarInput {
     */
    _trimValue(val) {
      let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
@@ -139,7 +153,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
        : val;
      // Only trim value if the directionality doesn't change to RTL and we're not
      // showing a strikeout https protocol.
-@@ -3303,6 +3360,7 @@ export class UrlbarInput {
+@@ -3303,6 +3367,7 @@ export class UrlbarInput {
      resultDetails = null,
      browser = this.window.gBrowser.selectedBrowser
    ) {
@@ -147,7 +161,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      // No point in setting these because we'll handleRevert() a few rows below.
      if (openUILinkWhere == "current") {
        // Make sure URL is formatted properly (don't show punycode).
-@@ -3455,6 +3513,10 @@ export class UrlbarInput {
+@@ -3455,6 +3520,10 @@ export class UrlbarInput {
        }
        reuseEmpty = true;
      }
@@ -158,7 +172,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      if (
        where == "tab" &&
        reuseEmpty &&
-@@ -3462,6 +3524,9 @@ export class UrlbarInput {
+@@ -3462,6 +3531,9 @@ export class UrlbarInput {
      ) {
        where = "current";
      }
@@ -168,7 +182,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      return where;
    }
  
-@@ -3719,6 +3784,7 @@ export class UrlbarInput {
+@@ -3719,6 +3791,7 @@ export class UrlbarInput {
        this.setResultForCurrentValue(null);
        this.handleCommand();
        this.controller.clearLastQueryContextCache();
@@ -176,7 +190,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
  
        this._suppressStartQuery = false;
      });
-@@ -3726,7 +3792,6 @@ export class UrlbarInput {
+@@ -3726,7 +3799,6 @@ export class UrlbarInput {
      contextMenu.addEventListener("popupshowing", () => {
        // Close the results pane when the input field contextual menu is open,
        // because paste and go doesn't want a result selection.
@@ -184,7 +198,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
  
        let controller =
          this.document.commandDispatcher.getControllerForCommand("cmd_paste");
-@@ -3836,7 +3901,11 @@ export class UrlbarInput {
+@@ -3836,7 +3908,11 @@ export class UrlbarInput {
      if (!engineName && !source && !this.hasAttribute("searchmode")) {
        return;
      }
@@ -197,7 +211,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      this._searchModeIndicatorTitle.textContent = "";
      this._searchModeIndicatorTitle.removeAttribute("data-l10n-id");
  
-@@ -4130,6 +4199,7 @@ export class UrlbarInput {
+@@ -4130,6 +4206,7 @@ export class UrlbarInput {
  
      this.document.l10n.setAttributes(
        this.inputField,
@@ -205,7 +219,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
        l10nId,
        l10nId == "urlbar-placeholder-with-name" ? { name } : undefined
      );
-@@ -4241,6 +4311,11 @@ export class UrlbarInput {
+@@ -4241,6 +4318,11 @@ export class UrlbarInput {
    }
  
    _on_click(event) {
@@ -217,7 +231,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
      if (
        event.target == this.inputField ||
        event.target == this._inputContainer
-@@ -4311,7 +4386,7 @@ export class UrlbarInput {
+@@ -4311,7 +4393,7 @@ export class UrlbarInput {
        }
      }
  
@@ -226,7 +240,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
        this.view.autoOpen({ event });
      } else {
        if (this._untrimOnFocusAfterKeydown) {
-@@ -4351,9 +4426,16 @@ export class UrlbarInput {
+@@ -4351,9 +4433,16 @@ export class UrlbarInput {
    }
  
    _on_mousedown(event) {
@@ -235,16 +249,16 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
        case this.textbox: {
          this._mousedownOnUrlbarDescendant = true;
 +        const isProbablyFloating =
-+          (lazy.ZEN_URLBAR_BEHAVIOR == "floating-on-type" &&
++          (this.zenUrlbarBehavior == "floating-on-type" &&
 +          this.hasAttribute("breakout-extend") && !this.focusedViaMousedown) ||
-+          (lazy.ZEN_URLBAR_BEHAVIOR == "float") || this.window.gZenVerticalTabsManager._hasSetSingleToolbar;
++          (this.zenUrlbarBehavior == "float") || this.window.gZenVerticalTabsManager._hasSetSingleToolbar;
 +        if (event.type != "click" && isProbablyFloating || event.type == "click" && !isProbablyFloating) {
 +          return true;
 +        }
  
          if (
            event.target != this.inputField &&
-@@ -4364,6 +4446,10 @@ export class UrlbarInput {
+@@ -4364,6 +4453,10 @@ export class UrlbarInput {
  
          this.focusedViaMousedown = !this.focused;
          this._preventClickSelectsAll = this.focused;
@@ -255,7 +269,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
  
          // Keep the focus status, since the attribute may be changed
          // upon calling this.focus().
-@@ -4399,7 +4485,7 @@ export class UrlbarInput {
+@@ -4399,7 +4492,7 @@ export class UrlbarInput {
          }
          // Don't close the view when clicking on a tab; we may want to keep the
          // view open on tab switch, and the TabSelect event arrived earlier.
@@ -264,7 +278,7 @@ index 1c447bd31de854d1522dbcfb5d7ad557c84f1388..1dc520f63b240cccda7be074346d2079
            break;
          }
  
-@@ -4716,7 +4802,7 @@ export class UrlbarInput {
+@@ -4716,7 +4809,7 @@ export class UrlbarInput {
      // When we are in actions search mode we can show more results so
      // increase the limit.
      let maxResults =

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

@@ -156,38 +156,6 @@ groupbox h2 {
   margin-bottom: 15px;
 }
 
-#zen-compact-mode-styles-form {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--space-large);
-  margin-top: 5px;
-
-  & .web-appearance-choice-image-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    padding: 20px 0;
-
-    background: color-mix(in srgb, var(--zen-colors-tertiary) 50%, transparent 50%);
-  }
-}
-
-@media -moz-pref('zen.view.use-single-toolbar') {
-  #zen-compact-mode-styles-form {
-    display: none;
-  }
-}
-
-#zen-expand-tabbar-strat {
-  display: flex;
-  flex-direction: column;
-}
-
-#zen-expand-tabbar-strat > hbox {
-  margin-top: 10px;
-}
-
 #category-zen-looks > .category-icon {
   list-style-image: url('chrome://browser/skin/customize.svg');
 }

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

@@ -54,7 +54,8 @@
 }
 
 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
-#sidebar-button:-moz-locale-dir(rtl)[positionend] {
+#sidebar-button:-moz-locale-dir(rtl)[positionend],
+#zen-toggle-compact-mode {
   list-style-image: url('chrome://browser/skin/sidebars.svg') !important;
 }
 
@@ -74,7 +75,8 @@
 }
 
 #appMenu-zoom-controls,
-#PanelUI-zen-gradient-generator-color-add {
+#PanelUI-zen-gradient-generator-color-add,
+#zen-site-data-new-addon-button {
   list-style-image: url('plus.svg') !important;
 }
 
@@ -213,7 +215,8 @@
 .search-setting-button > .button-box > .button-icon,
 #appMenu-settings-button,
 #PanelUI-zen-profiles-managePrfs,
-.unified-extensions-item-open-menu.subviewbutton {
+.unified-extensions-item-open-menu.subviewbutton,
+.zen-site-data-permission-icon {
   list-style-image: url('settings.svg') !important;
 }
 
@@ -263,6 +266,7 @@
 }
 
 #bookmarks-menu-button,
+#zen-site-data-header-bookmark,
 #appMenu-bookmarks-button,
 #sidebar-switcher-bookmarks,
 #appMenu-library-bookmarks-button,
@@ -407,7 +411,8 @@
   list-style-image: url('customize.svg') !important;
 }
 
-#zen-copy-current-url-button {
+#zen-copy-current-url-button,
+#zen-site-data-header-share {
   list-style-image: url('share.svg');
 }
 
@@ -466,8 +471,20 @@
 }
 
 /* permissions */
-#permissions-granted-icon {
+#identity-permission-box,
-  list-style-image: url('permissions.svg') !important;
+#identity-box:not([pageproxystate='invalid']) #identity-icon-box,
+#identity-box[pageproxystate='invalid'] #zen-site-data-icon-button {
+  display: none !important;
+}
+
+#zen-site-data-icon-button {
+  padding: 0 6px;
+
+  & image {
+    list-style-image: url('permissions.svg');
+    -moz-context-properties: fill, fill-opacity;
+    pointer-events: none;
+  }
 }
 
 .geo-icon {
@@ -495,7 +512,8 @@
   list-style-image: url('desktop-notification-blocked.svg') !important;
 }
 
-.camera-icon {
+.camera-icon,
+#zen-site-data-header-screenshot {
   list-style-image: url('camera.svg') !important;
 }
 
@@ -558,7 +576,8 @@
   list-style-image: url('midi.svg') !important;
 }
 
-.install-icon {
+.install-icon,
+.zen-permission-extension-icon {
   list-style-image: url('extension.svg') !important;
 }
 
@@ -598,7 +617,8 @@
   background-image: url('stop-to-reload.svg') !important;
 }
 
-#reader-mode-button > .urlbar-icon {
+#reader-mode-button > .urlbar-icon,
+#zen-site-data-header-reader-mode {
   list-style-image: url('reader-mode.svg') !important;
 }
 
@@ -811,3 +831,57 @@
   -moz-context-properties: fill;
   fill: currentColor;
 }
+
+#zen-site-data-security-info {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  appearance: none;
+  border-radius: 4px;
+  padding: 5px;
+
+  &[identity='secure'] {
+    list-style-image: url('security.svg');
+  }
+
+  &[identity='not-secure'] {
+    list-style-image: url('security-broken.svg');
+  }
+
+  &[identity='extension'] {
+    list-style-image: url('extension.svg');
+  }
+
+  &:not([identity='secure']) * {
+    color: light-dark(var(--color-red-70), var(--color-red-30));
+  }
+
+  & .toolbarbutton-text {
+    padding-inline-start: 4px !important;
+  }
+
+  & .toolbarbutton-icon {
+    width: 16px;
+  }
+
+  & > * {
+    opacity: 0.8;
+  }
+}
+
+#zen-site-data-actions {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  appearance: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 99px;
+  margin-left: auto !important;
+  list-style-image: url('menu.svg');
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+
+  & label {
+    display: none;
+  }
+}

src/browser/themes/shared/zen-icons/lin/security-broken.svg

@@ -2,4 +2,4 @@
 # 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/.
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10" data-color="color-2"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="context-fill" data-stroke="none" stroke="none"></path></g></svg>

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -67,6 +67,10 @@ export var ZenCustomizableUI = new (class {
         addon-webext-overflowtarget="overflowed-extensions-list"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
+          <toolbarbutton id="zen-toggle-compact-mode"
+            class="toolbarbutton-1"
+            command="cmd_toggleCompactModeIgnoreHover"
+            data-l10n-id="zen-toggle-compact-mode-button" />
           <html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
         </hbox>
       </toolbar>
@@ -106,12 +110,20 @@ export var ZenCustomizableUI = new (class {
 
   _initCreateNewButton(window) {
     const button = window.document.getElementById('zen-create-new-button');
-    button.addEventListener('command', () => {
+    button.addEventListener('command', (event) => {
       if (button.hasAttribute('open')) {
         return;
       }
       const popup = window.document.getElementById('zenCreateNewPopup');
-      popup.openPopup(button, 'before_start');
+      popup.openPopup(
+        button,
+        'before_start',
+        0,
+        0,
+        true /* isContextMenu */,
+        false /* attributesOverride */,
+        event
+      );
     });
   }
 

src/zen/common/ZenUIManager.mjs

@@ -1,6 +1,11 @@
 // 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/.
+
+ChromeUtils.defineESModuleGetters(this, {
+  nsZenSiteDataPanel: 'resource:///modules/ZenSiteDataPanel.sys.mjs',
+});
+
 var gZenUIManager = {
   _popupTrackingElements: [],
   _hoverPausedForExpand: false,
@@ -14,19 +19,6 @@ var gZenUIManager = {
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'contentElementSeparation',
-      'zen.theme.content-element-separation',
-      0
-    );
-    XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'urlbarShowDomainOnly',
-      'zen.urlbar.show-domain-only-in-sidebar',
-      true
-    );
 
     document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);
 
@@ -44,6 +36,8 @@ var gZenUIManager = {
       return document.getElementById('zen-toast-container');
     });
 
+    window.gZenSiteDataPanel = new nsZenSiteDataPanel(window);
+
     gURLBar._zenTrimURL = this.urlbarTrim.bind(this);
 
     new ResizeObserver(
@@ -596,6 +590,26 @@ var gZenUIManager = {
   },
 };
 
+XPCOMUtils.defineLazyPreferenceGetter(
+  gZenUIManager,
+  'contentElementSeparation',
+  'zen.theme.content-element-separation',
+  0
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  gZenUIManager,
+  'urlbarWaitToClear',
+  'zen.urlbar.wait-to-clear',
+  0
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  gZenUIManager,
+  'urlbarShowDomainOnly',
+  'zen.urlbar.show-domain-only-in-sidebar',
+  true
+);
+
 var gZenVerticalTabsManager = {
   init() {
     this._multiWindowFeature = new nsZenMultiWindowFeature();
@@ -1034,6 +1048,11 @@ var gZenVerticalTabsManager = {
       ) {
         topButtons.prepend(windowButtons);
       }
+
+      if (!isSingleToolbar && isCompactMode) {
+        navBar.prepend(topButtons);
+      }
+
       // Case: single toolbar, compact mode, right side and windows styled buttons
       if (isSingleToolbar && isCompactMode && isRightSide && this.isWindowsStyledButtons) {
         topButtons.prepend(windowButtons);
@@ -1072,7 +1091,6 @@ var gZenVerticalTabsManager = {
         appContentNavbarContaienr.append(windowButtons);
       }
 
-      gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
       this.recalculateURLBarHeight();
 
       // Always move the splitter next to the sidebar

src/zen/common/ZenUIMigration.sys.mjs

@@ -6,7 +6,7 @@ const { AppConstants } = ChromeUtils.importESModule('resource://gre/modules/AppC
 
 class nsZenUIMigration {
   PREF_NAME = 'zen.ui.migration.version';
-  MIGRATION_VERSION = 3;
+  MIGRATION_VERSION = 4;
 
   init(isNewProfile) {
     if (!isNewProfile) {
@@ -77,6 +77,14 @@ class nsZenUIMigration {
       Services.prefs.setStringPref('zen.theme.accent-color', '#ffb787');
     }
   }
+
+  _migrateV4() {
+    // Fix spelling mistake in preference name
+    Services.prefs.setBoolPref(
+      'zen.theme.use-system-colors',
+      Services.prefs.getBoolPref('zen.theme.use-sysyem-colors', false)
+    );
+  }
 }
 
 export var gZenUIMigration = new nsZenUIMigration();

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

@@ -8,17 +8,23 @@
   #tabbrowser-tabpanels[dragging-split='true'] {
     width: -moz-available;
     position: relative;
-    overflow: clip;
 
     &.browserSidebarContainer {
-      :root:not([zen-no-padding='true']) & {
+      :root:not([zen-no-padding='true']) &:not(.zen-glance-overlay) {
         border-radius: var(--zen-native-inner-radius);
         box-shadow: var(--zen-big-shadow);
+        overflow: clip;
       }
 
       & browser[type='content'] {
+        &:not([transparent='true']) {
+          background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32));
+        }
+
+        &[transparent='true'] {
           background: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
         }
+      }
 
       @media not -moz-pref('layout.css.prefers-color-scheme.content-override', 2) {
         & browser[type='content'] {

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

@@ -29,6 +29,8 @@
 
   &[breakout-extend='true'] {
     --urlbar-container-padding: 0px;
+    /* See issue https://github.com/zen-browser/desktop/issues/5229 */
+    visibility: visible;
   }
 
   :root[zen-single-toolbar='true'] &[breakout-extend='true'],
@@ -120,6 +122,21 @@
       border-radius: 10px !important;
     }
   }
+
+  .identity-box-button {
+    opacity: 0;
+    transition:
+      opacity 0.2s,
+      visibility 0.2s;
+    visibility: collapse;
+
+    #navigator-toolbox:hover &,
+    &[open],
+    #identity-box[pageproxystate='invalid'] & {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
 }
 
 .urlbar-page-action,
@@ -220,24 +237,14 @@
 }
 
 :root[zen-single-toolbar='true'] {
-  --urlbar-icon-border-radius: 10px !important;
+  --urlbar-icon-border-radius: 8px !important;
 
-  .urlbar-page-action:not([open]):not(#identity-permission-box),
+  .urlbar-page-action:not([open]):not([showing]):not(#identity-permission-box),
   #tracking-protection-icon-container {
     display: none;
   }
 
-  #identity-box:not([pageproxystate='invalid']):not(.notSecure) #identity-icon-box:not([open]) {
+  #identity-permission-box > *:not(#zen-site-data-icon-button) {
-    margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
-    transform: translateX(100%);
-    opacity: 0;
-
-    :root:not([supress-primary-adjustment]) & {
-      transition: all 0.1s ease;
-    }
-  }
-
-  #identity-permission-box > *:not(#permissions-granted-icon) {
     visibility: collapse;
   }
 
@@ -245,25 +252,7 @@
     display: none;
   }
 
-  #urlbar[open]
+  #urlbar:not([breakout-extend='true']) {
-    :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button):not(
-      [hidden]
-    ):not(#identity-permission-box),
-  #urlbar:hover #identity-icon-box {
-    opacity: 1 !important;
-    margin-inline-start: 0 !important;
-    transform: none !important;
-    display: flex;
-    #urlbar:not(:hover) & {
-      transition: none;
-    }
-  }
-
-  #urlbar:not([open]) #userContext-icons {
-    margin-inline: 0;
-  }
-
-  #urlbar:not([open]) {
     #identity-box:not([pageproxystate='invalid']) {
       order: 2;
     }
@@ -335,10 +324,6 @@
 }
 
 @container urlbar-container (width < 350px) {
-  #userContext-icons {
-    transition: all 0.1s ease;
-  }
-
   #userContext-label {
     display: none;
   }
@@ -346,12 +331,6 @@
   #userContext-indicator {
     margin-inline-end: 4px;
   }
-
-  #urlbar:hover:not([breakout-extend='true']) #userContext-icons {
-    margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
-    opacity: 0;
-    pointer-events: none;
-  }
 }
 
 #notification-popup-box {
@@ -683,3 +662,18 @@
   font-weight: 600;
   padding: 0px;
 }
+
+/* These are buttons that we dont need to be
+ * displayed anymore, since now zen displays
+ * them into a single, unified button */
+#reader-mode-button,
+#urlbar-go-button,
+#star-button-box {
+  display: none !important;
+}
+
+@media not -moz-pref('zen.urlbar.show-contextual-id') {
+  #userContext-icons {
+    display: none !important;
+  }
+}

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

@@ -31,7 +31,6 @@
   --uc-autocomplete-panel-separator-margin-vertical: 4px;
 
   --uc-permission-itemcontainer-padding-block: 8px;
-  --uc-permission-item-margin-block: 4px;
   --uc-permission-item-padding-inline: 16px;
   --zen-panel-separator-width: 1px;
 }
@@ -228,12 +227,8 @@ panel {
 
 .permission-popup-permission-item,
 #permission-popup-storage-access-permission-list-header {
-  margin-block: var(--uc-permission-item-margin-block);
+  padding-block: 4px;
-}
+  margin-block: 0px;
-
-.permission-popup-permission-label,
-.permission-popup-permission-header-label {
-  margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
 }
 
 #editBookmarkPanel > #editBookmarkHeaderSeparator,
@@ -241,12 +236,6 @@ panel {
   margin-inline: 0;
 }
 
-#identity-popup-mainView > toolbarseparator:first-child,
-#unified-extensions-view > toolbarseparator:first-child {
-  display: none;
-  opacity: 0;
-}
-
 menupopup,
 panel {
   box-shadow: none;

src/zen/common/styles/zen-single-components.css

@@ -177,15 +177,31 @@ body > #confetti {
   #zen-sidebar-foot-buttons & {
     --tab-border-radius: 6px;
     --toolbarbutton-border-radius: var(--tab-border-radius);
-    --toolbarbutton-inner-padding: 5px;
+    --toolbarbutton-inner-padding: 6px;
     --toolbarbutton-outer-padding: 2px;
   }
 
   transition:
     background-color 0.1s,
-    scale 0.2s;
+    transform 0.2s;
-  &:active {
+
-    transform: scale(0.98);
+  &:active:hover {
+    transform: scale(0.95);
+  }
+}
+
+.zen-interactive-button {
+  background: color-mix(in srgb, currentColor 6%, transparent) !important;
+  transition:
+    background-color 0.12s ease-in-out,
+    transform 0.12s ease-in-out;
+
+  &:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
+  }
+
+  &:active:hover {
+    transform: scale(0.95);
   }
 }
 
@@ -261,3 +277,264 @@ body > #confetti {
 #customization-container {
   --toolbar-bgcolor: var(--zen-dialog-background);
 }
+
+/* Site Data popup */
+
+#zen-unified-site-data-panel {
+  --panel-padding: 0px;
+  --panel-width: 228px;
+  --menu-panel-width-wide: calc(var(--panel-width) - var(--panel-padding) * 2);
+  --uei-icon-size: 14px;
+  --arrowpanel-menuitem-border-radius: 10px;
+}
+
+#unified-extensions-messages-container {
+  display: none;
+}
+
+#zen-site-data-addons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  overflow: visible;
+
+  .unified-extensions-item-name,
+  .unified-extensions-item-message,
+  .unified-extensions-item-message-hover,
+  .unified-extensions-item-message-hover-menu-button,
+  .unified-extensions-item-menu-button {
+    display: none;
+  }
+
+  #overflowed-extensions-list,
+  #unified-extensions-area,
+  .unified-extensions-list,
+  #zen-site-data-new-addon-button-container {
+    display: contents;
+
+    &:empty {
+      display: none;
+    }
+
+    & > * {
+      background-color: color-mix(in srgb, currentcolor 6%, transparent);
+      width: 46px;
+      height: 34px;
+      margin: 0;
+      justify-content: center;
+      align-items: center;
+      border-radius: 6px;
+      transition:
+        background-color 0.1s ease-in-out,
+        transform 0.12s ease-in-out;
+
+      & toolbarbutton {
+        background: transparent !important;
+      }
+
+      & .toolbarbutton-badge-stack {
+        margin: 0;
+      }
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      &:active:hover {
+        transform: scale(0.95);
+        background-color: color-mix(in srgb, currentcolor 10%, transparent);
+      }
+    }
+  }
+}
+
+.zen-site-data-section {
+  gap: 6px;
+  padding: 8px;
+}
+
+.zen-site-data-section-header {
+  font-weight: 500;
+  font-size: small;
+
+  & label {
+    margin: 0;
+  }
+
+  & > label:nth-child(2) {
+    font-weight: 400;
+    font-size: smaller;
+    transition: opacity 0.15s ease-in-out;
+    opacity: 0;
+    padding: 0px 4px;
+
+    .zen-site-data-section:hover & {
+      opacity: 0.8;
+    }
+  }
+}
+
+#zen-site-data-new-addon-button .toolbarbutton-text {
+  display: none;
+}
+
+.permission-popup-permission-item {
+  gap: 8px;
+  overflow: hidden;
+  align-items: center;
+}
+
+.permission-popup-permission-label {
+  margin: 0px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.permission-popup-permission-icon {
+  fill: var(--button-primary-color);
+  padding: 8px;
+  width: 34px;
+  height: 34px;
+  overflow: visible;
+  position: relative;
+  appearance: none;
+
+  & label {
+    display: none;
+  }
+
+  & image {
+    -moz-context-properties: fill;
+    z-index: 1;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: 99px;
+    width: 32px;
+    height: 32px;
+    background: var(--button-primary-bgcolor);
+    opacity: 0.6;
+    transition:
+      transform 0.12s ease-in-out,
+      opacity 0.12s ease-in-out;
+  }
+
+  .permission-popup-permission-item:hover &::before {
+    transform: scale(1.05);
+  }
+
+  .permission-popup-permission-item:active:hover &::before {
+    transform: scale(0.95);
+  }
+
+  .permission-popup-permission-item[state='allow'] &::before {
+    opacity: 1;
+  }
+}
+
+.zen-permission-popup-permission-state-label {
+  opacity: 0.8;
+  font-size: smaller;
+  font-weight: 400;
+  margin: 0;
+}
+
+#identity-box {
+  opacity: 0.6;
+}
+
+#zen-site-data-footer {
+  border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
+  padding-top: 8px;
+  margin: 2px 8px 8px 8px;
+
+  & toolbarbutton {
+    margin: 0;
+  }
+}
+
+#unified-extensions-button:not([showing]) {
+  display: none !important;
+}
+
+#zen-site-data-header {
+  gap: 6px;
+  align-items: center;
+  padding: 8px;
+  padding-bottom: 0;
+
+  & toolbarbutton {
+    margin: 0;
+    appearance: none;
+    -moz-context-properties: fill;
+    fill: currentColor;
+    color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
+    padding: 8px 0px;
+    position: relative;
+
+    &[disabled] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    & .toolbarbutton-text {
+      display: none;
+    }
+
+    & image {
+      width: 18px;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      background: linear-gradient(
+        to bottom,
+        color-mix(
+          in srgb,
+          light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.3)) 15%,
+          transparent 100%
+        ),
+        color-mix(
+          in srgb,
+          light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8)) 100%,
+          transparent 100%
+        )
+      );
+      transition: transform 0.12s ease-in-out;
+      box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
+      border-radius: 6px;
+      --base-border-color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1));
+      border: 1px solid;
+      border-top-color: light-dark(var(--base-border-color), rgba(255, 255, 255, 0.12));
+      border-left-color: light-dark(var(--base-border-color), transparent);
+      border-right-color: light-dark(var(--base-border-color), transparent);
+      border-bottom-color: light-dark(var(--base-border-color), rgba(0, 0, 0, 0.12));
+      will-change: transform;
+    }
+
+    &.active {
+      color: var(--button-primary-color);
+
+      &::before {
+        background: var(--button-primary-bgcolor);
+      }
+    }
+
+    &:hover::before {
+      transform: scale(1.03);
+    }
+
+    &:active:hover::before {
+      transform: scale(0.97);
+    }
+  }
+}

src/zen/common/zen-sets.js

@@ -17,17 +17,8 @@ document.addEventListener(
           case 'cmd_zenCompactModeShowSidebar':
             gZenCompactModeManager.toggleSidebar();
             break;
-          case 'cmd_zenCompactModeHideSidebar':
+          case 'cmd_toggleCompactModeIgnoreHover':
-            gZenCompactModeManager.hideSidebar();
+            gZenCompactModeManager.toggle(true);
-            break;
-          case 'cmd_zenCompactModeHideToolbar':
-            gZenCompactModeManager.hideToolbar();
-            break;
-          case 'cmd_zenCompactModeHideBoth':
-            gZenCompactModeManager.hideBoth();
-            break;
-          case 'cmd_zenCompactModeShowToolbar':
-            gZenCompactModeManager.toggleToolbar();
             break;
           case 'cmd_zenWorkspaceForward':
             gZenWorkspaces.changeWorkspaceShortcut();

src/zen/compact-mode/ZenCompactMode.mjs

@@ -115,6 +115,7 @@ var gZenCompactModeManager = {
         // We wont do anything with it anyway, so we remove it
         delete this._wasInCompactMode;
       }
+      delete this._ignoreNextHover;
       // We dont want the user to be able to spam the button
       return;
     }
@@ -173,47 +174,12 @@ var gZenCompactModeManager = {
 
   addContextMenu() {
     const fragment = window.MozXULElement.parseXULToFragment(`
-      <menu id="zen-context-menu-compact-mode" data-l10n-id="zen-toolbar-context-compact-mode">
-        <menupopup>
       <menuitem id="zen-context-menu-compact-mode-toggle" data-l10n-id="zen-toolbar-context-compact-mode-enable" type="checkbox" command="cmd_zenCompactModeToggle"/>
-          <menuseparator/>
-          <menuitem id="zen-context-menu-compact-mode-hide-sidebar" data-l10n-id="zen-toolbar-context-compact-mode-just-tabs" type="radio" command="cmd_zenCompactModeHideSidebar"/>
-          <menuitem id="zen-context-menu-compact-mode-hide-toolbar" data-l10n-id="zen-toolbar-context-compact-mode-just-toolbar" type="radio" command="cmd_zenCompactModeHideToolbar"/>
-          <menuitem id="zen-context-menu-compact-mode-hide-both" data-l10n-id="zen-toolbar-context-compact-mode-hide-both" type="radio" command="cmd_zenCompactModeHideBoth"/>
-        </menupopup>
-      </menu>
     `);
     document.getElementById('viewToolbarsMenuSeparator').before(fragment);
     this.updateContextMenu();
   },
 
-  updateCompactModeContext(isSingleToolbar) {
-    const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
-    const menu = document.getElementById('zen-context-menu-compact-mode');
-    if (isSingleToolbar) {
-      menu.setAttribute('hidden', 'true');
-      menu.before(menuitem);
-    } else {
-      menu.removeAttribute('hidden');
-      menu.querySelector('menupopup').prepend(menuitem);
-    }
-  },
-
-  hideSidebar() {
-    Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
-    Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
-  },
-
-  hideToolbar() {
-    Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
-    Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
-  },
-
-  hideBoth() {
-    Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
-    Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
-  },
-
   addEventListener(callback) {
     this._evenListeners.push(callback);
   },
@@ -281,13 +247,6 @@ var gZenCompactModeManager = {
     return sidebarWidth;
   },
 
-  get canHideSidebar() {
-    return (
-      Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
-      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');
@@ -297,7 +256,6 @@ var gZenCompactModeManager = {
         .getElementById('zen-sidebar-splitter')
         .getBoundingClientRect().width;
       const isCompactMode = this.preference;
-      const canHideSidebar = this.canHideSidebar;
       let canAnimate =
         lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && !this.isSidebarPotentiallyOpen();
       if (typeof this._wasInCompactMode !== 'undefined') {
@@ -308,6 +266,9 @@ var gZenCompactModeManager = {
       if (canAnimate) {
         this.sidebar.setAttribute('animate', 'true');
       }
+      if (this._ignoreNextHover) {
+        this.sidebar.removeAttribute('zen-has-hover');
+      }
       this.sidebar.style.removeProperty('margin-right');
       this.sidebar.style.removeProperty('margin-left');
       this.sidebar.style.removeProperty('transform');
@@ -325,7 +286,7 @@ var gZenCompactModeManager = {
           resolve();
           return;
         }
-        if (canHideSidebar && isCompactMode) {
+        if (isCompactMode) {
           if (document.documentElement.hasAttribute('zen-sidebar-expanded')) {
             sidebarWidth -= 0.5 * splitterWidth;
             if (elementSeparation < splitterWidth) {
@@ -335,20 +296,19 @@ var gZenCompactModeManager = {
           } else {
             sidebarWidth -= elementSeparation;
           }
-          this.sidebar.style.marginRight = '0px';
+          this.sidebar.removeAttribute('zen-has-hover');
-          this.sidebar.style.marginLeft = '0px';
           gZenUIManager.motion
             .animate(
               this.sidebar,
               {
-                marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
+                marginRight: [0, this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0],
-                marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
+                marginLeft: [0, this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`],
               },
               {
                 ease: 'easeIn',
                 type: 'spring',
                 bounce: 0,
-                duration: 0.15,
+                duration: 0.12,
               }
             )
             .then(() => {
@@ -365,6 +325,12 @@ var gZenCompactModeManager = {
                 this._ignoreNextResize = true;
 
                 setTimeout(() => {
+                  if (this._ignoreNextHover) {
+                    setTimeout(() => {
+                      delete this._ignoreNextHover;
+                    });
+                  }
+
                   this.sidebar.style.removeProperty('margin-right');
                   this.sidebar.style.removeProperty('margin-left');
                   this.sidebar.style.removeProperty('transition');
@@ -375,11 +341,12 @@ var gZenCompactModeManager = {
                   titlebar.style.removeProperty('transition');
 
                   gURLBar.textbox.style.removeProperty('visibility');
+
                   resolve();
                 });
               });
             });
-        } else if (canHideSidebar && !isCompactMode) {
+        } else {
           document.getElementById('browser').style.overflow = 'clip';
           if (this.sidebarIsOnRight) {
             this.sidebar.style.marginRight = `-${sidebarWidth}px`;
@@ -399,7 +366,7 @@ var gZenCompactModeManager = {
                 ease: 'easeOut',
                 type: 'spring',
                 bounce: 0,
-                duration: 0.15,
+                duration: 0.12,
               }
             )
             .then(() => {
@@ -415,9 +382,6 @@ var gZenCompactModeManager = {
                 resolve();
               });
             });
-        } else {
-          this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
-          document.documentElement.removeAttribute('zen-compact-animating');
         }
       });
     });
@@ -427,15 +391,6 @@ var gZenCompactModeManager = {
     document
       .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 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);
   },
 
   _removeOpenStateOnUnifiedExtensions() {
@@ -448,7 +403,9 @@ var gZenCompactModeManager = {
     }
   },
 
-  toggle() {
+  toggle(ignoreHover = false) {
+    // Only ignore the next hover when we are enabling compact mode
+    this._ignoreNextHover = ignoreHover && !this.preference;
     return (this.preference = !this.preference);
   },
 
@@ -551,7 +508,8 @@ var gZenCompactModeManager = {
           window.requestAnimationFrame(() => {
             if (
               document.documentElement.getAttribute('supress-primary-adjustment') === 'true' ||
-              this._hasHoveredUrlbar
+              this._hasHoveredUrlbar ||
+              this._ignoreNextHover
             ) {
               return;
             }
@@ -596,7 +554,8 @@ var gZenCompactModeManager = {
             event.explicitOriginalTarget.closest('#urlbar[zen-floating-urlbar]') ||
             (document.documentElement.getAttribute('supress-primary-adjustment') === 'true' &&
               gZenVerticalTabsManager._hasSetSingleToolbar) ||
-            this._hasHoveredUrlbar
+            this._hasHoveredUrlbar ||
+            this._ignoreNextHover
           ) {
             return;
           }
@@ -682,11 +641,6 @@ var gZenCompactModeManager = {
     else return bBox.left - error < x && x < bBox.right + error;
   },
 
-  toggleToolbar() {
-    let toolbar = document.getElementById('zen-appcontent-navbar-wrapper');
-    toolbar.toggleAttribute('zen-user-show');
-  },
-
   _clearAllHoverStates() {
     // Clear hover attributes from all hoverable elements
     for (let entry of this.hoverableElements) {
@@ -699,6 +653,9 @@ var gZenCompactModeManager = {
   },
 
   isSidebarPotentiallyOpen() {
+    if (this._ignoreNextHover) {
+      this.sidebar.removeAttribute('zen-has-hover');
+    }
     return (
       this.sidebar.hasAttribute('zen-user-show') ||
       this.sidebar.hasAttribute('zen-has-hover') ||
@@ -713,8 +670,7 @@ var gZenCompactModeManager = {
       !this.isSidebarPotentiallyOpen() &&
       this._canShowBackgroundTabToast &&
       !gZenGlanceManager._animating &&
-      !this._nextTimeWillBeActive &&
+      !this._nextTimeWillBeActive
-      this.canHideSidebar
     ) {
       gZenUIManager.showToast('zen-background-tab-opened-toast', {
         button: {

src/zen/compact-mode/zen-compact-mode.css

@@ -20,7 +20,7 @@
 
   &::before,
   &::after {
-    outline: 1px solid rgba(255, 255, 255, .15);
+    outline: 1px solid rgba(255, 255, 255, 0.15);
     outline-offset: -1px;
     background-attachment: fixed !important;
     background-size: 100vw 100vh !important;
@@ -29,7 +29,9 @@
   &,
   &::before,
   &::after {
-    border-radius: calc(var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px));
+    border-radius: calc(
+      var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px)
+    );
   }
 }
 
@@ -40,7 +42,6 @@
     visibility: visible;
   }
 
-  @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
   &:not([zen-compact-animating]) {
     & #zen-sidebar-splitter {
       display: none !important;
@@ -63,7 +64,9 @@
     }
 
     #zen-sidebar-top-buttons-customization-target {
-        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
+      padding-inline-start: calc(
+        var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)
+      ) !important;
     }
 
     &:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
@@ -93,9 +96,9 @@
           left 0.15s ease,
           right 0.15s ease,
           visibility 0.15s ease;
-          top: 0;
         bottom: var(--zen-compact-float);
         padding: 0 var(--zen-compact-float) !important;
+
         :root[zen-single-toolbar='true'] & {
           /* We add an extra offset since windows users have a border top
             * in the window in order to compensate how windows renders the
@@ -103,13 +106,12 @@
           top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
           height: calc(100% - var(--zen-compact-float));
         }
+
         :root:not([zen-single-toolbar='true']) & {
-            top: calc(var(--zen-compact-float) / -2);
+          bottom: calc(var(--zen-compact-float) / 2);
           height: calc(100% - var(--zen-toolbar-height));
-            @media -moz-pref('zen.view.compact.hide-toolbar') {
-              height: 100%;
-            }
         }
+
         & #zen-sidebar-top-buttons {
           margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
         }
@@ -124,17 +126,6 @@
       left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
     }
 
-      /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
-       * we need to adjust the top-padding of the toolbox to account for the
-       * extra toolbar height. */
-      @media not -moz-pref('zen.view.compact.hide-toolbar') {
-        &:not([zen-single-toolbar='true']) {
-          #navigator-toolbox:not([animate='true']) {
-            margin-top: var(--zen-toolbar-height) !important;
-          }
-        }
-      }
-
     &:not([zen-sidebar-expanded='true']) .zen-essentials-container {
       padding: 0;
     }
@@ -303,103 +294,20 @@
       }
     }
   }
-  }
 
-  @media -moz-pref('zen.view.compact.hide-toolbar') {
+  &:not([zen-single-toolbar='true']) #zen-sidebar-top-buttons {
-    &:not([zen-single-toolbar='true']) {
+    max-width: fit-content;
-      & #navigator-toolbox {
+    :root[zen-right-side='true'] & {
-        top: 0;
+      order: 999;
-      }
-
-      & #navigator-toolbox {
-        --zen-toolbox-top-align: var(--zen-element-separation);
-      }
-
-      & #titlebar,
-      & #zen-appcontent-wrapper {
-        margin-top: var(--zen-element-separation) !important;
-      }
-
-      & #zen-appcontent-wrapper {
-        z-index: 3 !important;
-      }
-
-      & #zen-appcontent-navbar-wrapper {
-        & .zen-toolbar-background {
-          display: flex;
-        }
-        --zen-compact-toolbar-offset: 5px;
-        position: absolute;
-        top: calc(-1 * var(--zen-toolbar-height) + 1px);
-        left: 0;
-        z-index: 20;
-        transition: all 0.15s ease;
-        width: 100%;
-
-        max-height: var(--zen-toolbar-height);
-        overflow: hidden;
-
-        & #urlbar:not([breakout-extend='true']) {
-          opacity: 0 !important;
-        }
-
-        & #zen-appcontent-navbar-container {
-          visibility: hidden;
-
-          box-shadow: var(--zen-big-shadow);
-          border-bottom-left-radius: var(--zen-border-radius);
-          border-bottom-right-radius: var(--zen-border-radius);
-          :root:not([sizemode='maximized']) & {
-            border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
-            border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-          }
-          transition: all 0.15s ease;
-          width: 100%;
-        }
-      }
-
-      & #zen-appcontent-navbar-wrapper[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
-      & #zen-appcontent-navbar-wrapper[zen-user-show],
-      & #zen-appcontent-navbar-wrapper[has-popup-menu],
-      & #zen-appcontent-navbar-wrapper:has(
-          *:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(.zen-compact-mode-ignore)
-        ) {
-        & #zen-appcontent-navbar-container {
-          visibility: visible !important;
-        }
-        border-top-width: 0px;
-
-        top: -1px;
-        overflow: initial;
-        max-height: unset;
-
-        & #urlbar {
-          opacity: 1 !important;
-        }
-
-        & #urlbar[breakout-extend='true']:not([zen-floating-urlbar='true']) {
-          top: 2px !important;
-          opacity: 1;
-        }
-      }
     }
   }
 }
 
 /* Fix for https://github.com/zen-browser/desktop/issues/7615 */
 :root[zen-compact-mode='true']:not([customizing])[inDOMFullscreen='true'] {
-  @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
   &:not([zen-compact-animating]) {
     #navigator-toolbox {
       opacity: 0;
     }
   }
-  }
-  @media -moz-pref('zen.view.compact.hide-toolbar') {
-    &:not([zen-single-toolbar='true']) {
-      & #zen-appcontent-navbar-wrapper {
-        opacity: 0;
-      }
-    }
-  }
 }

src/zen/glance/actors/ZenGlanceChild.sys.mjs

@@ -2,11 +2,10 @@
 // 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/.
 export class ZenGlanceChild extends JSWindowActorChild {
+  #activationMethod;
+
   constructor() {
     super();
-
-    this.mouseUpListener = this.handleMouseUp.bind(this);
-    this.mouseDownListener = this.handleMouseDown.bind(this);
     this.clickListener = this.handleClick.bind(this);
   }
 
@@ -22,51 +21,34 @@ export class ZenGlanceChild extends JSWindowActorChild {
     }
   }
 
-  async getActivationMethod() {
+  async #initActivationMethod() {
-    if (this._activationMethod === undefined) {
+    this.#activationMethod = await this.sendQuery('ZenGlance:GetActivationMethod');
-      this._activationMethod = await this.sendQuery('ZenGlance:GetActivationMethod');
-    }
-    return this._activationMethod;
-  }
-
-  async getHoverActivationDelay() {
-    if (this._hoverActivationDelay === undefined) {
-      this._hoverActivationDelay = await this.sendQuery('ZenGlance:GetHoverActivationDelay');
-    }
-    return this._hoverActivationDelay;
   }
 
   async initiateGlance() {
     this.mouseIsDown = false;
-    const activationMethod = await this.getActivationMethod();
+    await this.#initActivationMethod();
-    if (activationMethod === 'mantain') {
-      this.contentWindow.addEventListener('mousedown', this.mouseDownListener);
-      this.contentWindow.addEventListener('mouseup', this.mouseUpListener);
-
-      this.contentWindow.document.removeEventListener('click', this.clickListener);
-    } else if (
-      activationMethod === 'ctrl' ||
-      activationMethod === 'alt' ||
-      activationMethod === 'shift'
-    ) {
     this.contentWindow.document.addEventListener('click', this.clickListener, { capture: true });
-
-      this.contentWindow.removeEventListener('mousedown', this.mouseDownListener);
-      this.contentWindow.removeEventListener('mouseup', this.mouseUpListener);
-    }
   }
 
   ensureOnlyKeyModifiers(event) {
     return !(event.ctrlKey ^ event.altKey ^ event.shiftKey ^ event.metaKey);
   }
 
-  openGlance(target) {
+  openGlance(target, originalTarget) {
     let url = target.href;
     // Add domain to relative URLs
     if (!url.match(/^(?:[a-z]+:)?\/\//i)) {
       url = this.contentWindow.location.origin + url;
     }
-    const rect = target.getBoundingClientRect();
+    // Get the largest element we can get. If the `A` element
+    // is a parent of the original target, use the anchor element,
+    // otherwise use the original target.
+    let rect = originalTarget.getBoundingClientRect();
+    const anchorRect = target.getBoundingClientRect();
+    if (anchorRect.width * anchorRect.height > rect.width * rect.height) {
+      rect = anchorRect;
+    }
     this.sendAsyncMessage('ZenGlance:OpenGlance', {
       url,
       clientX: rect.left,
@@ -76,35 +58,11 @@ export class ZenGlanceChild extends JSWindowActorChild {
     });
   }
 
-  handleMouseUp(event) {
-    if (this.hasClicked) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.hasClicked = false;
-    }
-    this.mouseIsDown = null;
-  }
-
-  async handleMouseDown(event) {
-    const target = event.target.closest('A');
-    if (!target) {
-      return;
-    }
-    this.mouseIsDown = target;
-    const hoverActivationDelay = await this.getHoverActivationDelay();
-    this.contentWindow.setTimeout(() => {
-      if (this.mouseIsDown === target) {
-        this.hasClicked = true;
-        this.openGlance(target);
-      }
-    }, hoverActivationDelay);
-  }
-
   handleClick(event) {
     if (this.ensureOnlyKeyModifiers(event) || event.button !== 0 || event.defaultPrevented) {
       return;
     }
-    const activationMethod = this._activationMethod;
+    const activationMethod = this.#activationMethod;
     if (activationMethod === 'ctrl' && !event.ctrlKey) {
       return;
     } else if (activationMethod === 'alt' && !event.altKey) {
@@ -113,8 +71,6 @@ export class ZenGlanceChild extends JSWindowActorChild {
       return;
     } else if (activationMethod === 'meta' && !event.metaKey) {
       return;
-    } else if (activationMethod === 'mantain' || typeof activationMethod === 'undefined') {
-      return;
     }
     // get closest A element
     const target = event.target.closest('A');
@@ -122,7 +78,7 @@ export class ZenGlanceChild extends JSWindowActorChild {
       event.preventDefault();
       event.stopPropagation();
 
-      this.openGlance(target);
+      this.openGlance(target, event.originalTarget || event.target);
     }
   }
 

src/zen/glance/actors/ZenGlanceParent.sys.mjs

@@ -11,9 +11,6 @@ export class ZenGlanceParent extends JSWindowActorParent {
       case 'ZenGlance:GetActivationMethod': {
         return Services.prefs.getStringPref('zen.glance.activation-method', 'ctrl');
       }
-      case 'ZenGlance:GetHoverActivationDelay': {
-        return Services.prefs.getIntPref('zen.glance.hold-duration', 500);
-      }
       case 'ZenGlance:OpenGlance': {
         this.openGlance(this.browsingContext.topChromeWindow, message.data);
         break;
@@ -31,7 +28,38 @@ export class ZenGlanceParent extends JSWindowActorParent {
     }
   }
 
-  openGlance(window, data) {
+  #imageBitmapToBase64(imageBitmap) {
+    // 1. Create a canvas with the same size as the ImageBitmap
+    const canvas = this.browsingContext.topChromeWindow.document.createElement('canvas');
+    canvas.width = imageBitmap.width;
+    canvas.height = imageBitmap.height;
+
+    // 2. Draw the ImageBitmap onto the canvas
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(imageBitmap, 0, 0);
+
+    // 3. Convert the canvas content to a Base64 string (PNG by default)
+    const base64String = canvas.toDataURL('image/png');
+    return base64String;
+  }
+
+  async openGlance(window, data) {
+    const win = this.browsingContext.topChromeWindow;
+    const tabPanels = win.gBrowser.tabpanels;
+    // Make the rect relative to the tabpanels. We dont do it directly on the
+    // content process since it does not take into account scroll. This way, we can
+    // be sure that the coordinates are correct.
+    const tabPanelsRect = tabPanels.getBoundingClientRect();
+    const rect = new DOMRect(
+      data.clientX + tabPanelsRect.left,
+      data.clientY + tabPanelsRect.top,
+      data.width,
+      data.height
+    );
+    const elementData = await this.#imageBitmapToBase64(
+      await win.browsingContext.currentWindowGlobal.drawSnapshot(rect, 1, 'transparent', true)
+    );
+    data.elementData = elementData;
     window.gZenGlanceManager.openGlance(data);
   }
 }

src/zen/glance/zen-glance.css

@@ -14,11 +14,11 @@
   gap: 12px;
   max-width: 56px;
 
-  :root[zen-right-side='true'] & {
+  :root:not([zen-right-side='true']) & {
     left: 100%;
   }
 
-  :root:not([zen-right-side='true']) & {
+  :root[zen-right-side='true'] & {
     right: 100%;
   }
 
@@ -99,7 +99,7 @@
 }
 
 .browserSidebarContainer.zen-glance-background,
-.browserSidebarContainer.zen-glance-overlay .browserContainer {
+.browserSidebarContainer.zen-glance-overlay .browserContainer:not([fade-out='true']) {
   border-radius: var(--zen-native-inner-radius);
   box-shadow: var(--zen-big-shadow);
 }
@@ -116,14 +116,19 @@
   }
 
   & .browserContainer {
-    background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32));
+    transform: translate(-50%, -50%);
     position: fixed;
-    opacity: 0;
     top: 0;
     left: 0;
     flex: unset !important;
     /* Promote to its own layer during transitions to reduce jank */
-    will-change: transform, opacity, top, left, width, height;
+    will-change: transform, top, left;
+    width: 85%;
+    height: 100%;
+
+    &:not([has-finished-animation='true']) #statuspanel {
+      display: none;
+    }
 
     &[has-finished-animation='true'] {
       position: relative !important;
@@ -140,10 +145,15 @@
     }
 
     & browser {
+      background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32)) !important;
       width: 100%;
       height: 100%;
       opacity: 1;
-      transition: opacity 0.2s ease-in-out;
+      transition: opacity 0.08s;
+
+      @starting-style {
+        opacity: 0;
+      }
     }
 
     &[animate='true'] {
@@ -153,8 +163,17 @@
 
   &[fade-out='true'] {
     & browser {
-      transition: opacity 0.2s ease;
+      transition: opacity 0.25s ease-in-out;
       opacity: 0;
     }
   }
 }
+
+.zen-glance-element-preview {
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  border-radius: var(--zen-native-inner-radius);
+}

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -302,7 +302,6 @@ class KeyShortcut {
   #disabled = false;
   #reserved = false;
   #internal = false;
-  #shouldBeEmpty = false;
 
   constructor(
     id,
@@ -404,16 +403,11 @@ class KeyShortcut {
   }
 
   set shouldBeEmpty(value) {
-    this.#shouldBeEmpty = value;
     if (value) {
       this.clearKeybind();
     }
   }
 
-  get shouldBeEmpty() {
-    return this.#shouldBeEmpty;
-  }
-
   toXHTMLElement(window) {
     let key = window.document.createXULElement('key');
     return this.replaceWithChild(key);
@@ -691,17 +685,6 @@ class nsZenKeyboardShortcutsLoader {
         'zen-compact-mode-shortcut-show-sidebar'
       )
     );
-    newShortcutList.push(
-      new KeyShortcut(
-        'zen-compact-mode-show-toolbar',
-        'T',
-        '',
-        ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
-        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
-        'cmd_zenCompactModeShowToolbar',
-        'zen-compact-mode-shortcut-show-toolbar'
-      )
-    );
 
     // Workspace shortcuts
     for (let i = 10; i > 0; i--) {
@@ -816,7 +799,7 @@ class nsZenKeyboardShortcutsLoader {
 }
 
 class nsZenKeyboardShortcutsVersioner {
-  static LATEST_KBS_VERSION = 11;
+  static LATEST_KBS_VERSION = 12;
 
   constructor() {}
 
@@ -865,7 +848,7 @@ class nsZenKeyboardShortcutsVersioner {
       return newData;
     }
 
-    console.error('Unknown keyboar shortcuts version');
+    console.error('Unknown keyboard shortcuts version');
     this.version = 0;
     return this.migrateIfNeeded(data);
   }
@@ -884,17 +867,6 @@ class nsZenKeyboardShortcutsVersioner {
     // Apply migrations and ensure defaults exist
     let out = this.fillDefaultIfNotPresent(this.migrateIfNeeded(data));
 
-    // Hard-remove deprecated or conflicting defaults regardless of version
-    // - Remove the built-in "Open File" keybinding; menu item remains available
-    // - Remove default "Bookmark All Tabs" keybinding (Ctrl+Shift+D) to avoid conflict
-    // - Remove "Stop" keybinding to avoid conflict with Firefox's built-in binding
-    const shouldBeEmptyShortcuts = ['openFileKb', 'bookmarkAllTabsKb', 'key_stop'];
-    for (let shortcut of out) {
-      if (shouldBeEmptyShortcuts.includes(shortcut.getID?.())) {
-        shortcut.shouldBeEmpty = true;
-      }
-    }
-
     return out;
   }
 
@@ -1024,7 +996,6 @@ class nsZenKeyboardShortcutsVersioner {
           const commandMap = {
             'zen-compact-mode-toggle': 'cmd_zenCompactModeToggle',
             'zen-compact-mode-show-sidebar': 'cmd_zenCompactModeShowSidebar',
-            'zen-compact-mode-show-toolbar': 'cmd_zenCompactModeShowToolbar',
             'zen-workspace-forward': 'cmd_zenWorkspaceForward',
             'zen-workspace-backward': 'cmd_zenWorkspaceBackward',
             'zen-split-view-grid': 'cmd_zenSplitViewGrid',
@@ -1093,6 +1064,23 @@ class nsZenKeyboardShortcutsVersioner {
         )
       );
     }
+
+    if (version < 12) {
+      // Hard-remove deprecated or conflicting defaults regardless of version
+      // - Remove the built-in "Open File" keybinding; menu item remains available
+      // - Remove default "Bookmark All Tabs" keybinding (Ctrl+Shift+D) to avoid conflict
+      // - Remove "Stop" keybinding to avoid conflict with Firefox's built-in binding
+      const shouldBeEmptyShortcuts = ['openFileKb', 'bookmarkAllTabsKb', 'key_stop'];
+      for (let shortcut of data) {
+        if (shouldBeEmptyShortcuts.includes(shortcut.getID?.())) {
+          shortcut.shouldBeEmpty = true;
+        }
+      }
+
+      // Also remove zen-compact-mode-show-toolbar
+      data = data.filter((shortcut) => shortcut.getID() != 'zen-compact-mode-show-toolbar');
+    }
+
     return data;
   }
 }

src/zen/split-view/ZenViewSplitter.mjs

@@ -958,10 +958,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
    * @returns {Element} The tab browser panel.
    */
   get tabBrowserPanel() {
-    if (!this._tabBrowserPanel) {
+    return gBrowser.tabpanels;
-      this._tabBrowserPanel = document.getElementById('tabbrowser-tabpanels');
-    }
-    return this._tabBrowserPanel;
   }
 
   get splitViewActive() {

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

@@ -60,12 +60,6 @@
 
     &:root[zen-right-side='true'] #zen-sidebar-top-buttons .titlebar-buttonbox-container {
       margin-right: calc(-1 * var(--zen-toolbox-padding));
-      margin-top: -10px;
-      height: calc(4px + var(--zen-toolbar-height)) !important;
-
-      & .titlebar-button {
-        align-items: end;
-      }
     }
   }
 
@@ -723,7 +717,6 @@
 
   & #zen-sidebar-top-buttons-customization-target {
     flex-direction: column;
-    padding-top: var(--zen-element-separation);
   }
 
   & #zen-sidebar-foot-buttons {
@@ -972,15 +965,13 @@
   :root[zen-sidebar-expanded='true'] & {
     --toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
   }
+
   :root[zen-single-toolbar='true'] & {
     --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
 
     & #PanelUI-button {
       order: -2;
     }
-    & #unified-extensions-button {
-      order: -1;
-    }
   }
 
   & #zen-sidebar-top-buttons-customization-target {

src/zen/tests/glance/browser.toml

@@ -13,3 +13,4 @@ support-files = [
 ["browser_glance_next_tab.js"]
 ["browser_glance_prev_tab.js"]
 ["browser_glance_select_parent.js"]
+["browser_glance_close_select.js"]

src/zen/tests/glance/browser_glance_close_select.js

@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+'use strict';
+
+async function openAndCloseGlance() {
+  await openGlanceOnTab(async (glanceTab) => {
+    ok(
+      glanceTab.hasAttribute('zen-glance-tab'),
+      'The glance tab should have the zen-glance-tab attribute'
+    );
+  });
+}
+
+add_task(async function test_Glance_Close_No_Tabs() {
+  const currentTab = gBrowser.selectedTab;
+  await openAndCloseGlance();
+  Assert.equal(gBrowser.selectedTab, currentTab, 'The original tab should be selected');
+  ok(currentTab.selected, 'The original tab should be visually selected');
+});
+
+add_task(async function test_Glance_Close_With_Next_Tab() {
+  const originalTab = gBrowser.selectedTab;
+  await BrowserTestUtils.withNewTab(
+    { url: 'http://example.com', gBrowser, waitForLoad: false },
+    async function () {
+      const selectedTab = gBrowser.selectedTab;
+      Assert.notEqual(selectedTab, originalTab, 'A new tab should be selected');
+      await openAndCloseGlance();
+      Assert.equal(gBrowser.selectedTab, selectedTab, 'The new tab should still be selected');
+      ok(selectedTab.selected, 'The new tab should be visually selected');
+
+      gBrowser.selectedTab = originalTab;
+    }
+  );
+});

src/zen/tests/ignorePrefs.json

@@ -1,6 +1,14 @@
+// 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/.
+//
+// This file lists preferences that are ignored when running mochitests.
+// Add here any preference that is not relevant for testing Zen Modus.
+// This prevents unnecessary test re-runs when these preferences are changed.
 [
   "zen.mods.updated-value-observer",
   "zen.mods.last-update",
   "zen.view.compact.enable-at-startup",
+  "zen.urlbar.suggestions-learner",
   "browser.newtabpage.activity-stream.trendingSearch.defaultSearchEngine"
 ]

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -0,0 +1,426 @@
+/* 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/. */
+
+export class nsZenSiteDataPanel {
+  #iconMap = {
+    install: 'extension',
+  };
+
+  constructor(window) {
+    this.window = window;
+    this.document = window.document;
+
+    this.panel = this.document.getElementById('zen-unified-site-data-panel');
+    this.#init();
+  }
+
+  #init() {
+    // Add a new button to the urlbar popup
+    const button = this.window.MozXULElement.parseXULToFragment(`
+      <box id="zen-site-data-icon-button" role="button" align="center" class="identity-box-button" delegatesanchor="true">
+        <image />
+      </box>
+    `);
+    this.anchor = button.querySelector('#zen-site-data-icon-button');
+    this.document.getElementById('identity-icon-box').after(button);
+    this.window.gUnifiedExtensions._button = this.anchor;
+
+    this.document
+      .getElementById('nav-bar')
+      .setAttribute('addon-webext-overflowbutton', 'zen-site-data-icon-button');
+
+    // Remove the old permissions dialog
+    this.document.getElementById('unified-extensions-panel-template').remove();
+
+    this.#initEventListeners();
+  }
+
+  #initEventListeners() {
+    this.panel.addEventListener('popupshowing', this);
+    this.document.getElementById('zen-site-data-manage-addons').addEventListener('click', this);
+    this.document.getElementById('zen-site-data-settings-more').addEventListener('click', this);
+    const kCommandIDs = [
+      'zen-site-data-header-share',
+      'zen-site-data-header-bookmark',
+      'zen-site-data-security-info',
+      'zen-site-data-actions',
+      'zen-site-data-new-addon-button',
+    ];
+
+    for (let id of kCommandIDs) {
+      this.document.getElementById(id).addEventListener('command', this);
+    }
+
+    this.#initContextMenuEventListener();
+  }
+
+  #initContextMenuEventListener() {
+    const kCommands = {
+      context_zenClearSiteData: (event) => {
+        this.window.gIdentityHandler.clearSiteData(event);
+      },
+      context_zenOpenGetAddons: () => {
+        this.#openGetAddons();
+      },
+      context_zenOpenSiteSettings: () => {
+        const { BrowserCommands } = this.window;
+        BrowserCommands.pageInfo(null, 'permTab');
+      },
+    };
+
+    for (let [id, handler] of Object.entries(kCommands)) {
+      this.document.getElementById(id).addEventListener('command', handler);
+    }
+  }
+
+  #preparePanel() {
+    this.#setSitePermissions();
+    this.#setSiteSecurityInfo();
+    this.#setSiteHeader();
+  }
+
+  #setSiteHeader() {
+    {
+      const button = this.document.getElementById('zen-site-data-header-reader-mode');
+      const urlbarButton = this.window.document.getElementById('reader-mode-button');
+      const isActive = urlbarButton?.hasAttribute('readeractive');
+      const isVisible = !urlbarButton?.hidden || isActive;
+
+      button.disabled = !isVisible;
+      if (isActive) {
+        button.classList.add('active');
+      } else {
+        button.classList.remove('active');
+      }
+      this.document.l10n.setAttributes(button, urlbarButton?.getAttribute('data-l10n-id'));
+    }
+    {
+      const button = this.document.getElementById('zen-site-data-header-bookmark');
+      const isPageBookmarked = this.window.BookmarkingUI.star?.hasAttribute('starred');
+
+      if (isPageBookmarked) {
+        button.classList.add('active');
+      } else {
+        button.classList.remove('active');
+      }
+    }
+    {
+      const button = this.document.getElementById('zen-site-data-header-share');
+      if (
+        this.window.gBrowser.currentURI.schemeIs('http') ||
+        this.window.gBrowser.currentURI.schemeIs('https')
+      ) {
+        button.removeAttribute('disabled');
+      } else {
+        button.setAttribute('disabled', 'true');
+      }
+    }
+  }
+
+  #setSiteSecurityInfo() {
+    const { gIdentityHandler } = this.window;
+    const button = this.document.getElementById('zen-site-data-security-info');
+
+    if (gIdentityHandler._isSecureInternalUI) {
+      button.parentNode.hidden = true;
+      return;
+    }
+
+    let identity;
+    if (gIdentityHandler._pageExtensionPolicy) {
+      this.document.l10n.setAttributes(button, 'zen-site-data-security-info-extension');
+      identity = 'extension';
+    } else if (gIdentityHandler._uriHasHost && gIdentityHandler._isSecureConnection) {
+      this.document.l10n.setAttributes(button, 'zen-site-data-security-info-secure');
+      identity = 'secure';
+    } else {
+      this.document.l10n.setAttributes(button, 'zen-site-data-security-info-not-secure');
+      identity = 'not-secure';
+    }
+
+    button.parentNode.hidden = false;
+    button.setAttribute('identity', identity);
+  }
+
+  #setSitePermissions() {
+    const { gBrowser, SitePermissions } = this.window;
+    const list = this.document.getElementById('zen-site-data-settings-list');
+    const section = list.closest('.zen-site-data-section');
+
+    // show permission icons
+    let permissions = SitePermissions.getAllPermissionDetailsForBrowser(gBrowser.selectedBrowser);
+
+    // Don't display origin-keyed 3rdPartyStorage permissions that are covered by
+    // site-keyed 3rdPartyFrameStorage permissions.
+    let thirdPartyStorageSites = new Set(
+      permissions
+        .map(function (permission) {
+          let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+          if (id == '3rdPartyFrameStorage') {
+            return key;
+          }
+          return null;
+        })
+        .filter(function (key) {
+          return key != null;
+        })
+    );
+    permissions = permissions.filter(function (permission) {
+      let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+      if (id != '3rdPartyStorage') {
+        return true;
+      }
+      try {
+        let origin = Services.io.newURI(key);
+        let site = Services.eTLD.getSite(origin);
+        return !thirdPartyStorageSites.has(site);
+      } catch {
+        return false;
+      }
+    });
+
+    this._sharingState = gBrowser.selectedTab._sharingState;
+
+    if (this._sharingState?.geo) {
+      let geoPermission = permissions.find((perm) => perm.id === 'geo');
+      if (!geoPermission) {
+        permissions.push({
+          id: 'geo',
+          state: SitePermissions.ALLOW,
+          scope: SitePermissions.SCOPE_REQUEST,
+          sharingState: true,
+        });
+      }
+    }
+
+    if (this._sharingState?.xr) {
+      let xrPermission = permissions.find((perm) => perm.id === 'xr');
+      if (!xrPermission) {
+        permissions.push({
+          id: 'xr',
+          state: SitePermissions.ALLOW,
+          scope: SitePermissions.SCOPE_REQUEST,
+          sharingState: true,
+        });
+      }
+    }
+
+    if (this._sharingState?.webRTC) {
+      let webrtcState = this._sharingState.webRTC;
+      // If WebRTC device or screen are in use, we need to find
+      // the associated ALLOW permission item to set the sharingState field.
+      for (let id of ['camera', 'microphone', 'screen']) {
+        if (webrtcState[id]) {
+          let found = false;
+          for (let permission of permissions) {
+            let [permId] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+            if (permId != id || permission.state != SitePermissions.ALLOW) {
+              continue;
+            }
+            found = true;
+          }
+          if (!found) {
+            // If the ALLOW permission item we were looking for doesn't exist,
+            // the user has temporarily allowed sharing and we need to add
+            // an item in the permissions array to reflect this.
+            permissions.push({
+              id,
+              state: SitePermissions.ALLOW,
+              scope: SitePermissions.SCOPE_REQUEST,
+              sharingState: webrtcState[id],
+            });
+          }
+        }
+      }
+    }
+
+    list.innerHTML = '';
+    for (let permission of permissions) {
+      let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+
+      if (id == 'storage-access') {
+        // Ignore storage access permissions here, they are made visible inside
+        // the Content Blocking UI.
+        continue;
+      }
+
+      if (permission.state == SitePermissions.PROMPT) {
+        // We don't display "ask" permissions in the site data panel.
+        continue;
+      }
+
+      let item = this.#createPermissionItem(id, key, permission);
+      if (item) {
+        list.appendChild(item);
+      }
+    }
+
+    section.hidden = list.childElementCount == 0;
+  }
+
+  #getPermissionStateLabelId(permission) {
+    const { SitePermissions } = this.window;
+    switch (permission.state) {
+      // There should only be these types being displayed in the panel.
+      case SitePermissions.ALLOW:
+        return 'zen-site-data-setting-allow';
+      case SitePermissions.BLOCK:
+      case SitePermissions.AUTOPLAY_BLOCKED_ALL:
+        return 'zen-site-data-setting-block';
+      default:
+        return null;
+    }
+  }
+
+  #createPermissionItem(id, key, permission) {
+    const { SitePermissions } = this.window;
+
+    // Create a permission item for the site data panel.
+    let container = this.document.createXULElement('hbox');
+    const idNoSuffix = permission.id;
+    container.classList.add(
+      'permission-popup-permission-item',
+      `permission-popup-permission-item-${idNoSuffix}`
+    );
+    container.setAttribute('align', 'center');
+    container.setAttribute('role', 'group');
+
+    container.setAttribute('state', permission.state == SitePermissions.ALLOW ? 'allow' : 'block');
+
+    let img = this.document.createXULElement('toolbarbutton');
+    img.classList.add('permission-popup-permission-icon', 'zen-site-data-permission-icon');
+    if (this.#iconMap[id]) {
+      img.classList.add(`zen-permission-${this.#iconMap[id]}-icon`);
+    }
+
+    let labelContainer = this.document.createXULElement('vbox');
+    labelContainer.setAttribute('flex', '1');
+    labelContainer.setAttribute('align', 'start');
+    labelContainer.classList.add('permission-popup-permission-label-container');
+    labelContainer._permission = permission;
+    labelContainer.addEventListener('click', this);
+
+    let nameLabel = this.document.createXULElement('label');
+    nameLabel.setAttribute('flex', '1');
+    nameLabel.setAttribute('class', 'permission-popup-permission-label');
+    let label = SitePermissions.getPermissionLabel(permission.id);
+    if (label === null) {
+      return null;
+    }
+    nameLabel.textContent = label;
+    labelContainer.appendChild(nameLabel);
+
+    let stateLabel = this.document.createXULElement('label');
+    stateLabel.setAttribute('class', 'zen-permission-popup-permission-state-label');
+    stateLabel.setAttribute('data-l10n-id', this.#getPermissionStateLabelId(permission));
+    labelContainer.appendChild(stateLabel);
+
+    container.appendChild(img);
+    container.appendChild(labelContainer);
+
+    return container;
+  }
+
+  #openGetAddons() {
+    const { switchToTabHavingURI } = this.window;
+    let amoUrl = Services.urlFormatter.formatURLPref('extensions.getAddons.link.url');
+    switchToTabHavingURI(amoUrl, true);
+  }
+
+  #onCommandEvent(event) {
+    const id = event.target.id;
+    switch (id) {
+      case 'zen-site-data-new-addon-button': {
+        this.#openGetAddons();
+        break;
+      }
+      case 'zen-site-data-security-info': {
+        this.window.displaySecurityInfo();
+        break;
+      }
+      case 'zen-site-data-actions': {
+        const button = this.document.getElementById('zen-site-data-actions');
+        const popup = this.document.getElementById('zenSiteDataActions');
+        popup.openPopup(
+          button,
+          'after_start',
+          0,
+          0,
+          /* context menu */ true,
+          false,
+          this.window.event
+        );
+        break;
+      }
+      case 'zen-site-data-header-bookmark': {
+        this.window.BookmarkingUI.onStarCommand(event);
+        break;
+      }
+    }
+  }
+
+  #onPermissionClick(label) {
+    const { SitePermissions, gBrowser } = this.window;
+    const permission = label._permission;
+
+    let newState;
+    switch (permission.state) {
+      case SitePermissions.ALLOW:
+        newState = SitePermissions.BLOCK;
+        break;
+      case SitePermissions.BLOCK:
+      case SitePermissions.AUTOPLAY_BLOCKED_ALL:
+        newState = SitePermissions.ALLOW;
+        break;
+      default:
+        return;
+    }
+
+    SitePermissions.setForPrincipal(gBrowser.contentPrincipal, permission.id, newState);
+
+    label.parentNode.setAttribute('state', newState == SitePermissions.ALLOW ? 'allow' : 'block');
+    label
+      .querySelector('.zen-permission-popup-permission-state-label')
+      .setAttribute('data-l10n-id', this.#getPermissionStateLabelId({ state: newState }));
+    label._permission.state = newState;
+  }
+
+  #onClickEvent(event) {
+    const id = event.target.id;
+    switch (id) {
+      case 'zen-site-data-manage-addons': {
+        const { BrowserAddonUI } = this.window;
+        BrowserAddonUI.openAddonsMgr('addons://list/extension');
+        break;
+      }
+      case 'zen-site-data-settings-more': {
+        const { BrowserCommands } = this.window;
+        BrowserCommands.pageInfo(null, 'permTab');
+        break;
+      }
+      default: {
+        const label = event.target.closest('.permission-popup-permission-label-container');
+        if (label?._permission) {
+          this.#onPermissionClick(label);
+        }
+        break;
+      }
+    }
+  }
+
+  handleEvent(event) {
+    const type = event.type;
+    switch (type) {
+      case 'click':
+        this.#onClickEvent(event);
+        break;
+      case 'command':
+        this.#onCommandEvent(event);
+        break;
+      case 'popupshowing':
+        this.#preparePanel();
+        break;
+    }
+  }
+}

src/zen/urlbar/moz.build

@@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 EXTRA_JS_MODULES += [
+  "ZenSiteDataPanel.sys.mjs",
   "ZenUBActionsProvider.sys.mjs",
   "ZenUBGlobalActions.sys.mjs",
   "ZenUBProvider.sys.mjs",

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1192,7 +1192,7 @@
     }
 
     shouldBeDarkMode(accentColor) {
-      if (Services.prefs.getBoolPref('zen.theme.use-sysyem-colors')) {
+      if (Services.prefs.getBoolPref('zen.theme.use-system-colors')) {
         return this.isDarkMode;
       }
 

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -99,7 +99,7 @@
 
     #createWorkspaceIcon(workspace) {
       const button = document.createXULElement('toolbarbutton');
-      button.setAttribute('class', 'subviewbutton');
+      button.setAttribute('class', 'subviewbutton toolbarbutton-1');
       button.setAttribute('tooltiptext', workspace.name);
       button.setAttribute('zen-workspace-id', workspace.uuid);
       button.setAttribute('context', 'zenWorkspaceMoreActions');

src/zen/workspaces/ZenWorkspaces.mjs

@@ -3018,7 +3018,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
       parent.removeAttribute('icons-overflow');
       return;
     }
-    const maxButtonSize = 26; // IMPORTANT: This should match the CSS size of the icons
+    const maxButtonSize = 28; // IMPORTANT: This should match the CSS size of the icons
     const minButtonSize = 15;
     const separation = 3; // Space between icons
 

src/zen/workspaces/zen-workspaces.css

@@ -33,8 +33,8 @@
 
   & toolbarbutton {
     margin: 0;
-    max-width: 26px;
+    max-width: 28px;
-    height: 26px;
+    height: 28px;
     display: flex;
     justify-content: center;
     padding: 0 !important;
@@ -63,7 +63,8 @@
     transition:
       filter 0.2s,
       opacity 0.2s,
-      width 0.1s;
+      width 0.1s,
+      transform 0.2s;
 
     &[active='true'],
     &:hover,
@@ -152,6 +153,7 @@
 
 /* Mark workspaces indicator */
 .zen-current-workspace-indicator {
+  margin-top: 1px;
   padding: calc(2px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
   font-weight: 500;
   position: relative;

src/zen/zen.globals.js

@@ -7,6 +7,8 @@ export default [
   'nsZenDOMOperatedFeature',
   'nsZenPreloadedFeature',
 
+  'nsZenSiteDataPanel',
+
   'ZenThemeModifier',
   'ZenHasPolyfill',