feat: Increased the width and height of toolbar buttons, b=no-bug, c=common, workspaces

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

@@ -33,6 +33,8 @@ 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!

prefs/glance.yaml

@@ -8,6 +8,9 @@
 - 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
 

scripts/run_tests.py

@@ -15,15 +15,6 @@ 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
@@ -31,7 +22,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, cls=JSONWithCommentsDecoder)
+      new_prefs = json.load(f_in)
       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/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -124,6 +124,7 @@
 #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/zen/common/styles/zen-browser-container.css

@@ -8,12 +8,12 @@
   #tabbrowser-tabpanels[dragging-split='true'] {
     width: -moz-available;
     position: relative;
+    overflow: clip;
 
     &.browserSidebarContainer {
-      :root:not([zen-no-padding='true']) &:not(.zen-glance-overlay) {
+      :root:not([zen-no-padding='true']) & {
         border-radius: var(--zen-native-inner-radius);
         box-shadow: var(--zen-big-shadow);
-        overflow: clip;
       }
 
       & browser[type='content'] {

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

@@ -177,15 +177,16 @@ 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);
   }
 }
 

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

@@ -2,10 +2,11 @@
 // 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);
   }
 
@@ -21,34 +22,51 @@ export class ZenGlanceChild extends JSWindowActorChild {
     }
   }
 
-  async #initActivationMethod() {
+  async getActivationMethod() {
-    this.#activationMethod = await this.sendQuery('ZenGlance:GetActivationMethod');
+    if (this._activationMethod === undefined) {
+      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;
-    await this.#initActivationMethod();
+    const activationMethod = await this.getActivationMethod();
-    this.contentWindow.document.addEventListener('click', this.clickListener, { capture: true });
+    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, originalTarget) {
+  openGlance(target) {
     let url = target.href;
     // Add domain to relative URLs
     if (!url.match(/^(?:[a-z]+:)?\/\//i)) {
       url = this.contentWindow.location.origin + url;
     }
-    // Get the largest element we can get. If the `A` element
+    const rect = target.getBoundingClientRect();
-    // 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,
@@ -58,11 +76,35 @@ 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) {
@@ -71,6 +113,8 @@ 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');
@@ -78,7 +122,7 @@ export class ZenGlanceChild extends JSWindowActorChild {
       event.preventDefault();
       event.stopPropagation();
 
-      this.openGlance(target, event.originalTarget || event.target);
+      this.openGlance(target);
     }
   }
 

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

@@ -11,6 +11,9 @@ 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;
@@ -28,38 +31,7 @@ export class ZenGlanceParent extends JSWindowActorParent {
     }
   }
 
-  #imageBitmapToBase64(imageBitmap) {
+  openGlance(window, data) {
-    // 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:not([zen-right-side='true']) & {
+  :root[zen-right-side='true'] & {
     left: 100%;
   }
 
-  :root[zen-right-side='true'] & {
+  :root:not([zen-right-side='true']) & {
     right: 100%;
   }
 
@@ -99,7 +99,7 @@
 }
 
 .browserSidebarContainer.zen-glance-background,
-.browserSidebarContainer.zen-glance-overlay .browserContainer:not([fade-out='true']) {
+.browserSidebarContainer.zen-glance-overlay .browserContainer {
   border-radius: var(--zen-native-inner-radius);
   box-shadow: var(--zen-big-shadow);
 }
@@ -116,19 +116,14 @@
   }
 
   & .browserContainer {
-    transform: translate(-50%, -50%);
+    background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32));
     position: fixed;
+    opacity: 0;
     top: 0;
     left: 0;
     flex: unset !important;
     /* Promote to its own layer during transitions to reduce jank */
-    will-change: transform, top, left;
+    will-change: transform, opacity, top, left, width, height;
-    width: 85%;
-    height: 100%;
-
-    &:not([has-finished-animation='true']) #statuspanel {
-      display: none;
-    }
 
     &[has-finished-animation='true'] {
       position: relative !important;
@@ -145,15 +140,10 @@
     }
 
     & browser {
-      background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32)) !important;
       width: 100%;
       height: 100%;
       opacity: 1;
-      transition: opacity 0.08s;
+      transition: opacity 0.2s ease-in-out;
-
-      @starting-style {
-        opacity: 0;
-      }
     }
 
     &[animate='true'] {
@@ -163,17 +153,8 @@
 
   &[fade-out='true'] {
     & browser {
-      transition: opacity 0.2s ease-in-out;
+      transition: opacity 0.2s ease;
       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/split-view/ZenViewSplitter.mjs

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

src/zen/tests/ignorePrefs.json

@@ -1,14 +1,6 @@
-// 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/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,