mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-07 05:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: Update CSS styles for Zen Browser sidebar and tabpanels

Browse Source
This commit is contained in:
Mauro Balades
2024-07-04 23:43:01 +02:00
parent 1726723f5f
commit 732d1e7a37
7 changed files with 239 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/browser/base/content/ZenViewSplitter.mjs
View File

@@ -8,7 +8,7 @@ var gZenViewSplitter = {
* tab2,
* tab3,
* ],
* gridType: "vsplit" | "hsplit" | "grid",
* gridType: "vsep" | "hsep" | "grid",
* }
* ]
*/
@@ -45,10 +45,14 @@ var gZenViewSplitter = {
dataTab.splice(dataTab.indexOf(tab), 1);
tab._zenSplitted = false;
tab.linkedBrowser.zenModeActive = false;
tab.linkedBrowser.docShellIsActive = false;
let container = tab.linkedBrowser.closest(".browserSidebarContainer");
container.removeAttribute("zen-split");
container.style.display = "none";
if (!event.forUnsplit) {
tab.linkedBrowser.docShellIsActive = false;
container.style.display = "none";
} else {
container.style.gridArea = "1 / 1";
}
if (dataTab.length < 2) {
this._data.splice(index, 1);
if (this.currentView == index) {
@@ -61,7 +65,8 @@ var gZenViewSplitter = {
for (const tab of dataTab) {
let container = tab.linkedBrowser.closest(".browserSidebarContainer");
container.removeAttribute("zen-split");
container.style.gridArea = "1 / 1";
container.style.gridArea = "1 / 1";
tab._zenSplitted = false;
}
}
return;
@@ -72,6 +77,7 @@ var gZenViewSplitter = {
onLocationChange(browser) {
let tab = gBrowser.getTabForBrowser(browser);
this.updateSplitViewButton(!(tab && tab._zenSplitted));
if (!tab) {
return;
}
@@ -85,6 +91,7 @@ var gZenViewSplitter = {
}
this._data.push({
tabs,
gridType: "grid",
});
gBrowser.selectedTab = tabs[0];
this._showSplitView(tabs[0]);
@@ -110,6 +117,7 @@ var gZenViewSplitter = {
})
};
if (!splitData || (this.currentView >= 0 && !this._data[this.currentView].tabs.includes(tab))) {
this.updateSplitViewButton(true);
if (this.currentView < 0) {
return;
}
@@ -176,8 +184,13 @@ var gZenViewSplitter = {
if (currentRowGridArea[1] != "") {
this.tabBrowserPanel.style.gridTemplateAreas += ` '${currentRowGridArea[1]}'`;
}
} else if (gridType == "vsep") {
this.tabBrowserPanel.style.gridTemplateAreas = `'${splitData.tabs.map((_, i) => `tab${i + 1}`).join(" ")}'`;
} else if (gridType == "hsep") {
this.tabBrowserPanel.style.gridTemplateAreas = `${splitData.tabs.map((_, i) => `'tab${i + 1}'`).join(" ")}`;
}
modifyDecks(splitData.tabs, true);
this.updateSplitViewButton(false);
},
contextSplitTabs() {
@@ -197,6 +210,62 @@ var gZenViewSplitter = {
}
return true;
},
// Panel and url button
updateSplitViewButton(hidden) {
let button = document.getElementById("zen-split-views-box");
if (hidden) {
button.setAttribute("hidden", "true");
return;
}
button.removeAttribute("hidden");
},
get _modifierElement() {
if (!this.__modifierElement) {
let wrapper = document.getElementById("template-zen-split-view-modifier");
const panel = wrapper.content.firstElementChild;
wrapper.replaceWith(wrapper.content);
this.__modifierElement = panel;
}
return this.__modifierElement;
},
async openSplitViewPanel(event) {
let panel = this._modifierElement;
let target = event.target.parentNode;
for (const gridType of ["hsep", "vsep", "grid", "unsplit"]) {
let selector = panel.querySelector(`.zen-split-view-modifier-preview.${gridType}`);
selector.classList.remove("active");
if (this.currentView >= 0 && this._data[this.currentView].gridType == gridType) {
selector.classList.add("active");
}
if (this.__hasSetMenuListener) {
continue;
}
selector.addEventListener("click", ((gridType) => {
if (gridType === "unsplit") {
let tabs = this._data[this.currentView].tabs;
for (const tab of tabs) {
this.onTabClose({ target: tab, forUnsplit: true });
}
gBrowser.selectedTab = tabs[0];
panel.hidePopup();
this.updateSplitViewButton(true);
return;
}
this._data[this.currentView].gridType = gridType;
this._showSplitView(gBrowser.selectedTab);
panel.hidePopup();
}).bind(this, gridType));
}
this.__hasSetMenuListener = true;
PanelMultiView.openPopup(panel, target, {
position: "bottomright topright",
triggerEvent: event,
}).catch(console.error);
},
};
gZenViewSplitter.init();

14
src/browser/base/content/browser-css.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa91ad27893 100644
index 6e776a9ce7c525e510b6466065daf755b21567a4..8668b27ec2126ed772a11aa77809b6f22ceab7e2 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -2,6 +2,8 @@
@@ -20,7 +20,13 @@ index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa9
}
:root[uidensity=touch] .tabbrowser-tab:not([pinned]) {
@@ -659,7 +659,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
@@ -647,12 +647,12 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
margin-inline-start: 0;
}
-#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action,
+#urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action:not(#zen-split-views-box),
#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box),
#urlbar[usertyping] > #urlbar-input-container > #page-action-buttons > #urlbar-zoom-button,
#urlbar:not([usertyping]) > #urlbar-input-container > #urlbar-go-button,
#urlbar:not([focused]) > #urlbar-input-container > #urlbar-go-button {
@@ -29,7 +35,7 @@ index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa9
}
#nav-bar:not([keyNav=true]) #identity-box,
@@ -1244,13 +1244,13 @@ printpreview-pagination:focus-within,
@@ -1237,13 +1237,13 @@ printpreview-pagination:focus-within,
#sidebar-box {
@@ -46,7 +52,7 @@ index c9ebddb7f5c57d00c06bdf303a23085818c78259..f97c3e808d1c42cbce1a538ab7aeefa9
list-style-image: var(--webextension-menuitem-image, inherit);
-moz-context-properties: fill;
fill: currentColor;
@@ -1451,3 +1451,42 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
@@ -1444,3 +1444,42 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
/**
* End Dialogs
*/

