mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 09:26:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lots of changes, tabs are now vertical and title bar is now separated!

Browse Source
This commit is contained in:
mauro-balades
2024-04-06 23:57:41 +02:00
parent fc7adf7698
commit 22d259855d
8 changed files with 238 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/browser/base/content/browser-xhtml.patch
View File

@@ -1,13 +1,20 @@
diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
index b4886fb5f74568b4c09eb620be9efb74e39c599c..b4a6bb5e06db8b097457c490d369ad9e2ae66454 100644
index b4886fb5f74568b4c09eb620be9efb74e39c599c..f6506e972bc464aaddf087d994ce439c02f9a2f9 100644
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -165,7 +165,10 @@
#include navigator-toolbox.inc.xhtml
@@ -163,9 +163,15 @@
</vbox>
</html:template>
-#include navigator-toolbox.inc.xhtml
-
-#include browser-box.inc.xhtml
+ <hbox id="zen-titlebar-items-container">
+#include titlebar-items.inc.xhtml
+ </hbox>
+
+ <hbox flex="1">
+ #include navigator-toolbox.inc.xhtml
+ #include zen-sidebar-box.inc.xhtml
+ #include browser-box.inc.xhtml
+ </hbox>

41
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,17 +1,36 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index dce7bacdb3678a95dc97085390a7e6102090ffb2..5e3c40b384e4643b6865c4fab3d0bcea4c179d0c 100644
index dce7bacdb3678a95dc97085390a7e6102090ffb2..2d91d95dc458c3ffe53e324576e44003d8472209 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -30,8 +30,6 @@
context="toolbar-context-menu"
flex="1">
@@ -56,15 +56,17 @@
# significantly, there is an optimization in
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
# the current structure that we may want to revisit.
- <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true" scrolledtostart="true" scrolledtoend="true">
+ <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="vertical" flex="1" style="min-width: 1px;" clicktoscroll="true" scrolledtostart="true" scrolledtoend="true">
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
+
<toolbarbutton id="tabs-newtab-button"
class="toolbarbutton-1"
command="cmd_newNavigatorTab"
onclick="gBrowser.handleNewTabMiddleClick(this, event);"
tooltip="dynamic-shortcut-tooltip"/>
+
<spacer class="closing-tabs-spacer" style="width: 0;"/>
</hbox>
</arrowscrollbox>
@@ -101,12 +103,16 @@
<label data-l10n-id="private-browsing-indicator-label"></label>
</hbox>
- <hbox class="titlebar-spacer" type="pre-tabs"/>
-
<hbox flex="1" align="end" class="toolbar-items">
<toolbartabstop/>
<hbox id="TabsToolbar-customization-target" flex="1">
@@ -107,6 +105,7 @@
+#if 0
#include titlebar-items.inc.xhtml
+#endif
+#include zen-sidebar-icons.inc.xhtml
</toolbar>
</vbox>
@@ -19,7 +38,7 @@ index dce7bacdb3678a95dc97085390a7e6102090ffb2..5e3c40b384e4643b6865c4fab3d0bcea
<toolbar id="nav-bar"
class="browser-toolbar"
data-l10n-id="navbar-accessible"
@@ -575,7 +574,7 @@
@@ -575,7 +581,7 @@
<html:template id="tab-notification-deck-template">
<html:named-deck id="tab-notification-deck"></html:named-deck>
</html:template>

58
src/browser/base/content/tabbrowser-tabs-js.patch Normal file
View File

