mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 13:35:29 +02:00
Added an opion to remove sidebar panels
This commit is contained in:
parent
bf5896556d
commit
ca3ce58230
7 changed files with 63 additions and 15 deletions
|
@ -3,10 +3,13 @@ export var gZenBrowserManagerSidebar = {
|
|||
_sidebarElement: null,
|
||||
_currentPanel: null,
|
||||
_hasRegisteredPinnedClickOutside: false,
|
||||
_firstRun: 0,
|
||||
_hasChangedConfig: true,
|
||||
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",
|
||||
MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button
|
||||
MAX_RUNS: 3,
|
||||
|
||||
init() {
|
||||
this.update();
|
||||
|
@ -29,7 +32,9 @@ export var gZenBrowserManagerSidebar = {
|
|||
},
|
||||
|
||||
handleEvent() {
|
||||
this._hasChangedConfig = true;
|
||||
this.update();
|
||||
this._hasChangedConfig = false;
|
||||
|
||||
if (Services.prefs.getBoolPref("zen.sidebar.pinned") && !this._hasRegisteredPinnedClickOutside) {
|
||||
document.addEventListener("mouseup", this._handleClickOutside.bind(this));
|
||||
|
@ -79,6 +84,8 @@ export var gZenBrowserManagerSidebar = {
|
|||
button.setAttribute("flex", "1");
|
||||
button.setAttribute("zen-sidebar-id", site);
|
||||
button.setAttribute("context", "zenWebPanelContextMenu");
|
||||
if (this._firstRun < this.MAX_RUNS || this._hasChangedConfig)
|
||||
button.setAttribute("animate", "true");
|
||||
this._getWebPanelIcon(panel.url, button);
|
||||
button.addEventListener("click", this._handleClick.bind(this));
|
||||
this.sidebarElement.appendChild(button);
|
||||
|
@ -89,8 +96,13 @@ export var gZenBrowserManagerSidebar = {
|
|||
addPanelButton.id = "zen-sidebar-add-panel-button";
|
||||
addPanelButton.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional");
|
||||
addPanelButton.addEventListener("click", this._openAddPanelDialog.bind(this));
|
||||
if (this._firstRun < this.MAX_RUNS || this._hasChangedConfig)
|
||||
addPanelButton.setAttribute("animate", "true");
|
||||
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() {
|
||||
|
@ -191,6 +203,7 @@ export var gZenBrowserManagerSidebar = {
|
|||
browser.setAttribute("autoscroll", "false");
|
||||
browser.setAttribute("autocompletepopup", "PopupAutoComplete");
|
||||
browser.setAttribute("contextmenu", "contentAreaContextMenu");
|
||||
browser.setAttribute("disablesecurity", "true");
|
||||
return browser;
|
||||
},
|
||||
|
||||
|
|
|
@ -54,4 +54,9 @@ Preferences.addAll([
|
|||
type: "bool",
|
||||
default: true,
|
||||
},
|
||||
{
|
||||
id: "zen.sidebar.enabled",
|
||||
type: "bool",
|
||||
default: true,
|
||||
},
|
||||
]);
|
||||
|
|
|
@ -19,4 +19,20 @@
|
|||
preference="zen.theme.toolbar-themed"/>
|
||||
</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>
|
||||
|
|
|
@ -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-themed-toolbar =
|
||||
.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
|
||||
|
|
|
@ -286,8 +286,9 @@ toolbarbutton#scrollbutton-up {
|
|||
animation: zen-slide-in 0.3s;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:active {
|
||||
transform: scale(0.9);
|
||||
.tabbrowser-tab:active,
|
||||
.zen-sidebar-panel-button:active {
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
|
||||
.tab-stack {
|
||||
|
|
|
@ -7,6 +7,11 @@
|
|||
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 {
|
||||
width: var(--zen-sidebar-action-button-width);
|
||||
height: var(--zen-sidebar-action-button-width);
|
||||
|
@ -46,7 +51,7 @@
|
|||
|
||||
#zen-sidebar-web-panel {
|
||||
--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);
|
||||
overflow: hidden;
|
||||
margin: var(--zen-appcontent-separator-from-window);
|
||||
|
|
|
@ -86,8 +86,10 @@
|
|||
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;
|
||||
transform: translateX(-110%);
|
||||
animation: zen-sidebar-button-fadeIn 0.4s forwards;
|
||||
}
|
||||
|
||||
|
@ -133,16 +135,16 @@
|
|||
|
||||
/* Ugly code */
|
||||
|
||||
#TabsToolbar .zen-sidebar-action-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(3) { animation-delay: 0.3s; }
|
||||
#TabsToolbar .zen-sidebar-action-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(6) { animation-delay: 0.6s; }
|
||||
#TabsToolbar .zen-sidebar-action-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(9) { animation-delay: 0.9s; }
|
||||
#TabsToolbar .zen-sidebar-action-button:nth-child(10) { animation-delay: 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), .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
|
||||
#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), .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
|
||||
#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), .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
|
||||
#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), .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
|
||||
#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), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
|
||||
|
||||
#TabsToolbar .zen-side-bar-profiles-button-panel-correction {
|
||||
position: absolute;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue