mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-09 01:45:30 +02:00
Update Zen Browser theme and sidebar styling
This commit is contained in:
parent
4b8c22d88b
commit
051439abde
19 changed files with 206 additions and 452 deletions
127
src/browser/base/content/ZenCustomizableUI.sys.mjs
Normal file
127
src/browser/base/content/ZenCustomizableUI.sys.mjs
Normal file
|
@ -0,0 +1,127 @@
|
|||
|
||||
export var ZenCustomizableUI = new class {
|
||||
constructor() {}
|
||||
|
||||
TYPE_TOOLBAR = 'toolbar';
|
||||
defaultSidebarIcons = [
|
||||
'zen-sidepanel-button',
|
||||
'zen-workspaces-button',
|
||||
'new-tab-button'
|
||||
];
|
||||
|
||||
startup(CustomizableUIInternal) {
|
||||
CustomizableUIInternal.registerArea(
|
||||
"zen-sidebar-top-buttons",
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: [
|
||||
"PanelUI-menu-button", "zen-expand-sidebar-button", "zen-profile-button"
|
||||
],
|
||||
defaultCollapsed: null,
|
||||
}
|
||||
);
|
||||
CustomizableUIInternal.registerArea(
|
||||
"zen-sidebar-icons-wrapper",
|
||||
{
|
||||
type: this.TYPE_TOOLBAR,
|
||||
defaultPlacements: this.defaultSidebarIcons,
|
||||
defaultCollapsed: null,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// We do not have access to the window object here
|
||||
init(window) {
|
||||
this._addSidebarButtons(window);
|
||||
this._hideToolbarButtons(window);
|
||||
}
|
||||
|
||||
_addSidebarButtons(window) {
|
||||
const sidebarBox = window.MozXULElement.parseXULToFragment(`
|
||||
<toolbar id="zen-sidebar-top-buttons"
|
||||
fullscreentoolbar="true"
|
||||
class="browser-toolbar customization-target zen-dont-hide-on-fullscreen"
|
||||
brighttext="true"
|
||||
data-l10n-id="tabs-toolbar"
|
||||
customizable="true"
|
||||
toolbarname="Zen Sidebar Top Buttons"
|
||||
context="toolbar-context-menu"
|
||||
flex="1"
|
||||
customizationtarget="zen-sidebar-top-buttons-customization-target"
|
||||
mode="icons">
|
||||
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
|
||||
<toolbarbutton removable="true" class="chromeclass-toolbar-additional toolbarbutton-1 zen-sidebar-action-button" id="zen-expand-sidebar-button" data-l10n-id="sidebar-zen-expand" cui-areatype="toolbar" oncommand="gZenVerticalTabsManager.toggleExpand();"></toolbarbutton>
|
||||
<toolbarbutton id="zen-profile-button"
|
||||
class="zen-sidebar-action-button toolbarbutton-1 chromeclass-toolbar-additional"
|
||||
delegatesanchor="true"
|
||||
onmousedown="ZenProfileDialogUI.showSubView(this, event)"
|
||||
onkeypress="ZenProfileDialogUI.showSubView(this, event)"
|
||||
consumeanchor="zen-profile-button"
|
||||
closemenu="none"
|
||||
data-l10n-id="toolbar-button-account"
|
||||
cui-areatype="toolbar"
|
||||
badged="true"
|
||||
removable="true">
|
||||
<vbox>
|
||||
<image id="zen-profile-button-icon" />
|
||||
</vbox>
|
||||
</toolbarbutton>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
`);
|
||||
window.document.getElementById('navigator-toolbox').prepend(sidebarBox);
|
||||
const sideBarTopButtons = window.document.getElementById('zen-sidebar-top-buttons')
|
||||
.querySelector('#zen-sidebar-top-buttons-customization-target');
|
||||
|
||||
const newTab = window.document.getElementById('vertical-tabs-newtab-button');
|
||||
newTab.classList.add('zen-sidebar-action-button');
|
||||
|
||||
window.CustomizableUI.registerToolbarNode(
|
||||
window.document.getElementById('zen-sidebar-top-buttons')
|
||||
);
|
||||
|
||||
const panelMenu = window.document.getElementById('PanelUI-menu-button');
|
||||
panelMenu.classList.add('zen-sidebar-action-button');
|
||||
panelMenu.setAttribute('cui-areatype', 'toolbar');
|
||||
|
||||
sideBarTopButtons.prepend(panelMenu);
|
||||
|
||||
for (let id of this.defaultSidebarIcons) {
|
||||
const elem = window.document.getElementById(id);
|
||||
if (id === 'zen-workspaces-button' || !elem) continue;
|
||||
elem.setAttribute('removable', 'true');
|
||||
}
|
||||
|
||||
window.CustomizableUI.registerToolbarNode(
|
||||
window.document.getElementById('zen-sidebar-icons-wrapper')
|
||||
);
|
||||
|
||||
this._moveWindowButtons(window);
|
||||
}
|
||||
|
||||
_moveWindowButtons(window) {
|
||||
const windowControls = window.document.getElementsByClassName('titlebar-buttonbox-container');
|
||||
const toolboxIcons = window.document.getElementById('zen-sidebar-top-buttons-customization-target');
|
||||
if (window.AppConstants.platform === "macosx") {
|
||||
for (let i = 0; i < windowControls.length; i++) {
|
||||
if (i === 0) {
|
||||
toolboxIcons.prepend(windowControls[i]);
|
||||
continue;
|
||||
}
|
||||
windowControls[i].remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_hideToolbarButtons(window) {
|
||||
const elementsToHide = [
|
||||
'alltabs-button',
|
||||
];
|
||||
for (let id of elementsToHide) {
|
||||
const elem = window.document.getElementById(id);
|
||||
if (elem) {
|
||||
elem.setAttribute('hidden', 'true');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue