ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 06:45:29 +02:00
Code Releases Wiki Activity

Rename workspaces button to workspace select button and adjust related styles for consistency

Browse source
This commit is contained in:
mr. m 2025-01-20 15:38:11 +00:00
parent f000af56e7
commit 0b17ceda90
10 changed files with 37 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/browser/base/content/ZenCustomizableUI.sys.mjs
View file

@ -4,7 +4,7 @@ export var ZenCustomizableUI = new (class {
constructor() {}
TYPE_TOOLBAR = 'toolbar';
defaultSidebarIcons = ['zen-profile-button', 'zen-workspaces-button', 'downloads-button'];
defaultSidebarIcons = ['zen-profile-button', 'zen-workspace-select-button', 'downloads-button'];
startup(CustomizableUIInternal) {
CustomizableUIInternal.registerArea(
@ -83,10 +83,6 @@ export var ZenCustomizableUI = new (class {
const newTab = window.document.getElementById('vertical-tabs-newtab-button');
newTab.classList.add('zen-sidebar-action-button');
const wrapper = window.document.createXULElement('toolbarbutton');
wrapper.id = 'zen-workspaces-button';
window.document.getElementById('zen-sidebar-icons-wrapper').prepend(wrapper);
for (let id of this.defaultSidebarIcons) {
const elem = window.document.getElementById(id);
if (!elem) continue;

2
src/browser/base/content/zen-sidebar-icons.inc.xhtml
View file

@ -9,7 +9,7 @@
mode="icons">
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
<toolbarbutton removable="true" class="toolbarbutton-1 zen-sidebar-action-button zen-compact-mode-ignore" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
<toolbarbutton removable="true" id="zen-workspaces-button"></toolbarbutton>
<toolbarbutton removable="false" id="zen-workspace-select-button"></toolbarbutton>
<toolbarbutton id="zen-profile-button"
class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
delegatesanchor="true"

10
src/browser/base/content/zen-styles/zen-animations.css
View file

@ -219,16 +219,6 @@
}
}
@keyframes zen-workspaces-button-active {
from {
bottom: -20px;
}
to {
bottom: -2px;
}
}
/* Mark: Zen Glance */
@keyframes zen-glance-overlay-animation {
from {

2
src/browser/base/content/zen-styles/zen-buttons.css
View file

@ -20,7 +20,7 @@ xul|button {
border: 1px solid var(--zen-colors-border);
}
button:not(#zen-workspaces-button):active {
button:not(#zen-workspace-select-button):active {
transform: scale(0.98);
}

2
src/browser/base/content/zen-styles/zen-single-components.css
View file

@ -40,7 +40,7 @@
pointer-events: none;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
#zen-workspace-select-button .zen-workspace-sidebar-name {
margin-left: 10px;
display: none;
overflow: hidden;

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

@ -228,7 +228,7 @@
border-bottom: 0px solid transparent !important;
--tab-block-margin: 2px;
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0.11));
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.11));
grid-gap: 0 !important;
&[overflow]::after,
@ -321,7 +321,7 @@
padding-top: var(--zen-element-separation);
& > toolbarbutton:not(#zen-workspaces-button) {
& > toolbarbutton:not(#zen-workspace-select-button) {
padding: 0 !important;
}
}
@ -398,7 +398,7 @@
margin-top: 0;
}
& #zen-workspaces-button[as-button='true'] {
& #zen-workspace-select-button[as-button='true'] {
width: calc(100% - 10px) !important;
}
@ -406,7 +406,7 @@
display: none;
}
& #zen-workspaces-button {
& #zen-workspace-select-button {
margin-left: 2px;
margin-right: 2px;
@ -453,7 +453,7 @@
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
& > *:not(tabs):not(#search-container):not(#zen-workspace-select-button),
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
width: 100% !important;
border-radius: var(--tab-border-radius) !important;
@ -656,7 +656,7 @@
margin-inline-end: 0 !important;
}
}
& #zen-workspaces-button {
& #zen-workspace-select-button {
flex-direction: column;
&:not([as-button='true']) {
& toolbarbutton {

2
src/browser/base/content/zen-styles/zen-theme.css
View file

@ -106,7 +106,7 @@
--zen-toolbar-element-filter: brightness(0.95);
@media (prefers-color-scheme: dark) {
--zen-toolbar-element-filter: brightness(1.2);
--zen-toolbar-element-filter: brightness(1.25);
}
/* Toolbar */

18
src/browser/base/content/zen-styles/zen-workspaces.css
View file

@ -5,7 +5,7 @@
*/
@namespace html 'http://www.w3.org/1999/xhtml';
#zen-workspaces-button {
#zen-workspace-select-button {
justify-content: center;
align-items: center;
display: flex;
@ -63,7 +63,7 @@
& {
opacity: 0.4;
filter: grayscale(1);
transition: opacity 0.2s;
transition: opacity 0.2s, filter 0.2s;
}
&[active='true'] {
@ -105,7 +105,7 @@
}
}
#zen-workspaces-button .zen-workspace-sidebar-wrapper {
#zen-workspace-select-button .zen-workspace-sidebar-wrapper {
position: absolute;
width: 100%;
display: flex;
@ -114,7 +114,7 @@
pointer-events: none;
}
#zen-workspaces-button .zen-workspace-sidebar-name {
#zen-workspace-select-button .zen-workspace-sidebar-name {
margin-left: 0.2rem;
display: none;
overflow: hidden;
@ -125,18 +125,18 @@
/** Keep these selectors in sync with the ones in vertical-tabs.css */
#navigator-toolbox {
& #zen-workspaces-button[as-button='true'] {
& #zen-workspace-select-button[as-button='true'] {
width: calc(100% - var(--toolbarbutton-outer-padding));
margin: 2px;
min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
height: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
}
& #zen-workspaces-button .zen-workspace-sidebar-name {
& #zen-workspace-select-button .zen-workspace-sidebar-name {
display: block;
}
& #zen-workspaces-button .zen-workspace-sidebar-icon {
& #zen-workspace-select-button .zen-workspace-sidebar-icon {
margin-inline-end: 5px;
& [no-icon='true'] {
@ -144,11 +144,11 @@
}
}
& #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
& #zen-workspace-select-button .zen-workspace-sidebar-icon[no-icon='true'] + .zen-workspace-sidebar-name {
margin-left: 0;
}
& #zen-workspaces-button {
& #zen-workspace-select-button {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

