Started working on the redesign

This commit is contained in:
Mauro Balades
2024-05-10 23:48:15 +02:00
parent 6b696c5ffd
commit 13b78631dd
11 changed files with 105 additions and 69 deletions

View File

@@ -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

View File

@@ -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;
},

View File

@@ -1,9 +1,9 @@
#include zen-sidebar-panels.inc.xhtml
<toolbar id="zen-sidebar-icons-wrapper">
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button chromeclass-toolbar-additional subviewbutton-nav" badge="true" closemenu="none" removable="true" delegatesanchor="true" cui-areatype="toolbar" id="zen-profile-button" data-l10n-id="toolbar-button-account" onclick="ZenProfileDialogUI.showSubView(this, event)">
<html:div class="zen-side-bar-profiles-button-panel-correction"></html:div>
<html:div></html:div>
</toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-sidepanel-button" data-l10n-id="sidebar-zen-sidepanel" onclick="gZenBrowserManagerSidebar.toggle();"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-bookmark-button" data-l10n-id="sidebar-menu-bookmarks" onclick="SidebarUI.show('viewBookmarksSidebar');"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-history-button" data-l10n-id="sidebar-menu-history" onclick="SidebarUI.show('viewHistorySidebar');"></toolbarbutton>
<toolbarbutton class="toolbarbutton-1 zen-sidebar-action-button" id="zen-preferences-button" data-l10n-id="toolbar-settings-button" onclick="event.target.ownerGlobal.openPreferences(undefined);"></toolbarbutton>

View File

@@ -9,8 +9,13 @@
<toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.close();"/>
</toolbar>
<vbox id="zen-sidebar-web-panel-browser-containers">
</vbox>
<toolbar mode="icons" flex="1" id="zen-sidebar-panels-wrapper">
<toolbar mode="icons" flex="1" id="zen-sidebar-panels-sites">
</toolbar>
<toolbarbutton id="zen-sidebar-add-panel-button" class="zen-sidebar-panel-button toolbarbutton-1 chromeclass-toolbar-additional" onclick="gZenBrowserManagerSidebar._openAddPanelDialog();"/>
</toolbar>
<html:span id="zen-sidebar-web-panel-splitter"></html:span>
</box>
</box>

View File

@@ -1,2 +0,0 @@
<hbox id="zen-sidebar-panels-wrapper" hidden="true">
</hbox>

View File

@@ -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

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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