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

feat: Add Essentials Toolbar and hide Accordion Header in compact mode

Browse Source 
- Added the Essentials Toolbar to the Navigator Toolbox
- Removed the Essentials Toolbar from ZenStartup and created it in browser-places.js
- Updated the zen-styles/zen-sidebar.css file to remove the display of the Menubar
- Updated the navigator-toolbox.inc.xhtml file to add the Essentials Toolbar and hide the Accordion Header in compact mode
- Updated the indicator-private-browsing.svg file to include the private browsing indicator icon
This commit is contained in:
mr. M
2024-11-03 02:08:51 +01:00
parent 0603c57a60
commit de3962412f
6 changed files with 92 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/browser/base/content/browser-places-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js
index 62b3665394a8256ebedf88a8f10bb6766977cf57..a0bee37cbf9e8f79b3ea69b8dec711a93ef837a0 100644
index 62b3665394a8256ebedf88a8f10bb6766977cf57..9a5985ceeaa1d228cb167e60c0e6c8402533d227 100644
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -252,6 +252,8 @@ var StarUI = {
@@ -33,16 +33,11 @@ index 62b3665394a8256ebedf88a8f10bb6766977cf57..a0bee37cbf9e8f79b3ea69b8dec711a9
removeBookmarkButtonCommand: function SU_removeBookmarkButtonCommand() {
this._removeBookmarksOnPopupHidden = true;
this.panel.hidePopup();
@@ -1107,6 +1124,12 @@ var PlacesToolbarHelper = {
viewElt
);
+ new ZenEssentialsToolbar(
+ `place:parent=pfgqteRgY-Wr`,
+ document.getElementById("EssentialsToolbarItems"),
+ document.getElementById("EssentialsToolbar")
+ );
+
if (toolbar.id == "PersonalToolbar") {
// We just created a new view, thus we must check again the empty toolbar
// message, regardless of "initialized".
@@ -1063,6 +1080,7 @@ var PlacesToolbarHelper = {
* show toolbars.
*/
async init() {
+ new ZenEssentialsToolbar(`place:parent=pfgqteRgY-Wr`);
await PlacesUIUtils.canLoadToolbarContentPromise;
this._realInit();
},

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

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 12fa0cf79aade28581016adf96df85386dabdcef..b2a29b4c9a61ee8380076a0bcc517f3cf217528a 100644
index 12fa0cf79aade28581016adf96df85386dabdcef..8ad1d14884e8698437ebf0d1f41a16fe654515d2 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -36,40 +36,16 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..b2a29b4c9a61ee8380076a0bcc517f3c
stopwatchid="FX_TAB_CLICK_MS">
<hbox class="tab-drop-indicator" hidden="true"/>
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
@@ -58,8 +59,31 @@
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
@@ -59,7 +60,7 @@
# the current structure that we may want to revisit.
<html:div id="vertical-pinned-tabs-container"></html:div>
+ <toolbarbutton id="essentials-accordion-header" oncommand="gZenBrowserManagerSidebar.toggleEssentialsAccordion(this)">
+ Essentials
+ <toolbarbutton id="essentials-accordion-icon">
+ <image></image>
+ </toolbarbutton>
+ <html:div class="accordion-header-line"></html:div>
+ </toolbarbutton>
+ <hbox
+ id="EssentialsToolbar"
+ context="placesContext"
+ onmouseup="BookmarksEventHandler.onMouseUp(event);"
+ onclick="BookmarksEventHandler.onClick(event, this._placesView);"
+ oncommand="BookmarksEventHandler.onCommand(event);"
+ tooltip="bhTooltip"
+ popupsinherittooltip="true">
+ <hbox id="EssentialsToolbarDropIndicatorHolder" align="center" collapsed="true">
+ <image id="EssentialsToolbarDropIndicator"
+ collapsed="true"/>
+ </hbox>
+ <scrollbox orient="vertical"
+ id="EssentialsToolbarItems"
+ flex="1"/>
+ </hbox>
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
- <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
+ <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="vertical" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
@@ -113,9 +137,10 @@
@@ -113,9 +114,10 @@
<toolbarbutton id="content-analysis-indicator"
oncommand="ContentAnalysis.showPanel(this, PanelUI);"
class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -82,7 +58,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..b2a29b4c9a61ee8380076a0bcc517f3c
</toolbar>
</vbox>
@@ -531,6 +556,7 @@
@@ -531,6 +533,7 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>

2
src/browser/base/content/zen-components

Submodule src/browser/base/content/zen-components updated: f49c256194...c83a7aa58a

77
src/browser/base/content/zen-styles/zen-sidebar.css
View File

@@ -72,79 +72,4 @@
/* Menubar */
#toolbar-menubar {
display: none !important;
}
/* Essentials styles */
#EssentialsToolbar {
border-bottom: 1px solid var(--zen-colors-border);
padding-bottom: 6px;
& .bookmark-item {
max-width: unset;
padding: 8px;
gap: 8px;
& .toolbarbutton-icon {
width: 20px;
height: 20px;
}
}
overflow: hidden;
}
#essentials-accordion-header {
display: flex;
align-items: center;
justify-content: start;
background: none !important;
border: none !important;
appearance: unset !important;
padding: 4px 8px;
gap: 6px;
cursor: pointer;
width: 100%;
transition: 0.3s;
}
.accordion-header-line {
flex: 1;
height: 1px;
width: 100%;
background-color: currentColor;
}
#essentials-accordion-header[expanded] #essentials-accordion-icon image {
transform: rotate(90deg);
}
#essentials-accordion-icon {
width: 12px;
height: 12px;
appearance: none !important;
color:inherit !important;
-moz-context-properties: fill, fill-opacity !important;
fill: currentColor !important;
& image {
color: inherit !important;
list-style-image: url("chrome://global/skin/icons/chevron.svg") !important;
transition: transform 0.3s ease;
appearance: unset !important;
}
}
#EssentialsToolbarItems {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 4px;
opacity: 0;
}
#EssentialsToolbarItems[expanded] {
opacity: 1;
}
#EssentialsToolbarItems .bookmark-item {
max-width: unset;
}
}

