Skip to content

Commit 847aef5

Browse files
committed
feat: Added new workspace creation form, b=no-bug, c=tabs, common, compact-mode, workspaces
1 parent e1974d9 commit 847aef5

22 files changed

+574
-45
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne
3030
### Firefox Versions
3131

3232
- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `139.0.4`! 🚀
33-
- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 139.0.1`!
33+
- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 139.0.4`!
3434

3535
### Contributing
3636

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,4 @@
5656
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenMediaController.mjs"></script>
5757
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenDownloadAnimation.mjs"></script>
5858
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenEmojiPicker.mjs"></script>
59+
<script type="text/javascript" src="chrome://browser/content/zen-components/ZenWorkspaceCreation.mjs"></script>

src/browser/base/content/zen-assets.jar.inc.mn

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
content/browser/zen-components/ZenWorkspaceIcons.mjs (../../zen/workspaces/ZenWorkspaceIcons.mjs)
4545
content/browser/zen-components/ZenWorkspace.mjs (../../zen/workspaces/ZenWorkspace.mjs)
4646
content/browser/zen-components/ZenWorkspaces.mjs (../../zen/workspaces/ZenWorkspaces.mjs)
47+
content/browser/zen-components/ZenWorkspaceCreation.mjs (../../zen/workspaces/ZenWorkspaceCreation.mjs)
4748
content/browser/zen-components/ZenWorkspacesStorage.mjs (../../zen/workspaces/ZenWorkspacesStorage.mjs)
4849
content/browser/zen-components/ZenWorkspacesSync.mjs (../../zen/workspaces/ZenWorkspacesSync.mjs)
4950
content/browser/zen-components/ZenGradientGenerator.mjs (../../zen/workspaces/ZenGradientGenerator.mjs)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
<command id="cmd_zenChangeWorkspaceName" />
4141
<command id="cmd_zenChangeWorkspaceIcon" />
4242
<command id="cmd_zenOpenWorkspacePanel" />
43+
<command id="cmd_zenOpenWorkspaceCreation" />
4344

4445
<command id="cmd_zenPinnedTabReset" />
4546
<command id="cmd_zenPinnedTabResetNoTab" />

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
<toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" class="subviewbutton">
6767
<image></image>
6868
</toolbarbutton>
69-
<toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton">
69+
<toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton" command="cmd_zenOpenWorkspaceCreation">
7070
<image></image>
7171
</toolbarbutton>
7272
</hbox>
@@ -85,11 +85,17 @@
8585
<hbox id="PanelUI-zen-emojis-picker-list" />
8686
</panel>
8787

88+
<menupopup id="zenCreateNewPopup">
89+
<menuitem data-l10n-id="tabs-toolbar-new-tab" command="cmd_newNavigatorTab" image="chrome://browser/skin/zen-icons/plus.svg" />
90+
<menuseparator/>
91+
<menuitem data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenOpenWorkspaceCreation" image="chrome://browser/skin/zen-icons/duplicate-tab.svg" />
92+
</menupopup>
93+
8894
<menupopup id="zenWorkspaceMoreActions">
89-
<menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-change-name" command="cmd_zenChangeWorkspaceName"/>
95+
<menuitem id="context_zenEditWorkspace" data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenChangeWorkspaceName"/>
9096
<menuitem id="context_zenEditWorkspaceIcon" data-l10n-id="zen-workspaces-panel-change-icon" command="cmd_zenChangeWorkspaceIcon"/>
9197
<menuitem class="zenToolbarThemePicker"
92-
data-l10n-id="zen-workspaces-change-gradient"
98+
data-l10n-id="zen-workspaces-change-theme"
9399
command="cmd_zenOpenZenThemePicker"/>
94100
<menu id="context_zenWorkspacesOpenInContainerTab"
95101
data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
mode="icons">
1111
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" command="cmd_zenToggleSidebar" data-l10n-id="sidebar-zen-expand"></toolbarbutton>
1212
<zen-workspace-icons id="zen-workspaces-button" overflows="false" removable="false"></zen-workspace-icons>
13+
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-create-new-button" context="zenCreateNewPopup" data-l10n-id="sidebar-zen-create-new"></toolbarbutton>
1314
</toolbar>

