1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 22:45:31 +02:00

Added an opion to remove sidebar panels

This commit is contained in:
Mauro Balades 2024-04-27 19:17:04 +02:00
parent bf5896556d
commit ca3ce58230
7 changed files with 63 additions and 15 deletions

View file

@ -3,10 +3,13 @@ export var gZenBrowserManagerSidebar = {
_sidebarElement: null, _sidebarElement: null,
_currentPanel: null, _currentPanel: null,
_hasRegisteredPinnedClickOutside: false, _hasRegisteredPinnedClickOutside: false,
_firstRun: 0,
_hasChangedConfig: true,
contextTab: null, contextTab: null,
DEFAULT_MOBILE_USER_AGENT: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36 Edg/114.0.1823.79", DEFAULT_MOBILE_USER_AGENT: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36 Edg/114.0.1823.79",
MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button
MAX_RUNS: 3,
init() { init() {
this.update(); this.update();
@ -29,7 +32,9 @@ export var gZenBrowserManagerSidebar = {
}, },
handleEvent() { handleEvent() {
this._hasChangedConfig = true;
this.update(); this.update();
this._hasChangedConfig = false;
if (Services.prefs.getBoolPref("zen.sidebar.pinned") && !this._hasRegisteredPinnedClickOutside) { if (Services.prefs.getBoolPref("zen.sidebar.pinned") && !this._hasRegisteredPinnedClickOutside) {
document.addEventListener("mouseup", this._handleClickOutside.bind(this)); document.addEventListener("mouseup", this._handleClickOutside.bind(this));
@ -79,6 +84,8 @@ export var gZenBrowserManagerSidebar = {
button.setAttribute("flex", "1"); button.setAttribute("flex", "1");
button.setAttribute("zen-sidebar-id", site); button.setAttribute("zen-sidebar-id", site);
button.setAttribute("context", "zenWebPanelContextMenu"); button.setAttribute("context", "zenWebPanelContextMenu");
if (this._firstRun < this.MAX_RUNS || this._hasChangedConfig)
button.setAttribute("animate", "true");
this._getWebPanelIcon(panel.url, button); this._getWebPanelIcon(panel.url, button);
button.addEventListener("click", this._handleClick.bind(this)); button.addEventListener("click", this._handleClick.bind(this));
this.sidebarElement.appendChild(button); this.sidebarElement.appendChild(button);
@ -89,8 +96,13 @@ export var gZenBrowserManagerSidebar = {
addPanelButton.id = "zen-sidebar-add-panel-button"; addPanelButton.id = "zen-sidebar-add-panel-button";
addPanelButton.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional"); addPanelButton.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional");
addPanelButton.addEventListener("click", this._openAddPanelDialog.bind(this)); addPanelButton.addEventListener("click", this._openAddPanelDialog.bind(this));
if (this._firstRun < this.MAX_RUNS || this._hasChangedConfig)
addPanelButton.setAttribute("animate", "true");
this.sidebarElement.appendChild(addPanelButton); this.sidebarElement.appendChild(addPanelButton);
} }
// We rerender multiple times for some reason, so we need to avoid the animation
if (this._firstRun < this.MAX_RUNS)
this._firstRun++;
}, },
async _openAddPanelDialog() { async _openAddPanelDialog() {
@ -191,6 +203,7 @@ export var gZenBrowserManagerSidebar = {
browser.setAttribute("autoscroll", "false"); browser.setAttribute("autoscroll", "false");
browser.setAttribute("autocompletepopup", "PopupAutoComplete"); browser.setAttribute("autocompletepopup", "PopupAutoComplete");
browser.setAttribute("contextmenu", "contentAreaContextMenu"); browser.setAttribute("contextmenu", "contentAreaContextMenu");
browser.setAttribute("disablesecurity", "true");
return browser; return browser;
}, },

View file

@ -54,4 +54,9 @@ Preferences.addAll([
type: "bool", type: "bool",
default: true, default: true,
}, },
{
id: "zen.sidebar.enabled",
type: "bool",
default: true,
},
]); ]);

View file

@ -19,4 +19,20 @@
preference="zen.theme.toolbar-themed"/> preference="zen.theme.toolbar-themed"/>
</groupbox> </groupbox>
<hbox id="zenSidePanelsCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="pane-zen-side-panels-title"/>
</hbox>
<groupbox id="zenSidePanelsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-side-panels-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-side-panels-description" />
<checkbox id="zenLooksAndFeelUseThemedToolbar"
data-l10n-id="zen-side-panels-enabled"
preference="zen.sidebar.enabled"/>
</groupbox>
</html:template> </html:template>