21
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 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..eb31df1dc273e1e71a1317e765efe49099a3dd4a 100644
index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..bdcce262b5fc18767efd1054fd724b97c42471e4 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -32,10 +32,11 @@
@@ -44,7 +44,22 @@ index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..eb31df1dc273e1e71a1317e765efe490
</toolbar>
</vbox>
@@ -450,6 +453,7 @@
@@ -409,6 +412,14 @@
<image id="star-button"
class="urlbar-icon"/>
</hbox>
+ <hbox id="zen-split-views-box"
+ hidden="true"
+ role="button"
+ class="urlbar-page-action"
+ onclick="gZenViewSplitter.openSplitViewPanel(event);">
+ <image id="zen-split-views-button"
+ class="urlbar-icon"/>
+ </hbox>
</hbox>
</hbox>
</hbox>
@@ -450,6 +461,7 @@
<toolbarbutton id="fxa-toolbar-menu-button" class="toolbarbutton-1 chromeclass-toolbar-additional subviewbutton-nav"
badged="true"
@@ -52,7 +67,7 @@ index 0a67afa81ff5e10dcbfb53149f7ed9109de084ac..eb31df1dc273e1e71a1317e765efe490
delegatesanchor="true"
onmousedown="gSync.toggleAccountPanel(this, event)"
onkeypress="gSync.toggleAccountPanel(this, event)"
@@ -501,6 +505,8 @@
@@ -501,6 +513,8 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>

50
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -7,4 +7,52 @@
<menuitem id="context_zenOpenNewTabWebPanel" oncommand="gZenBrowserManagerSidebar.contextOpenNewTab();" data-l10n-id="zen-web-side-panel-open-in-new-tab"/>
<menuseparator/>
<menuitem id="context_zenDeleteWebPanel" oncommand="gZenBrowserManagerSidebar.contextDelete();" data-l10n-id="zen-web-side-panel-context-delete"/>
</menupopup>
</menupopup>
<html:template id="template-zen-split-view-modifier">
<panel id="zenSplitViewModifier"
class="panel-no-padding"
orient="vertical"
role="alertdialog"
type="arrow"
aria-labelledby="zen-split-view-modifier-header"
tabspecific="true">
<panelmultiview id="zenSplitViewModifierMultiview"
mainViewId="zenSplitViewModifierViewDefault">
<panelview id="zenSplitViewModifierViewDefault"
class="PanelUI-subView"
role="document"
mainview-with-header="true"
has-custom-header="true">
<vbox>
<box class="zen-split-view-modifier-preview grid">
<box></box>
<box></box>
<box></box>
</box>
<p>Grid Layout</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview hsep">
<box></box>
<box></box>
</box>
<p>Horizontal</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview vsep">
<box></box>
<box></box>
</box>
<p>Vertical</p>
</vbox>
<vbox>
<box class="zen-split-view-modifier-preview unsplit">
<box></box>
</box>
<p>Unsplit</p>
</vbox>
</panelview>
</panelmultiview>
</panel>
</html:template>

6
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -380,6 +380,12 @@
list-style-image: url("bookmark.svg") !important;
}
#zen-split-views-button {
list-style-image: url("link.svg") !important;
fill: var(--toolbarbutton-icon-fill-attention);
fill-opacity: 1;
}
#sidebar-box[sidebarcommand="viewTabsSidebar"]
> #sidebar-header
> #sidebar-switcher-target

81
src/browser/themes/shared/zen-panel-ui.css
View File

@@ -139,3 +139,84 @@
#PanelUI-zen-profiles-managePrfs label {
display: none !important;
}
/* Split view panel */
#zenSplitViewModifierViewDefault {
min-width: 180px;
min-height: 180px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
padding: 15px;
}
#zenSplitViewModifierViewDefault > vbox {
display: flex;
align-items: center;
flex-direction: column;
cursor: pointer;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview {
border-radius: 5px;
border: 1px solid var(--zen-colors-border);
width: 100px;
height: 70px;
overflow: hidden;
padding: 5px;
user-select: none;
font-weight: 500;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.active {
box-shadow: 0 0 0 2px var(--zen-primary-color);
border-width: 0px;
}
#zenSplitViewModifierViewDefault p {
margin-top: 5px;
margin-bottom: 0;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview box {
background-color: var(--zen-colors-secondary);
border-radius: 3px;
width: 100%;
height: 100%;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.hsep box:last-child {
margin-top: 5px;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.vsep box:last-child {
margin-left: 5px;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid {
display: grid;
grid-template-areas: "a b" "c b";
gap: 5px;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(1) {
grid-area: a;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(2) {
grid-area: b;
}
#zenSplitViewModifierViewDefault .zen-split-view-modifier-preview.grid box:nth-child(3) {
grid-area: c;
}

2
src/toolkit/themes/shared/in-content/zen-common-shared.css
View File

@@ -64,6 +64,8 @@
--focus-outline-color: var(--button-bgcolor) !important;
--in-content-button-text-color: var(--zen-secondary-btn-color) !important;
--toolbarbutton-icon-fill-attention: var(--zen-primary-color) !important;
--button-primary-bgcolor: var(--in-content-primary-button-background) !important;
--button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
--button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;