src/browser/themes/shared/tabbrowser/tabs-css.patch

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
2-
index 5b9ad123d819c6ef068acd427416957a1d0939fe..311caa27ee268c95215d459be02a93d20e129f8b 100644
2+
index 5b9ad123d819c6ef068acd427416957a1d0939fe..543d42dab2d84593f491a5652fcfe272ede59857 100644
33
--- a/browser/themes/shared/tabbrowser/tabs.css
44
+++ b/browser/themes/shared/tabbrowser/tabs.css
5+
@@ -19,7 +19,7 @@
6+
--tab-group-line-thickness: 2px;
7+
--tab-group-line-toolbar-border-distance: 1px;
8+
/* Collapsed tabs should be square, so set width to match the min height */
9+
- --tab-collapsed-background-width: var(--tab-min-height);
10+
+ --tab-collapsed-background-width: 48px;
11+
--tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin));
12+
--tab-inner-inline-margin: var(--space-medium);
13+
--tab-inline-padding: 8px;
514
@@ -33,7 +33,7 @@
615
--tab-block-margin: 4px;
716
--tab-icon-end-margin: 5.5px;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@
180180

181181
#zoom-in-button,
182182
#tabs-newtab-button,
183+
#zen-create-new-button,
183184
#new-tab-button,
184185
#appMenu-zoomEnlarge-button2,
185186
#PanelUI-zen-profiles-newProfile,
@@ -767,3 +768,20 @@
767768
#zen-media-pip-button {
768769
list-style-image: url('chrome://global/skin/media/picture-in-picture-open.svg');
769770
}
771+
772+
#zenCreateNewPopup > menuitem image {
773+
-moz-context-properties: fill;
774+
fill: currentColor;
775+
}
776+
777+
#zen-create-new-button {
778+
border-radius: var(--tab-border-radius);
779+
780+
&:hover {
781+
background: var(--toolbarbutton-active-background);
782+
}
783+
784+
& image {
785+
background: transparent !important;
786+
}
787+
}

src/zen/common/ZenCustomizableUI.sys.mjs

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export var ZenCustomizableUI = new (class {
66
constructor() {}
77

88
TYPE_TOOLBAR = 'toolbar';
9-
defaultSidebarIcons = ['preferences-button', 'zen-workspaces-button', 'downloads-button'];
9+
defaultSidebarIcons = ['downloads-button', 'zen-workspaces-button', 'zen-create-new-button'];
1010

1111
startup(CustomizableUIInternal) {
1212
CustomizableUIInternal.registerArea(
@@ -100,9 +100,34 @@ export var ZenCustomizableUI = new (class {
100100
elem.setAttribute('removable', 'true');
101101
}
102102

103+
this._initCreateNewButton(window);
103104
this._moveWindowButtons(window);
104105
}
105106

107+
_initCreateNewButton(window) {
108+
const button = window.document.getElementById('zen-create-new-button');
109+
button.addEventListener('command', () => {
110+
const image = button.querySelector('image');
111+
const popup = window.document.getElementById('zenCreateNewPopup');
112+
button.setAttribute('open', 'true');
113+
const handlePopupHidden = () => {
114+
button.removeAttribute('open');
115+
window.gZenUIManager.motion.animate(
116+
image,
117+
{ transform: ['rotate(45deg)', 'rotate(0deg)'] },
118+
{ duration: 0.2 }
119+
);
120+
};
121+
popup.addEventListener('popuphidden', handlePopupHidden, { once: true });
122+
popup.openPopup(button, 'after_start');
123+
window.gZenUIManager.motion.animate(
124+
image,
125+
{ transform: ['rotate(0deg)', 'rotate(45deg)'] },
126+
{ duration: 0.2 }
127+
);
128+
});
129+
}
130+
106131
_moveWindowButtons(window) {
107132
const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
108133
const toolboxIcons = window.document.getElementById(

0 commit comments

Comments
 (0)