View file

@ -8,3 +8,9 @@ zen-look-and-feel-colors-header = Pick a theme colour
zen-look-and-feel-colors-description = Make { -brand-short-name } look and feel the way you like zen-look-and-feel-colors-description = Make { -brand-short-name } look and feel the way you like
zen-look-and-feel-themed-toolbar = zen-look-and-feel-themed-toolbar =
.label = Make the toolbar themed with the accent color .label = Make the toolbar themed with the accent color
pane-zen-side-panels-title = Side Web Panels
zen-side-panels-header = General settings for web panels
zen-side-panels-description = Increase productivity by having multiple views at once!
zen-side-panels-enabled =
.label = Enable Web Side Panels

View file

@ -286,8 +286,9 @@ toolbarbutton#scrollbutton-up {
animation: zen-slide-in 0.3s; animation: zen-slide-in 0.3s;
} }
.tabbrowser-tab:active { .tabbrowser-tab:active,
transform: scale(0.9); .zen-sidebar-panel-button:active {
transform: scale(0.9) !important;
} }
.tab-stack { .tab-stack {

View file

@ -7,6 +7,11 @@
justify-content: center; justify-content: center;
} }
#zen-sidebar-panels-wrapper[hidden="true"] > * {
/* We still need to have this element in the DOM to satisfy the grid layout */
display: none !important;
}
.zen-sidebar-panel-button { .zen-sidebar-panel-button {
width: var(--zen-sidebar-action-button-width); width: var(--zen-sidebar-action-button-width);
height: var(--zen-sidebar-action-button-width); height: var(--zen-sidebar-action-button-width);
@ -46,7 +51,7 @@
#zen-sidebar-web-panel { #zen-sidebar-web-panel {
--zen-default-sidebar-width: 300px; --zen-default-sidebar-width: 300px;
width: calc(var(--zen-default-sidebar-width) + 100px); width: calc(var(--zen-default-sidebar-width) + 200px);
border-radius: var(--zen-panel-radius); border-radius: var(--zen-panel-radius);
overflow: hidden; overflow: hidden;
margin: var(--zen-appcontent-separator-from-window); margin: var(--zen-appcontent-separator-from-window);

View file

@ -86,8 +86,10 @@
display: none !important; display: none !important;
} }
#sidebar-box[hidden="true"] .zen-sidebar-action-button { #sidebar-box[hidden="true"] .zen-sidebar-action-button,
.zen-sidebar-panel-button[animate] {
opacity: 0; opacity: 0;
transform: translateX(-110%);
animation: zen-sidebar-button-fadeIn 0.4s forwards; animation: zen-sidebar-button-fadeIn 0.4s forwards;
} }
@ -133,16 +135,16 @@
/* Ugly code */ /* Ugly code */
#TabsToolbar .zen-sidebar-action-button:nth-child(1) { animation-delay: 0.1s; } #TabsToolbar .zen-sidebar-action-button:nth-child(1), .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(2) { animation-delay: 0.2s; } #TabsToolbar .zen-sidebar-action-button:nth-child(2), .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(3) { animation-delay: 0.3s; } #TabsToolbar .zen-sidebar-action-button:nth-child(3), .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(4) { animation-delay: 0.4s; } #TabsToolbar .zen-sidebar-action-button:nth-child(4), .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(5) { animation-delay: 0.5s; } #TabsToolbar .zen-sidebar-action-button:nth-child(5), .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(6) { animation-delay: 0.6s; } #TabsToolbar .zen-sidebar-action-button:nth-child(6), .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(7) { animation-delay: 0.7s; } #TabsToolbar .zen-sidebar-action-button:nth-child(7), .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(8) { animation-delay: 0.8s; } #TabsToolbar .zen-sidebar-action-button:nth-child(8), .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(9) { animation-delay: 0.9s; } #TabsToolbar .zen-sidebar-action-button:nth-child(9), .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
#TabsToolbar .zen-sidebar-action-button:nth-child(10) { animation-delay: 1s; } #TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
#TabsToolbar .zen-side-bar-profiles-button-panel-correction { #TabsToolbar .zen-side-bar-profiles-button-panel-correction {
position: absolute; position: absolute;