21
src/browser/base/zen-components/ZenCompactMode.mjs
View file

@ -14,16 +14,17 @@ XPCOMUtils.defineLazyPreferenceGetter(
true
);
ChromeUtils.defineLazyGetter(lazyCompactMode, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
var gZenCompactModeManager = {
_flashTimeouts: {},
_evenListeners: [],
_removeHoverFrames: {},
_animating: false,
init() {
Services.prefs.addObserver('zen.tabs.vertical.right-side', this._updateSidebarIsOnRight.bind(this));
ChromeUtils.defineLazyGetter(this, 'mainAppWrapper', () => document.getElementById('zen-main-app-wrapper'));
this._canAnimateSidebar = Services.prefs.getBoolPref('zen.view.compact.animate-sidebar', true);
gZenUIManager.addPopupTrackingAttribute(this.sidebar);
@ -35,18 +36,19 @@ var gZenCompactModeManager = {
get preference() {
if (!document.documentElement.hasAttribute('zen-compact-mode')) {
document.documentElement.setAttribute('zen-compact-mode', this.mainAppWrapper.getAttribute('zen-compact-mode'));
document.documentElement.setAttribute('zen-compact-mode', lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode'));
}
return this.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
return lazyCompactMode.mainAppWrapper.getAttribute('zen-compact-mode') === 'true';
},
set preference(value) {
if (this.preference === value) {
if (this.preference === value || this._animating) {
// We dont want the user to be able to spam the button
return value;
}
// We use this element in order to make it persis across restarts, by using the XULStore.
// main-window can't store attributes other than window sizes, so we use this instead
this.mainAppWrapper.setAttribute('zen-compact-mode', value);
lazyCompactMode.mainAppWrapper.setAttribute('zen-compact-mode', value);
document.documentElement.setAttribute('zen-compact-mode', value);
this._updateEvent();
return value;
@ -69,11 +71,7 @@ var gZenCompactModeManager = {
flashSidebarIfNecessary(aInstant = false) {
if (!aInstant && this.preference && lazyCompactMode.COMPACT_MODE_FLASH_ENABLED && !gZenGlanceManager._animating) {
try {
this.flashSidebar();
} catch (e) {
// Ignore errors
}
}
},
@ -140,6 +138,7 @@ var gZenCompactModeManager = {
},
animateCompactMode() {
this._animating = true;
const isCompactMode = this.preference;
const canHideSidebar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar');
// Do this so we can get the correct width ONCE compact mode styled have been applied
@ -175,6 +174,7 @@ var gZenCompactModeManager = {
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
this._animating = false;
setTimeout(() => {
this.sidebar.style.removeProperty('transition');
});
@ -210,6 +210,7 @@ var gZenCompactModeManager = {
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
this._animating = false;
setTimeout(() => {
this.sidebar.style.removeProperty('transition');
});

10
src/browser/base/zen-components/ZenWorkspaces.mjs
View file

@ -879,7 +879,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
await this.changeWorkspace(workspace);
let panel = this.ownerWindow.document.getElementById('PanelUI-zen-workspaces');
PanelMultiView.hidePopup(panel);
this.ownerWindow.document.getElementById('zen-workspaces-button').removeAttribute('open');
this.ownerWindow.document.getElementById('zen-workspace-select-button').removeAttribute('open');
}).bind(browser.ZenWorkspaces);
return element;
};
@ -1025,7 +1025,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this.workspaceEnabled) {
return;
}
let target = event.target.closest('#zen-current-workspace-indicator') || document.getElementById('zen-workspaces-button');
let target = event.target.closest('#zen-current-workspace-indicator') || document.getElementById('zen-workspace-select-button');
let panel = document.getElementById('PanelUI-zen-workspaces');
await this._propagateWorkspaceData({
ignoreStrip: true,
@ -1040,8 +1040,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
async initializeWorkspacesButton() {
if (!this.workspaceEnabled) {
return;
} else if (document.getElementById('zen-workspaces-button')) {
let button = document.getElementById('zen-workspaces-button');
} else if (document.getElementById('zen-workspace-select-button')) {
let button = document.getElementById('zen-workspace-select-button');
button.removeAttribute('hidden');
return;
}
@ -1052,7 +1052,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (typeof browser.ZenWorkspaces === 'undefined') {
browser = window;
}
let button = browser.document.getElementById('zen-workspaces-button');
let button = browser.document.getElementById('zen-workspace-select-button');
while (button.firstChild) {
button.firstChild.remove();