@@ -0,0 +1,58 @@
diff --git a/browser/base/content/tabbrowser-tabs.js b/browser/base/content/tabbrowser-tabs.js
index 4733e6d0b66f254c72a592bf3eabeb1a939e76fa..b7256bec7d0da3ce065c005ba857a4317bf0d714 100644
--- a/browser/base/content/tabbrowser-tabs.js
+++ b/browser/base/content/tabbrowser-tabs.js
@@ -743,7 +743,7 @@
if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
for (let tab of movingTabs) {
tab.toggleAttribute("tabdrop-samewindow", true);
- tab.style.transform = "translateX(" + newTranslateX + "px)";
+ tab.style.transform = "translateY(" + newTranslateX + "px)";
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
@@ -1126,10 +1126,13 @@
}
_initializeArrowScrollbox() {
+ this.toggleAttribute("overflow", true);
+
let arrowScrollbox = this.arrowScrollbox;
arrowScrollbox.shadowRoot.addEventListener(
"underflow",
event => {
+ return;
// Ignore underflow events:
// - from nested scrollable elements
// - for vertical orientation
@@ -1542,7 +1545,7 @@
translateX = Math.min(Math.max(translateX, leftBound), rightBound);
for (let tab of movingTabs) {
- tab.style.transform = "translateX(" + translateX + "px)";
+ tab.style.transform = "translateY(" + translateX + "px)";
}
draggedTab._dragData.translateX = translateX;
@@ -1602,7 +1605,7 @@
for (let tab of tabs) {
if (tab != draggedTab) {
let shift = getTabShift(tab, newIndex);
- tab.style.transform = shift ? "translateX(" + shift + "px)" : "";
+ tab.style.transform = shift ? "translateY(" + shift + "px)" : "";
}
}
@@ -1683,9 +1686,9 @@
// Slide the relevant tabs to their new position.
for (let t of this._getVisibleTabs()) {
- if (t.groupingTabsData && t.groupingTabsData.translateX) {
- let translateX = (RTL_UI ? -1 : 1) * t.groupingTabsData.translateX;
- t.style.transform = "translateX(" + translateX + "px)";
+ if (t.groupingTabsData && t.groupingTabsData.translateY) {
+ let translateX = (RTL_UI ? -1 : 1) * t.groupingTabsData.translateY;
+ t.style.transform = "translateY(" + translateX + "px)";
}
}

1
src/browser/base/content/zen-sidebar-box.inc.xhtml
View File

@@ -10,6 +10,5 @@
<toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button" oncommand="SidebarUI.hide();"/>
</box>
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
#include zen-sidebar-icons.inc.xhtml
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>

8
src/browser/components/tabpreview/tabpreview-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabpreview/tabpreview.css b/browser/components/tabpreview/tabpreview.css
index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a5125b83704 100644
index 8b288cb95da0e5fe307437e300d2c03ae19ab397..d03cbf2b15b62b3865be9caa63ad5c52633df3c2 100644
--- a/browser/components/tabpreview/tabpreview.css
+++ b/browser/components/tabpreview/tabpreview.css
@@ -3,9 +3,9 @@
@@ -10,7 +10,7 @@ index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a51
+ background-color: #fdfdfd;
color: #15141a;
- border-radius: 9px;
+ border-radius: 5px;
+ border-radius: 7px;
display: inline-block;
width: 280px;
overflow: hidden;
@@ -34,7 +34,7 @@ index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a51
+
+.tab-preview-container {
+ --zen-border-color: #bdbcbc;
+ border: 2px solid var(--zen-border-color);
+ border: 1px solid var(--zen-border-color);
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+}
+
@@ -46,5 +46,5 @@ index 8b288cb95da0e5fe307437e300d2c03ae19ab397..93827f8088fc21db201f69aee1517a51
+
+.tab-preview-thumbnail-container img,
+.tab-preview-thumbnail-container canvas {
+ border-top: 2px solid var(--zen-border-color);
+ border-top: 1px solid var(--zen-border-color);
+}

123
src/browser/themes/shared/zen-browser-shared.css
View File

@@ -20,10 +20,6 @@
--fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
}
#navigator-toolbox toolbar#TabsToolbar {
margin: 10px var(--zen-appcontent-separator-from-window);
}
#PersonalToolbar {
/*border-top: 1px solid light-dark(#ddd, #4a4a4a);*/
padding: 5px 0;
@@ -123,13 +119,118 @@ toolbar .toolbarbutton-1 {
}
}
.tabbrowser-tab {
animation: zen-jello-animation 0.2s ease-in-out;
animation-delay: 0.1s;
}
/* Toolbars customization */
#TabsToolbar-customization-target {
#titlebar {
height: 100%;
}
#navigator-toolbox toolbar#TabsToolbar {
margin: var(--zen-appcontent-separator-from-window);
background: var(--sidebar-background-color);
box-shadow: var(--zen-sidebar-box-shadow) !important;
overflow: hidden;
transition: .2s;
border: 1px solid var(--zen-dialog-border-color);
border-radius: 15px !important;
flex-direction: column !important;
padding: 5px 0;
margin-right: 0 !important;
-moz-window-dragging: no-drag;
}
#TabsToolbar-customization-target {
flex-direction: column;
}
toolbarbutton#scrollbutton-down,
toolbarbutton#scrollbutton-up {
display: none !important;
}
#toolbar-menubar {
display: none;
}
.tab-label-container {
display: none;
}
.tab-icon-stack > .tab-icon-image,
.tab-icon-stack > .tab-throbber {
width: var(--zen-browser-tab-icon-size);
height: var(--zen-browser-tab-icon-size);
margin-inline-end: 0 !important;
}
.tab-background {
display: none;
}
.tabbrowser-tab {
--zen-browser-tab-icon-size: 18px;
--tab-min-width: 0 !important;
box-shadow: none !important;
margin: 5px auto !important;
border-radius: 50%;
position: relative;
color-scheme: var(--tab-selected-color-scheme);
background: light-dark(#ececec, #4a4a4a);
border: 2px solid transparent;
display: flex;
padding: 0 !important;
align-items: center;
}
.tab-stack {
width: 30px;
height: 30px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.tabbrowser-tab:is([multiselected="true"], [selected]) {
border-color: var(--color-accent-primary);
}
.tab-close-button {
position: absolute;
display: none;
left: 50%;
top: 50%;
}
.tabbrowser-tab:hover .tab-close-button {
display: none; /* TODO: fix this? or maybe not? */
}
.tab-content {
padding: 0 !important;
width: fit-content;
}
.toolbar-items > toolbartabstop:first-child {
display: none;
}
#tabbrowser-tabs {
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
border: none !important;
/*background: light-dark(rgba(0,0,0,.05), rgba(255,255,255,.05));*/
margin: 0 !important;
border-radius: 5px;
border: 1px solid var(--zen-dialog-border-color);
}
/* Title bar */
#zen-titlebar-items-container {
width: 100%;
display: flex;
align-items: center;
justify-content: end;
-moz-window-dragging: drag;
}

