mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 20:35:28 +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,
|
_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;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -54,4 +54,9 @@ Preferences.addAll([
|
||||||
type: "bool",
|
type: "bool",
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "zen.sidebar.enabled",
|
||||||
|
type: "bool",
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue