mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-15 22:36:23 +00:00
feat: Small quality checks before release, b=no-bug, c=folders, common, tabs
This commit is contained in:
@@ -23,4 +23,10 @@ zen-folders-panel-change-folder-space =
|
||||
zen-folders-panel-change-icon-folder =
|
||||
.label = Change Icon
|
||||
|
||||
zen-folders-unload-all-tooltip =
|
||||
.tooltiptext = Unload all tabs in this folder
|
||||
|
||||
zen-folders-unload-folder =
|
||||
.label = Unload All Tabs
|
||||
|
||||
zen-folders-search-no-results = No tabs matching that search 🤔
|
||||
|
@@ -36,8 +36,9 @@
|
||||
<menuitem id="context_zenFolderRename" data-l10n-id="zen-folders-panel-rename-folder"/>
|
||||
<menuitem id="context_zenFolderChangeIcon" data-l10n-id="zen-folders-panel-change-icon-folder"/>
|
||||
<menuseparator />
|
||||
<menuitem id="context_zenFolderUnloadAll" data-l10n-id="zen-folders-unload-folder"/>
|
||||
<menuitem id="context_zenFolderNewSubfolder" data-l10n-id="zen-folders-new-subfolder"/>
|
||||
<menuitem id="context_zenFolderExpand" data-l10n-id="zen-folders-panel-unpack-folder"/>
|
||||
<menuitem id="context_zenFolderUnpack" data-l10n-id="zen-folders-panel-unpack-folder"/>
|
||||
<menuseparator />
|
||||
<menu id="context_zenChangeFolderSpace"
|
||||
data-l10n-id="zen-folders-panel-change-folder-space">
|
||||
|
@@ -1,5 +1,5 @@
|
||||
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
|
||||
index dadb198cbf968dc622d2d0ee6c754f3541c052a2..5b7d17d8705c7cfddaee04c90d342bd705338a18 100644
|
||||
index dadb198cbf968dc622d2d0ee6c754f3541c052a2..ef8ed137443a089e5ac084bb8f86533ddd2086a1 100644
|
||||
--- a/browser/themes/linux/browser.css
|
||||
+++ b/browser/themes/linux/browser.css
|
||||
@@ -43,7 +43,8 @@
|
||||
@@ -7,25 +7,24 @@ index dadb198cbf968dc622d2d0ee6c754f3541c052a2..5b7d17d8705c7cfddaee04c90d342bd7
|
||||
appearance: auto;
|
||||
|
||||
- #navigator-toolbox,
|
||||
+ #zen-main-app-wrapper,
|
||||
+ #zen-browser-background,
|
||||
+ #zen-main-app-wrapper,
|
||||
+ #zen-browser-background,
|
||||
dialog::backdrop {
|
||||
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
@@ -51,13 +52,14 @@
|
||||
@@ -51,13 +52,10 @@
|
||||
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
|
||||
- #navigator-toolbox {
|
||||
+ #zen-main-app-wrapper {
|
||||
/* The body clip below covers this. */
|
||||
border-radius: 0;
|
||||
}
|
||||
- /* The body clip below covers this. */
|
||||
- border-radius: 0;
|
||||
- }
|
||||
|
||||
body,
|
||||
- dialog::backdrop {
|
||||
+ dialog::backdrop,
|
||||
+ #zen-browser-background {
|
||||
+ dialog::backdrop,
|
||||
+ #zen-browser-background {
|
||||
/* Use an uniform clip to allow WebRender to optimize it better */
|
||||
border-radius: env(-moz-gtk-csd-titlebar-radius);
|
||||
}
|
||||
|
@@ -177,13 +177,16 @@
|
||||
const appWrapper = document.getElementById('zen-main-app-wrapper');
|
||||
const element = document.createElement('div');
|
||||
element.id = 'zen-update-animation';
|
||||
const elementBorder = document.createElement('div');
|
||||
elementBorder.id = 'zen-update-animation-border';
|
||||
requestIdleCallback(() => {
|
||||
if (gReduceMotion) {
|
||||
return;
|
||||
}
|
||||
appWrapper.appendChild(element);
|
||||
gZenUIManager.motion
|
||||
.animate(
|
||||
appWrapper.appendChild(elementBorder);
|
||||
Promise.all([
|
||||
gZenUIManager.motion.animate(
|
||||
'#zen-update-animation',
|
||||
{
|
||||
top: ['100%', '-50%'],
|
||||
@@ -192,10 +195,21 @@
|
||||
{
|
||||
duration: 0.35,
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
element.remove();
|
||||
});
|
||||
),
|
||||
gZenUIManager.motion.animate(
|
||||
'#zen-update-animation-border',
|
||||
{
|
||||
'--background-top': ['150%', '-50%'],
|
||||
},
|
||||
{
|
||||
duration: 0.35,
|
||||
delay: 0.1,
|
||||
}
|
||||
),
|
||||
]).then(() => {
|
||||
element.remove();
|
||||
elementBorder.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
@@ -74,6 +74,24 @@ var gZenUIManager = {
|
||||
gZenVerticalTabsManager.init();
|
||||
|
||||
this._initCreateNewPopup();
|
||||
this._debloatContextMenus();
|
||||
},
|
||||
|
||||
_debloatContextMenus() {
|
||||
const contextMenusToClean = [
|
||||
// Remove the 'new tab below' context menu.
|
||||
// reason: It doesn't properly work with zen and it's philosophy of not having
|
||||
// new tabs. It's also semi-not working as it doesn't create a new tab below
|
||||
// the current one.
|
||||
'context_openANewTab',
|
||||
];
|
||||
for (const id of contextMenusToClean) {
|
||||
const menu = document.getElementById(id);
|
||||
if (!menu) {
|
||||
continue;
|
||||
}
|
||||
menu.setAttribute('hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_initCreateNewPopup() {
|
||||
|
@@ -201,3 +201,24 @@ body > #confetti {
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#zen-update-animation-border {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: solid 2px #0000;
|
||||
border-radius: var(--zen-native-content-radius);
|
||||
background: radial-gradient(
|
||||
ellipse 100% 50% at center var(--background-top),
|
||||
rgba(255, 255, 255, 0.8) 80%,
|
||||
transparent
|
||||
)
|
||||
border-box;
|
||||
/* ensure gradient size is relative to border-box (not default padding-box) */
|
||||
--lyr: conic-gradient(white 0 0); /* any kind of gradient that's opaque everywhere */
|
||||
/* exclude padding-box (that is, mask out everything but the border area) */
|
||||
mask:
|
||||
var(--lyr) padding-box exclude,
|
||||
var(--lyr);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
}
|
||||
|
@@ -9,7 +9,7 @@
|
||||
<hbox class="tab-group-label-container" pack="center">
|
||||
<html:div class="tab-group-folder-icon"/>
|
||||
<label class="tab-group-label" role="button"/>
|
||||
<image class="tab-reset-button reset-icon" role="button" keyNav="false"/>
|
||||
<image class="tab-reset-button reset-icon" role="button" keyNav="false" data-l10n-id="zen-folders-unload-all-tooltip"/>
|
||||
</hbox>
|
||||
<html:div class="tab-group-container">
|
||||
<html:div class="zen-tab-group-start" />
|
||||
@@ -52,7 +52,7 @@
|
||||
</rect>
|
||||
<!--Icon (g)-->
|
||||
<g id="folder-icon" shape-rendering="geometricPrecision" style="fill-opacity: 1; transform-origin: -53.05px 5.399px; fill: var(--zen-folder-stroke);">
|
||||
<image href="" height="18px" width="19px"/>
|
||||
<image href="" transform="translate(-52.5,2)" height="18px" width="19px"/>
|
||||
<animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
|
||||
<animateTransform type="translate" additive="sum" attributeName="transform" values="-10 -9;-7.5 -9" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
|
||||
<animate attributeName="opacity" values="1;1" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
|
||||
@@ -153,7 +153,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
async expandGroupTabs() {
|
||||
async unpackTabs() {
|
||||
for (let tab of this.allItems.reverse()) {
|
||||
tab = tab.group.hasAttribute('split-view-group') ? tab.group : tab;
|
||||
if (tab.hasAttribute('zen-empty-tab')) {
|
||||
@@ -234,20 +234,20 @@
|
||||
return this.labelElement.parentElement.querySelector('.tab-reset-button');
|
||||
}
|
||||
|
||||
#unloadAllActiveTabs() {
|
||||
for (const tab of this.activeTabs) {
|
||||
const tabResetButton = tab.querySelector('.tab-reset-button');
|
||||
if (tabResetButton) {
|
||||
tabResetButton.click();
|
||||
}
|
||||
unloadAllTabs(event) {
|
||||
this.#unloadAllActiveTabs(event, /* noClose */ true);
|
||||
}
|
||||
|
||||
#unloadAllActiveTabs(event, noClose = false) {
|
||||
for (const tab of this.tabs) {
|
||||
gZenPinnedTabManager._onCloseTabShortcut(event, tab, { noClose });
|
||||
}
|
||||
this.activeTabs = [];
|
||||
}
|
||||
|
||||
on_click(event) {
|
||||
if (event.target === this.resetButton) {
|
||||
event.stopPropagation();
|
||||
this.#unloadAllActiveTabs();
|
||||
this.#unloadAllActiveTabs(event);
|
||||
return;
|
||||
}
|
||||
super.on_click(event);
|
||||
|
@@ -133,8 +133,11 @@
|
||||
case 'context_zenFolderRename':
|
||||
this.#lastFolderContextMenu.rename();
|
||||
break;
|
||||
case 'context_zenFolderExpand':
|
||||
this.#lastFolderContextMenu.expandGroupTabs();
|
||||
case 'context_zenFolderUnpack':
|
||||
this.#lastFolderContextMenu.unpackTabs();
|
||||
break;
|
||||
case 'context_zenFolderUnloadAll':
|
||||
this.#lastFolderContextMenu.unloadAllTabs(event);
|
||||
break;
|
||||
case 'context_zenFolderNewSubfolder':
|
||||
this.#lastFolderContextMenu.createSubfolder();
|
||||
@@ -448,11 +451,12 @@
|
||||
});
|
||||
|
||||
animations.push(...this.updateFolderIcon(group));
|
||||
const startMargin = -(heightUntilSelected + 4 * (selectedItems.length === 0 ? 1 : 0));
|
||||
animations.push(
|
||||
gZenUIManager.motion.animate(
|
||||
groupStart,
|
||||
{
|
||||
marginTop: -(heightUntilSelected + 4 * (selectedItems.length === 0 ? 1 : 0)),
|
||||
marginTop: startMargin,
|
||||
},
|
||||
{ duration: 0.12, ease: 'easeInOut' }
|
||||
)
|
||||
@@ -1235,6 +1239,11 @@
|
||||
}
|
||||
|
||||
collapseVisibleTab(group, onlyIfActive = false, selectedTab = null) {
|
||||
let tabsToCollapse = [selectedTab];
|
||||
if (group?.hasAttribute('split-view-group')) {
|
||||
group = group.group;
|
||||
tabsToCollapse = group.tabs;
|
||||
}
|
||||
if (!group?.isZenFolder) return;
|
||||
|
||||
if (onlyIfActive && group.activeGroups.length && selectedTab) {
|
||||
@@ -1255,7 +1264,7 @@
|
||||
for (const item of group._prevActiveTabs) {
|
||||
if (
|
||||
item.hasAttribute('folder-active') &&
|
||||
(selectedTab ? item === selectedTab : !item.selected || !onlyIfActive)
|
||||
(selectedTab ? tabsToCollapse.includes(item) : !item.selected || !onlyIfActive)
|
||||
) {
|
||||
item.removeAttribute('folder-active');
|
||||
group.activeTabs = group.activeTabs.filter((t) => t !== item);
|
||||
|
@@ -277,7 +277,6 @@ zen-folder {
|
||||
fill-opacity: 0.9;
|
||||
-moz-context-properties: fill, fill-opacity;
|
||||
fill: var(--zen-folder-stroke);
|
||||
transform: translate(-180%, 2.5px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -341,7 +340,7 @@ zen-folder {
|
||||
}
|
||||
}
|
||||
|
||||
&[has-active] > .tab-group-label-container {
|
||||
:root[zen-sidebar-expanded] &[has-active] > .tab-group-label-container {
|
||||
& .tab-reset-button {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
|
@@ -733,7 +733,7 @@
|
||||
async _onCloseTabShortcut(
|
||||
event,
|
||||
selectedTab = gBrowser.selectedTab,
|
||||
behavior = lazy.zenPinnedTabCloseShortcutBehavior
|
||||
{ behavior = lazy.zenPinnedTabCloseShortcutBehavior, noClose = false } = {}
|
||||
) {
|
||||
if (!selectedTab?.pinned) {
|
||||
return;
|
||||
@@ -742,6 +742,10 @@
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
if (noClose && behavior === 'close') {
|
||||
behavior = 'unload-switch';
|
||||
}
|
||||
|
||||
switch (behavior) {
|
||||
case 'close':
|
||||
this._removePinnedAttributes(selectedTab, true);
|
||||
@@ -780,7 +784,11 @@
|
||||
/* only if active */ true,
|
||||
selectedTab
|
||||
);
|
||||
await gBrowser.explicitUnloadTabs([selectedTab]);
|
||||
let tabsToUnload = [selectedTab];
|
||||
if (selectedTab.group?.hasAttribute('split-view-group')) {
|
||||
tabsToUnload = selectedTab.group.tabs;
|
||||
}
|
||||
await gBrowser.explicitUnloadTabs(tabsToUnload);
|
||||
selectedTab.removeAttribute('discarded');
|
||||
}
|
||||
if (selectedTab.selected) {
|
||||
|
Reference in New Issue
Block a user