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

Show panel and website controls for website side panels

Browse Source
This commit is contained in:
Mauro Balades
2024-04-26 17:59:41 +02:00
parent 972db98986
commit 3c52bbbba6
10 changed files with 158 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/browser/base/content/ZenSidebarManager.mjs
View File

@@ -1,6 +1,7 @@
var ZenSidebarManager = {
_sidebarElement: null,
_currentPanel: null,
init() {
this.update();
@@ -34,21 +35,79 @@ var ZenSidebarManager = {
let button = document.createXULElement("toolbarbutton");
button.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional");
button.setAttribute("flex", "1");
button.setAttribute("zen-sidebar-id", site);
button.style.listStyleImage = this._getWebPanelIcon(panel.url);
button.addEventListener("click", this._handleClick.bind(this));
this.sidebarElement.appendChild(button);
}
},
_openAndGetWebPanelWrapper() {
let sidebar = document.getElementById("zen-sidebar-web-panel");
sidebar.removeAttribute("hidden");
return sidebar;
},
_closeSidebarPanel() {
let sidebar = document.getElementById("zen-sidebar-web-panel");
sidebar.setAttribute("hidden", "true");
},
_handleClick(event) {
let target = event.target;
let panelId = target.getAttribute("zen-sidebar-id");
if (this._currentPanel === panelId) {
return;
}
this._currentPanel = panelId;
this._updateButtons();
this._updateWebPanel();
},
_updateButtons() {
for (let button of this.sidebarElement.querySelectorAll(".zen-sidebar-panel-button")) {
if (button.getAttribute("zen-sidebar-id") === this._currentPanel) {
button.setAttribute("selected", "true");
} else {
button.removeAttribute("selected");
}
}
},
_updateWebPanel() {
let sidebar = this._openAndGetWebPanelWrapper();
},
_getWebPanelIcon(url) {
return `url(page-icon:${url})`;
},
reload() {
},
forward() {
},
back() {
},
home() {
},
close() {
this._closeSidebarPanel();
},
get sidebarElement() {
if (!this._sidebarElement) {
this._sidebarElement = document.getElementById("zen-sidebar-panels-wrapper");
}
return this._sidebarElement;
}
},
};
ZenSidebarManager.init();

6
src/browser/base/content/browser-box-inc-xhtml.patch
View File

@@ -1,8 +1,8 @@
diff --git a/browser/base/content/browser-box.inc.xhtml b/browser/base/content/browser-box.inc.xhtml
index d445abe7e743b2ec5d46d42f8f149c000e3c7997..9ef4a0be1dbfc8fd50b57118b59304ef34597364 100644
index d445abe7e743b2ec5d46d42f8f149c000e3c7997..6b310b355fce987ab0996e05a5f80148e4a6feb4 100644
--- a/browser/base/content/browser-box.inc.xhtml
+++ b/browser/base/content/browser-box.inc.xhtml
@@ -2,27 +2,18 @@
@@ -2,27 +2,20 @@
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -29,6 +29,8 @@ index d445abe7e743b2ec5d46d42f8f149c000e3c7997..9ef4a0be1dbfc8fd50b57118b59304ef
<!-- gNotificationBox will be added here lazily. -->
- <tabbox id="tabbrowser-tabbox"
+ <hbox id="zen-tabbox-wrapper" flex="1">
+#include zen-sidebar-panel.inc.xhtml
+
+ <tabbox id="tabbrowser-tabbox"
flex="1" tabcontainer="tabbrowser-tabs">
<tabpanels id="tabbrowser-tabpanels"

9
src/browser/base/content/zen-sidebar-panel.inc.xhtml Normal file
View File

@@ -0,0 +1,9 @@
<box id="zen-sidebar-web-panel" hidden="true" class="chromeclass-extrachrome">
<toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
<toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.back();"/>
<toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.forward();"/>
<toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.reload();"/>
<toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.home();"/>
<toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.hide();"/>
</toolbar>
</box>

2
src/browser/base/content/zenThemeModifier.js
View File

@@ -94,6 +94,8 @@
const kInlineIndicatorElements = [
"nav-bar",
"tabbrowser-tabbox",
"zen-sidebar-web-panel",
"appcontent",
...kElementsToAppend,
];
const wrapper = document.getElementById("zen-tabbox-wrapper");

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