48
src/browser/themes/shared/zen-sidebar.css
View File

@@ -1,16 +1,15 @@
:root {
--sidebar-background-color: var(--toolbar-bgcolor) !important;
--zen-sidebar-box-shadow: 0 1px 4px var(--color-black-a10);
--zen-sidebar-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
#sidebar-box {
margin: var(--zen-appcontent-separator-from-window) !important;
border-radius: 0 15px 15px 0 !important;
border-radius: 15px !important;
box-shadow: var(--zen-sidebar-box-shadow) !important;
overflow: hidden;
transition: .2s;
border: 1px solid var(--zen-dialog-border-color);
margin-left: 0 !important;
}
#sidebar-splitter {
@@ -28,29 +27,6 @@
margin-right: 0 !important;
}
#sidebar-box[hidden="true"] {
display: flex !important;
flex-direction: column;
min-width: 0 !important;
width: 50px !important;
align-items: center;
}
#sidebar-box[hidden="true"] > *:not(#zen-sidebar-icons-wrapper) {
display: none !important;
}
#sidebar-box[hidden="true"] #zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
padding: 3px;
height: 100%;
position: relative;
background: transparent !important;
align-items: center;
justify-content: end;
}
.zen-sidebar-action-button {
width: 40px;
height: 40px;
@@ -59,9 +35,15 @@
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
#TabsToolbar .toolbarbutton-1 > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button {
border-radius: 10px !important;
}
#TabsToolbar .toolbarbutton-1:hover > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
#TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack),
.zen-sidebar-action-button:hover,
.zen-sidebar-action-button[open="true"] {
background: var(--toolbarbutton-hover-background);
@@ -142,3 +124,15 @@
#zen-sidebar-icons-wrapper toolbarbutton {
position: relative;
}
#zen-sidebar-icons-wrapper {
display: flex;
flex-direction: column;
padding: 0 3px;
height: 100%;
position: relative;
background: transparent !important;
align-items: center;
justify-content: end;
}

4
src/toolkit/content/zen-xul.css
View File

@@ -3,7 +3,8 @@
:root {
--zen-main-browser-background: light-dark(#ddd, #4a4a4a);
--zen-appcontent-separator-from-window: 7px;
--zen-appcontent-separator-from-window-single: 7px;
--zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
}
toolbox#navigator-toolbox,
@@ -25,7 +26,6 @@ html#main-window > body {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
border: 1px solid var(--zen-dialog-border-color);
margin: var(--zen-appcontent-separator-from-window);
margin-top: 0;
}