diff --git a/src/browser/base/content/ZenSidebarManager.mjs b/src/browser/base/content/ZenSidebarManager.mjs index 16932fb16..15efb0848 100644 --- a/src/browser/base/content/ZenSidebarManager.mjs +++ b/src/browser/base/content/ZenSidebarManager.mjs @@ -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; }, diff --git a/src/browser/components/preferences/zen-looks.js b/src/browser/components/preferences/zen-looks.js index dddea5b23..90586d5ca 100644 --- a/src/browser/components/preferences/zen-looks.js +++ b/src/browser/components/preferences/zen-looks.js @@ -54,4 +54,9 @@ Preferences.addAll([ type: "bool", default: true, }, + { + id: "zen.sidebar.enabled", + type: "bool", + default: true, + }, ]); diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml index e28b030d5..5755c9054 100644 --- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml +++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml @@ -19,4 +19,20 @@ preference="zen.theme.toolbar-themed"/> + + + + diff --git a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl index e3eee5929..4efd9ed89 100644 --- a/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl +++ b/src/browser/locales/en-US/browser/preferences/zen-preferences.ftl @@ -7,4 +7,10 @@ category-zen-looks = 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 \ No newline at end of file + .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 diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css index f738a0bf1..281746b03 100644 --- a/src/browser/themes/shared/zen-browser-shared.css +++ b/src/browser/themes/shared/zen-browser-shared.css @@ -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 { diff --git a/src/browser/themes/shared/zen-sidebar-panels.css b/src/browser/themes/shared/zen-sidebar-panels.css index 1a080ffd1..dac65efaa 100644 --- a/src/browser/themes/shared/zen-sidebar-panels.css +++ b/src/browser/themes/shared/zen-sidebar-panels.css @@ -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); diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/themes/shared/zen-sidebar.css index ce47aa9d3..3143739c0 100644 --- a/src/browser/themes/shared/zen-sidebar.css +++ b/src/browser/themes/shared/zen-sidebar.css @@ -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;