@@ -420,7 +420,6 @@ panelmultiview {
}
#tabbrowser-tabbox[inlinedwithsidebar="true"] #tabbrowser-tabpanels {
--zen-browser-border-radius: 10px;
margin: 0 10px 10px 0;
border-radius: var(--zen-browser-border-radius);
border: 1px solid light-dark(#ddd, #4a4a4a);

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

@@ -9,20 +9,24 @@
border-radius: 100% !important;
}
#back-button {
#back-button,
#zen-sidebar-web-panel-back {
list-style-image: url("back.svg") !important;
}
#forward-button {
#forward-button,
#zen-sidebar-web-panel-forward {
list-style-image: url("forward.svg") !important;
}
#reload-button {
#reload-button,
#zen-sidebar-web-panel-reload {
list-style-image: url("reload.svg") !important;
}
#stop-button,
.close-icon {
.close-icon,
#zen-sidebar-web-panel-close {
list-style-image: url("close.svg") !important;
}
@@ -230,7 +234,8 @@
list-style-image: url("bookmark-star-on-tray.svg") !important;
}
#home-button {
#home-button,
#zen-sidebar-web-panel-home {
list-style-image: url("home.svg") !important;
}
@@ -520,6 +525,11 @@
> #reload-button[displaystop]
+ #stop-button
> .toolbarbutton-animatable-box
> .toolbarbutton-animatable-image,
#zen-sidebar-web-panel-reload[animate]
> #zen-sidebar-web-panel-reload-button[displaystop]
+ #zen-sidebar-web-panel-stop-button
> .toolbarbutton-animatable-box
> .toolbarbutton-animatable-image {
background-image: url("reload-to-stop.svg") !important;
}
@@ -527,6 +537,10 @@
#stop-reload-button[animate]
> #reload-button
> .toolbarbutton-animatable-box
> .toolbarbutton-animatable-image,
#zen-sidebar-web-panel-reload[animate]
> #zen-sidebar-web-panel-reload-button
> .toolbarbutton-animatable-box
> .toolbarbutton-animatable-image {
background-image: url("stop-to-reload.svg") !important;
}

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

@@ -1,6 +1,6 @@
#zen-sidebar-panels-wrapper {
min-height: 500px;
/*min-height: 500px;*/
display: flex;
flex-direction: column;
align-items: center;
@@ -21,12 +21,65 @@
.zen-sidebar-panel-button image {
border-radius: 15px !important;
background: var(--toolbarbutton-hover-background);
border: 2px solid transparent;
}
.zen-sidebar-panel-button:hover image {
background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent);
}
.zen-sidebar-panel-button {
margin-bottom: 5px !important;
.zen-sidebar-panel-button,
.zen-sidebar-panel-button image {
margin-bottom: 7px !important;
}
.zen-sidebar-panel-button[selected="true"] image {
border-color: var(--zen-primary-color);
}
/** Sidebar view */
#zen-sidebar-web-panel {
--zen-default-sidebar-width: 300px;
width: calc(var(--zen-default-sidebar-width) + 100px);
border-radius: var(--zen-browser-border-radius);
overflow: hidden;
margin: var(--zen-appcontent-separator-from-window);
border: var(--zen-appcontent-border);
min-width: var(--zen-default-sidebar-width);
background: var(--zen-colors-tertiary);
animation: zen-sidebar-panel-animation 0.3s ease-in-out;
}
#zen-sidebar-web-panel[inlinedwithsidebar="true"] {
margin: 0 10px 10px 0;
}
@keyframes zen-sidebar-panel-animation {
0% {
opacity: 0;
transform: scale3d(0.9, 0.9, 0.9);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
#zen-sidebar-web-header {
width: 100%;
height: 50px;
display: flex;
align-items: center;
padding: 0 5px;
border: var(--zen-appcontent-border);
border-width: 0 !important;
border-bottom-width: 1px !important;
background: transparent;
position: relative;
}
#zen-sidebar-web-panel-close {
margin-left: auto !important;
}

3
src/toolkit/content/zen-fullscreen-override.css
View File

@@ -1,5 +1,6 @@
[inDOMFullscreen="true"] #nav-bar {
[inDOMFullscreen="true"] #nav-bar,
[inDOMFullscreen="true"] #zen-sidebar-web-panel {
display: none !important;
}

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

@@ -7,6 +7,7 @@
--zen-appcontent-separator-from-window: var(--zen-appcontent-separator-from-window-single);
--zen-appcontent-border-radius: var(--zen-panel-radius);
--zen-appcontent-border: 1px solid light-dark(#ddd, #4a4a4a);
--zen-browser-border-radius: 10px;
}
toolbox#navigator-toolbox,
@@ -28,6 +29,10 @@ html#main-window > body {
margin: var(--zen-appcontent-separator-from-window);
}
#appcontent[inlinedwithsidebar="true"] {
background: var(--toolbar-bgcolor);
}
:not([inDOMFullscreen="true"]) #appcontent,
#sidebar-box,
#navigator-toolbox:not([inlinedwithsidebar="true"]) #TabsToolbar {

1
src/toolkit/themes/shared/zen-popup.css
View File

@@ -243,6 +243,7 @@ toolbarbutton:not(:is(
.zen-sidebar-action-button,
.all-tabs-close-button,
.zen-sidebar-panel-button,
#zen-sidebar-web-panel-close,
#PanelUI-zen-profiles-managePrfs
)),
#PanelUI-zen-profiles menuitem {