161
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -20,7 +20,10 @@
}
#vertical-pinned-tabs-container-separator {
display: none !important; /* We never needed you, go away! */
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
margin: var(--zen-toolbox-padding) 0;
border: none;
height: 1px;
}
#navigator-toolbox {
@@ -149,10 +152,6 @@
--toolbarbutton-inner-padding: 0 !important;
}
}
&[pinned] .tabbrowser-tab {
display: none;
}
}
}
@@ -180,26 +179,13 @@
#vertical-pinned-tabs-container {
padding-inline-end: 0 !important;
column-gap: 2px !important;
row-gap: 3px !important;
max-height: unset !important;
overflow: visible !important;
display: flex !important;
flex-direction: column;
@media not (prefers-color-scheme: dark) {
--zen-colors-border: var(--zen-colors-tertiary);
}
& .tab-background:not(:hover):not([selected]):not([multiselected]) {
--zen-pinned-tabs-bgcolor: rgba(255, 255, 255, 0.12);
@media not (prefers-color-scheme: dark) {
--zen-pinned-tabs-bgcolor: rgba(1, 1, 1, 0.075);
}
background: var(--zen-pinned-tabs-bgcolor) !important;
backdrop-filter: blur(10px);
}
&[selected] {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05);
&:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent !important;
}
& .tabbrowser-tab .tab-content {
@@ -207,6 +193,29 @@
align-items: center;
justify-content: center;
}
& .tab-label-container {
display: flex !important;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
}
.tabbrowser-tab:is(:hover, [visuallyselected], [selected]) {
& .tab-close-button {
display: block;
--tab-inline-padding: 0; /* Avoid weird padding */
}
}
.tabbrowser-tab[zen-glance-tab='true'] {
width: fit-content !important;
}
}
/* Mark: toolbox as expanded */
@@ -251,22 +260,8 @@
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
margin-bottom: 12px;
position: relative;
/*TODO: figure out if we want this line*/
/*&::after {*/
/* bottom: -6px;*/
/* content: '';*/
/* display: block;*/
/* height: 1px;*/
/* background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));*/
/* width: 99%;*/
/* left: 50%;*/
/* transform: translateX(-50%);*/
/* position: absolute;*/
/*}*/
& .tabbrowser-tab {
width: 100%;
}
@@ -454,21 +449,8 @@
}
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
margin-bottom: 12px;
position: relative;
&::after {
bottom: -6px;
content: '';
display: block;
height: 1px;
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
width: 70%;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
& .tabbrowser-tab {
max-width: var(--tab-min-width);
}
@@ -522,12 +504,6 @@
}
}
#vertical-pinned-tabs-container {
display: flex;
flex-direction: column;
gap: 0 !important;
}
@media (-moz-bool-pref: 'zen.view.sidebar-collapsed.hide-mute-button') {
& .tab-icon-overlay:is([soundplaying], [muted]):not([selected]) {
display: none !important;
@@ -658,35 +634,6 @@
}
}
/* Make pinned tabs stay in a single line */
#vertical-pinned-tabs-container {
display: flex;
flex-direction: column;
gap: 0 !important;
position: relative;
& .tabbrowser-tab {
& .tab-label-container {
display: flex;
}
& .tab-throbber,
& .tab-icon-pending,
& .tab-icon-image,
& .tab-sharing-icon-overlay,
& .tab-icon-overlay {
margin-inline-end: var(--toolbarbutton-inner-padding) !important;
}
&:not(:hover):not([selected]):not([multiselected]) .tab-background {
box-shadow: none;
background: transparent !important;
}
}
}
&[zen-right-side='true'] #TabsToolbar {
right: 0;
border-top-left-radius: var(--zen-border-radius);
@@ -720,7 +667,7 @@
#tabbrowser-tabs {
& .tabbrowser-tab {
&[pinned] .tab-close-button {
display: none !important;
display: none;
}
&[selected] .tab-background {
@@ -809,3 +756,47 @@
}
}
}
/* Mark: Essentials Toolbar */
#EssentialsToolbar {
border-bottom: 1px solid light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.075));
padding-bottom: var(--zen-toolbox-padding);
margin-bottom: var(--zen-toolbox-padding);
& .bookmark-item {
max-width: unset;
padding: 10px 0;
gap: 8px;
}
overflow: hidden;
}
#EssentialsToolbarItems {
overflow: hidden;
transition: max-height 0.3s ease-out;
opacity: 1;
grid-template-columns: repeat(auto-fit, minmax(var(--tab-pinned-min-width-expanded), auto));
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
display: grid;
padding: 0;
}
#EssentialsToolbarItems .bookmark-item {
max-width: unset;
border-radius: var(--border-radius-medium);
--zen-essential-tabs-bgcolor: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.12));
background: var(--tab-hover-background-color);
&:hover {
background: var(--zen-essential-tabs-bgcolor) !important;
}
backdrop-filter: blur(10px);
& label {
display: none !important;
}
}

1
src/toolkit/themes/shared/icons/indicator-private-browsing.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.b{fill:#8000d7;}.b,.c{stroke-width:0px;}.c{fill:#fff;}</style></defs><circle class="b" cx="10" cy="10" r="9.5"/><path class="c" d="M12.7711,11.1656c-1.1727,0-2.1528.798-2.4543,1.876h-.634c-.3015-1.078-1.2816-1.876-2.4543-1.876-1.4113,0-2.5595,1.1492-2.5595,2.5606s1.1482,2.5596,2.5595,2.5596c1.1727,0,2.1528-.7973,2.4543-1.875h.634c.3015,1.0777,1.2816,1.875,2.4543,1.875,1.4114,0,2.5606-1.1483,2.5606-2.5596s-1.1492-2.5606-2.5606-2.5606ZM7.2284,14.9166c-.6568,0-1.1913-.5334-1.1913-1.1903s.5345-1.1914,1.1913-1.1914c.6564,0,1.1909.5345,1.1909,1.1914s-.5345,1.1903-1.1909,1.1903ZM12.7711,14.9166c-.6569,0-1.1904-.5334-1.1904-1.1903s.5335-1.1914,1.1904-1.1914,1.1914.5345,1.1914,1.1914-.5345,1.1903-1.1914,1.1903ZM16.3154,8.9273h-1.4463l-.6548-4.6247c-.0298-.2092-.1542-.3932-.3382-.498-.184-.1043-.407-.1198-.6003-.038l-3.276,1.3538-3.2761-1.3538c-.1953-.0817-.4178-.0668-.6003.038-.184.1049-.3084.2889-.3382.498l-.6543,4.6247h-1.4468c-.3777,0-.6841.3063-.6841.6841s.3063.6841.6841.6841h12.6313c.3783,0,.6846-.3063.6846-.6841s-.3063-.6841-.6846-.6841ZM7.0167,5.3681l2.722,1.1245c.1665.0699.3557.0699.5222,0l2.722-1.1245.5042,3.5592h-6.9741l.5038-3.5592Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB