From 13b78631dda4d7e796929c416f8b8193f65161e8 Mon Sep 17 00:00:00 2001 From: Mauro Balades Date: Fri, 10 May 2024 23:48:15 +0200 Subject: [PATCH] Started working on the redesign --- .github/workflows/src/windows_mozconfig | 1 + .../base/content/ZenSidebarManager.mjs | 71 ++++++++++++------- .../base/content/zen-sidebar-icons.inc.xhtml | 2 +- .../base/content/zen-sidebar-panel.inc.xhtml | 7 +- .../base/content/zen-sidebar-panels.inc.xhtml | 2 - .../en-US/browser/sidebarMenu-ftl.patch | 11 +++ .../themes/shared/zen-browser-shared.css | 26 ++++--- src/browser/themes/shared/zen-icons/icons.css | 3 +- .../themes/shared/zen-sidebar-panels.css | 34 +++++---- src/browser/themes/shared/zen-sidebar.css | 4 +- .../mozapps/installer/packager-mk.patch | 13 ---- 11 files changed, 105 insertions(+), 69 deletions(-) delete mode 100644 src/browser/base/content/zen-sidebar-panels.inc.xhtml create mode 100644 src/browser/locales/en-US/browser/sidebarMenu-ftl.patch delete mode 100644 src/toolkit/mozapps/installer/packager-mk.patch diff --git a/.github/workflows/src/windows_mozconfig b/.github/workflows/src/windows_mozconfig index 0ec522731..9001548af 100644 --- a/.github/workflows/src/windows_mozconfig +++ b/.github/workflows/src/windows_mozconfig @@ -15,4 +15,5 @@ ac_add_options --target=x86_64-pc-windows-msvc export MOZ_STUB_INSTALLER=1 export MOZ_MAINTENANCE_SERVICE= +export MOZ_PKG_FORMAT=TAR export MOZ_LTO=cross diff --git a/src/browser/base/content/ZenSidebarManager.mjs b/src/browser/base/content/ZenSidebarManager.mjs index 45457b841..9333a5d18 100644 --- a/src/browser/base/content/ZenSidebarManager.mjs +++ b/src/browser/base/content/ZenSidebarManager.mjs @@ -1,9 +1,11 @@ + + var gZenBrowserManagerSidebar = { _sidebarElement: null, _currentPanel: null, + _lastOpenedPanel: null, _hasRegisteredPinnedClickOutside: false, - _firstRun: 0, _hasChangedConfig: true, _splitterElement: null, _isDragging: false, @@ -77,6 +79,15 @@ var gZenBrowserManagerSidebar = { document.removeEventListener("mouseup", this._handleClickOutside.bind(this)); this._hasRegisteredPinnedClickOutside = false; } + + const button = document.getElementById("zen-sidepanel-button"); + if (Services.prefs.getBoolPref("zen.sidebar.enabled")) { + button.removeAttribute("hidden"); + } else { + button.setAttribute("hidden", "true"); + this._closeSidebarPanel(); + return; + } }, _handleClickOutside(event) { @@ -91,8 +102,34 @@ var gZenBrowserManagerSidebar = { this.close(); }, + toggle() { + if (!this._currentPanel) { + this._currentPanel = this._lastOpenedPanel; + if (!this._currentPanel) { + let data = this.sidebarData; + this._currentPanel = data.index[0]; + } + this.update(); + return; + } + // already open? + this.close(); + }, + update() { this._updateWebPanels(); + this._updateSidebarButton(); + this._updateWebPanel(); + this._updateButtons(); + }, + + _updateSidebarButton() { + let button = document.getElementById("zen-sidepanel-button"); + if (this._currentPanel) { + button.setAttribute("open", "true"); + } else { + button.removeAttribute("open"); + } }, _updateWebPanels() { @@ -119,33 +156,16 @@ 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); } + const addButton = document.getElementById("zen-sidebar-add-panel-button"); if (data.index.length < this.MAX_SIDEBAR_PANELS) { - this.sidebarElement.appendChild(document.createXULElement("toolbarseparator")); - let addPanelButton = document.createXULElement("toolbarbutton"); - 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); + addButton.removeAttribute("hidden"); + } else { + addButton.setAttribute("hidden", "true"); } - this._updateArrowScrollMaxHeight(data.index.length + 1); - // We rerender multiple times for some reason, so we need to avoid the animation - if (this._firstRun < this.MAX_RUNS) - this._firstRun++; - }, - - _updateArrowScrollMaxHeight(num) { - let content = document.querySelector("#tabbrowser-arrowscrollbox"); - // TODO: make this dynamic with CSS! - let height = (this.MAX_SIDEBAR_PANELS * 120) - (num * 120); - content.style.maxHeight = `${height}px`; }, async _openAddPanelDialog() { @@ -184,8 +204,8 @@ var gZenBrowserManagerSidebar = { _closeSidebarPanel() { let sidebar = document.getElementById("zen-sidebar-web-panel"); sidebar.setAttribute("hidden", "true"); + this._lastOpenedPanel = this._currentPanel; this._currentPanel = null; - this._updateButtons(); }, _handleClick(event) { @@ -195,7 +215,6 @@ var gZenBrowserManagerSidebar = { return; } this._currentPanel = panelId; - this._updateButtons(); this._updateWebPanel(); }, @@ -218,6 +237,7 @@ var gZenBrowserManagerSidebar = { }, _updateWebPanel() { + this._updateButtons(); let sidebar = this._openAndGetWebPanelWrapper(); this._hideAllWebPanels(); let existantWebview = sidebar.querySelector(`browser[zen-sidebar-id="${this._currentPanel}"]`); @@ -316,6 +336,7 @@ var gZenBrowserManagerSidebar = { close() { this._hideAllWebPanels(); this._closeSidebarPanel(); + this._updateSidebarButton(); }, togglePinned(elem) { @@ -331,7 +352,7 @@ var gZenBrowserManagerSidebar = { get sidebarElement() { if (!this._sidebarElement) { - this._sidebarElement = document.getElementById("zen-sidebar-panels-wrapper"); + this._sidebarElement = document.getElementById("zen-sidebar-panels-sites"); } return this._sidebarElement; }, diff --git a/src/browser/base/content/zen-sidebar-icons.inc.xhtml b/src/browser/base/content/zen-sidebar-icons.inc.xhtml index 3bb2201d8..b13b88608 100644 --- a/src/browser/base/content/zen-sidebar-icons.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-icons.inc.xhtml @@ -1,9 +1,9 @@ -#include zen-sidebar-panels.inc.xhtml + diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml index 86789a47d..4741b242d 100644 --- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-panel.inc.xhtml @@ -9,8 +9,13 @@ - + + + + + + diff --git a/src/browser/base/content/zen-sidebar-panels.inc.xhtml b/src/browser/base/content/zen-sidebar-panels.inc.xhtml deleted file mode 100644 index 5959c712f..000000000 --- a/src/browser/base/content/zen-sidebar-panels.inc.xhtml +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch b/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch new file mode 100644 index 000000000..c8379f491 --- /dev/null +++ b/src/browser/locales/en-US/browser/sidebarMenu-ftl.patch @@ -0,0 +1,11 @@ +diff --git a/browser/locales/en-US/browser/sidebarMenu.ftl b/browser/locales/en-US/browser/sidebarMenu.ftl +index 746a2084df954f224ace4ce699623dfc618f0ada..ee84f78fe7ec3992d269d3ba103b62c846dc22b8 100644 +--- a/browser/locales/en-US/browser/sidebarMenu.ftl ++++ b/browser/locales/en-US/browser/sidebarMenu.ftl +@@ -16,3 +16,6 @@ sidebar-menu-close = + + sidebar-close-button = + .tooltiptext = Close sidebar ++ ++sidebar-zen-sidepanel = ++ .label = Side Panels diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css index fee9dbeb0..657b2ac94 100644 --- a/src/browser/themes/shared/zen-browser-shared.css +++ b/src/browser/themes/shared/zen-browser-shared.css @@ -219,12 +219,8 @@ button.popup-notification-dropmarker { padding: 5px 0; margin-right: 0 !important; -moz-window-dragging: no-drag; - - display: grid; - grid-template-rows: repeat(3, auto); - justify-items: center; - --zen-sidebar-action-button-width: 40px; + --zen-sidebar-action-button-width: 38px; } #navigator-toolbox[inlinedwithsidebar="true"] #TabsToolbar { @@ -285,17 +281,24 @@ toolbarbutton#scrollbutton-up { } .tabbrowser-tab { - --zen-browser-tab-icon-size: 16px; - --tab-min-width: 0 !important; - margin: 3px auto !important; - border-radius: 12px; + --zen-browser-tab-icon-size: 18px; + --tab-min-width: 36px !important; + margin: 0 auto !important; + border-radius: 8px; position: relative; color-scheme: var(--tab-selected-color-scheme); - background: var(--toolbarbutton-hover-background); border: 2px solid transparent; + background: transparent; padding: 0 !important; align-items: center; + min-height: var(--tab-min-width); /* Make a box */ animation: zen-slide-in 0.3s; + width: calc(var(--zen-browser-tab-icon-size) + 2px); + transition: .1s background, .1s border-color; +} + +.tabbrowser-tab:hover { + background: var(--toolbarbutton-hover-background); } .tabbrowser-tab:active, @@ -334,7 +337,8 @@ toolbarbutton#scrollbutton-up { } .tabbrowser-tab:is([multiselected="true"], [selected]) { - border-color: light-dark(var(--zen-colors-border), rgba(255, 255, 255, 0.15)); + /*border-color: light-dark(var(--zen-colors-border), rgba(255, 255, 255, 0.15));*/ + background: var(--toolbarbutton-hover-background); } .tab-close-button { diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index fabbb5ad0..48089f846 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -35,7 +35,8 @@ } #sidebar-button:-moz-locale-dir(ltr):not([positionend]), -#sidebar-button:-moz-locale-dir(rtl)[positionend] { +#sidebar-button:-moz-locale-dir(rtl)[positionend], +#zen-sidepanel-button { list-style-image: url("sidebars.svg") !important; } diff --git a/src/browser/themes/shared/zen-sidebar-panels.css b/src/browser/themes/shared/zen-sidebar-panels.css index fb7026658..f94d7b290 100644 --- a/src/browser/themes/shared/zen-sidebar-panels.css +++ b/src/browser/themes/shared/zen-sidebar-panels.css @@ -2,21 +2,27 @@ #zen-sidebar-panels-wrapper { /*min-height: 500px;*/ display: flex; - flex-direction: column; align-items: center; - justify-content: center; + justify-content: space-between; + align-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-panels-sites { + background: transparent; + max-width: 1px; + display: flex; +} + +#zen-sidebar-add-panel-button:not(:hover) image, +.zen-sidebar-panel-button:not([selected="true"], #zen-sidebar-add-panel-button) image { + background: transparent !important; } .zen-sidebar-panel-button { width: var(--zen-sidebar-action-button-width); height: var(--zen-sidebar-action-button-width); max-height: var(--zen-sidebar-action-button-width); - padding: 0; + padding: 0 3px !important; margin: 0; justify-content: center; align-items: center; @@ -24,20 +30,16 @@ } .zen-sidebar-panel-button image { - border-radius: 15px !important; + border-radius: 10px !important; background: var(--toolbarbutton-hover-background); border: 2px solid transparent; + transition: background 0.1s ease-in-out; } .zen-sidebar-panel-button:hover image { background: color-mix(in srgb, var(--toolbarbutton-hover-background) 12%, transparent); } -.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); } @@ -135,7 +137,8 @@ } } -#zen-sidebar-web-header { +#zen-sidebar-web-header, +#zen-sidebar-panels-wrapper { width: 100%; min-height: 50px; display: flex; @@ -149,6 +152,11 @@ color-scheme: var(--toolbar-color-scheme); } +#zen-sidebar-panels-wrapper { + border-top-width: 1px !important; + border-bottom-width: 0px !important; +} + #zen-sidebar-web-panel-pinned { margin-left: auto !important; } diff --git a/src/browser/themes/shared/zen-sidebar.css b/src/browser/themes/shared/zen-sidebar.css index 68a063ab8..a2143f3c1 100644 --- a/src/browser/themes/shared/zen-sidebar.css +++ b/src/browser/themes/shared/zen-sidebar.css @@ -68,7 +68,7 @@ #TabsToolbar .toolbarbutton-1:not(.zen-sidebar-panel-button) > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), .zen-sidebar-action-button { - border-radius: 100px !important; + border-radius: 8px !important; } :root[customizing] #navigator-toolbox { @@ -79,7 +79,7 @@ #TabsToolbar .toolbarbutton-1[open="true"] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack), .zen-sidebar-action-button:hover, .zen-sidebar-action-button[open="true"] { - background: var(--toolbarbutton-hover-background); + background: var(--toolbarbutton-hover-background) !important; } .zen-sidebar-action-button:hover image { diff --git a/src/toolkit/mozapps/installer/packager-mk.patch b/src/toolkit/mozapps/installer/packager-mk.patch deleted file mode 100644 index ee6839508..000000000 --- a/src/toolkit/mozapps/installer/packager-mk.patch +++ /dev/null @@ -1,13 +0,0 @@ -diff --git a/toolkit/mozapps/installer/packager.mk b/toolkit/mozapps/installer/packager.mk -index aeba614e40fd1a04169af517e16d7e3b52348423..572520c6f47a16e57e216bf29d9dd042ce1a50f4 100644 ---- a/toolkit/mozapps/installer/packager.mk -+++ b/toolkit/mozapps/installer/packager.mk -@@ -124,7 +124,7 @@ make-package: FORCE - $(MAKE) make-package-internal - ifeq (WINNT,$(OS_ARCH)) - ifeq ($(MOZ_PKG_FORMAT),ZIP) -- $(MAKE) -C windows ZIP_IN='$(ABS_DIST)/$(PACKAGE)' installer -+ $(MAKE) -C windows-0.52.0 ZIP_IN='$(ABS_DIST)/$(PACKAGE)' installer - endif - endif - ifdef MOZ_AUTOMATION